Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Panel zwijany

Sposób użycia

Wywołanie przez atrybuty niestandardowe (jeśli komponent jest generowany dynamicznie, należy wywołać mdui.mutation() w celu inicjalizacji)
Wywołanie przez JavaScript

Powiązane artykuły

Wytyczne projektowe Material Design: Komponenty - Panel zwijany

Styl

Pełna struktura HTML

Ten przykład zawiera wszystkie możliwe elementy HTML.

Przykład

<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Trip name</div>
      <div class="mdui-panel-item-summary">Carribean cruise</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Location</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Start and end dates</div>
      <div class="mdui-panel-item-summary">Start date: Feb 29, 2016</div>
      <div class="mdui-panel-item-summary">End date: Not set</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

</div>

Minimalna struktura HTML

Niektóre elementy w powyższym przykładzie nie są wymagane; poniższy przykład zawiera tylko niezbędne elementy HTML.

Przykład

<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Domyślnie otwarta pozycja panelu

Dodanie klasy .mdui-panel-item-open do elementu <div class="mdui-panel-item"></div> sprawi, że ten element będzie domyślnie otwarty.

Przykład

<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item mdui-panel-item-open">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Usuń odstępy między panelami

Dodanie klasy .mdui-panel-gapless do elementu <div class="mdui-panel"></div> usunie odstępy między otwartym panelem a innymi panelami.

Przykład

<div class="mdui-panel mdui-panel-gapless" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Panel wysuwany (popout)

Dodanie klasy .mdui-panel-popout do elementu <div class="mdui-panel"></div> nada otwartemu panelowi efekt wysunięcia (popout).

Przykład

<div class="mdui-panel mdui-panel-popout" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Zagnieżdżanie paneli

Panele zwijane mogą być zagnieżdżane.

Przykład

<div class="mdui-panel" mdui-panel>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>

      <!-- Pierwszy zagnieżdżony panel zwijany -->
      <div class="mdui-panel" mdui-panel>
        <div class="mdui-panel-item">
          <div class="mdui-panel-item-header">First</div>
          <div class="mdui-panel-item-body">
            <p>First content</p>
            <p>First content</p>
            <p>First content</p>

            <!-- Drugi zagnieżdżony panel zwijany -->
            <div class="mdui-panel" mdui-panel>
              <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">First</div>
                <div class="mdui-panel-item-body">
                  <p>First content</p>
                  <p>First content</p>
                  <p>First content</p>
                </div>
              </div>
              <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">Second</div>
                <div class="mdui-panel-item-body">
                  <p>Second content</p>
                  <p>Second content</p>
                  <p>Second content</p>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="mdui-panel-item">
          <div class="mdui-panel-item-header">Second</div>
          <div class="mdui-panel-item-body">
            <p>Second content</p>
            <p>Second content</p>
            <p>Second content</p>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>
</div>

Sposób użycia

Wywołanie przez atrybuty

Ta metoda nie wymaga pisania kodu JavaScript. Wystarczy dodać atrybut mdui-panel="options" do elementu <div class="mdui-panel"></div>, aby aktywować wtyczkę.

Jeśli komponent jest generowany dynamicznie, należy wywołać mdui.mutation() w celu inicjalizacji.

Przykład

<div class="mdui-panel" mdui-panel="{accordion: true}">
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>
</div>

Do elementów wewnątrz panelu zwijanego można dodać atrybuty w celu powiązania zdarzeń, które działają również przy wywoływaniu przez JavaScript.

Atrybut	Opis
`mdui-panel-item-close`	Kliknięcie tego elementu wywoła zdarzenie `close.mdui.panel` i zamknie panel, w którym znajduje się ten element.

Wywołanie przez JavaScript

Instancja komponentu:

// selector oznacza selektor CSS lub element DOM elementu .mdui-panel
// options oznaczają parametry wtyczki; patrz lista parametrów poniżej
var inst = new mdui.Panel(selector, options);

Uruchom

Parametr

Nazwa parametru	Typ	Wartość domyślna	Opis
`accordion`	`boolean`	`false`	Czy włączyć efekt akordeonu. Gdy ustawione na `true`, tylko jeden panel może być otwarty w tym samym czasie; otwarcie jednego panelu zamknie pozostałe. Gdy ustawione na `false`, można otworzyć wiele paneli jednocześnie.

Metoda

Nazwa metody	Opis
`open(item)`	Otwórz pozycję panelu. `item`: Numer indeksu, element DOM lub selektor CSS pozycji panelu.
`close(item)`	Zamknij pozycję panelu. `item`: Numer indeksu, element DOM lub selektor CSS pozycji panelu.
`toggle(item)`	Przełącz stan pozycji panelu. `item`: Numer indeksu, element DOM lub selektor CSS pozycji panelu.
`openAll()`	Otwórz wszystkie pozycje panelu. Metoda ta działa tylko gdy `accordion` jest ustawione na `false`.
`closeAll()`	Zamknij wszystkie pozycje panelu.

Zdarzenie

Nazwa zdarzenia	Opis	Cel	Parametry
`open.mdui.panel`	Zdarzenie wyzwalane przed rozpoczęciem animacji otwierania panelu.	`<div class="mdui-panel-item"></div>`	`event._detail.inst`: Instancja
`opened.mdui.panel`	Zdarzenie wyzwalane po zakończeniu animacji otwierania panelu.
`close.mdui.panel`	Zdarzenie wyzwalane przed rozpoczęciem animacji zamykania panelu.
`closed.mdui.panel`	Zdarzenie wyzwalane po zakończeniu animacji zamykania panelu.

Lista klas CSS

Nazwa klasy	Opis
`.mdui-panel`	Zdefiniuj panel zwijany.
`.mdui-panel-gapless`	Usuń odstępy między otwartym panelem a innymi panelami.
`.mdui-panel-popout`	Nadaj otwartemu panelowi efekt wysunięcia (popout).
`.mdui-panel-item`	Zdefiniuj pozycję panelu zwijanego.
`.mdui-panel-item-open`	Domyślnie otwórz pozycję panelu.
`.mdui-panel-item-header`	Zdefiniuj nagłówek pozycji panelu.
`.mdui-panel-item-title`	Zdefiniuj tytuł w nagłówku panelu.
`.mdui-panel-item-summary`	Zdefiniuj podsumowanie w nagłówku panelu.
`.mdui-panel-item-arrow`	Zdefiniuj ikonę rozwijania/zwijania panelu.
`.mdui-panel-item-body`	Zdefiniuj zawartość pozycji panelu.
`.mdui-panel-item-actions`	Zdefiniuj pasek akcji pozycji panelu.

Separator

Pole tekstowe