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

Zwijanie

Wtyczka Collapse służy do zwijania lub rozwijania bloków treści.

Sama wtyczka nie posiada żadnych stylów, musisz napisać style samodzielnie lub używać jej w połączeniu z innymi komponentami.

Sposób użycia

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

Struktura HTML

To jest najbardziej podstawowa struktura HTML:

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

Dodanie klasy .mdui-collapse-item-open powoduje, że blok treści jest domyślnie rozwinięty:

<div class="mdui-collapse">
  <div class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

Elementy z klasą .mdui-collapse-item-arrow zostaną obrócone o 180 stopni podczas rozwijania bloku treści:

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <div class="mdui-collapse-item-arrow"></div>
    </div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

Sposób użycia

Wywołanie przez atrybuty

Korzystając z tej metody, nie trzeba pisać kodu JavaScript. Wystarczy dodać atrybut mdui-collapse="options" do elementu <div class="mdui-collapse"></div>, aby aktywować wtyczkę.

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

codeplay_arrow
Przykład
<div class="mdui-collapse" mdui-collapse>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item1</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item1 content</p>
      <p>item1 content</p>
      <p>item1 content</p>

      <!-- Elementy zagnieżdżone -->
      <div class="mdui-collapse" mdui-collapse>
        <div class="mdui-collapse-item">
          <div class="mdui-collapse-item-header">
            <p><a href="javascript:;">subitem1</a></p>
          </div>
          <div class="mdui-collapse-item-body">
            <p>subitem1 content</p>
            <p>subitem1 content</p>
            <p>subitem1 content</p>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item2</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item2 content</p>
      <p>item2 content</p>
      <p>item2 content</p>
    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item3</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item3 content</p>
      <p>item3 content</p>
      <p>item3 content</p>
    </div>
  </div>

</div>

Do elementów wewnątrz Collapse można dodać atrybuty służące do powiązania zdarzeń; atrybuty te mogą być również używane przy wywoływaniu za pomocą JavaScript.

AtrybutOpis
mdui-collapse-item-closeKliknięcie tego elementu spowoduje wyzwolenie zdarzenia close.mdui.collapse i zamknięcie panelu, w którym znajduje się ten element.

Wywołanie przez JavaScript

Inicjalizacja wtyczki:

// selector to selektor CSS lub element DOM
// options to parametry wtyczki, patrz lista parametrów poniżej
var inst = new mdui.Collapse(selector, options);
demo

Parametr

Nazwa parametruTypWartość domyślnaOpis
accordionbooleanfalseCzy włączyć efekt akordeonu.
  • Gdy ma wartość true, tylko jeden blok treści może być otwarty w tym samym czasie; otwarcie jednego bloku spowoduje zamknięcie pozostałych.
  • Gdy ma wartość false, można otworzyć wiele bloków treści jednocześnie.

Metoda

Nazwa metodyOpis
open(item)Otwiera blok treści.
  • item: Numer indeksu bloku treści, element DOM lub selektor CSS.
close(item)Zamyka blok treści.
  • item: Numer indeksu bloku treści, element DOM lub selektor CSS.
toggle(item)Przełącza stan bloku treści.
  • item: Numer indeksu bloku treści, element DOM lub selektor CSS.
openAll()Otwiera wszystkie bloki treści. Metoda ta działa tylko wtedy, gdy accordion ma wartość false.
closeAll()Zamyka wszystkie bloki treści.

Zdarzenie

Nazwa zdarzeniaOpisCelParametry
open.mdui.collapseZdarzenie wyzwalane przed rozpoczęciem animacji otwierania bloku treści.<div class="mdui-collapse-item"></div>event._detail.inst: Instancja
opened.mdui.collapseZdarzenie wyzwalane po zakończeniu animacji otwierania bloku treści.
close.mdui.collapseZdarzenie wyzwalane przed rozpoczęciem animacji zamykania bloku treści.
closed.mdui.collapseZdarzenie wyzwalane po zakończeniu animacji zamykania bloku treści.

Więcej przykładów

Podlista

code
Przykład
<ul class="mdui-list" mdui-collapse="{accordion: true}">

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
    <div class="mdui-list-item-content">Home</div>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">dashboard</i>
    <div class="mdui-list-item-content">Dashboard</div>
  </li>

  <li class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">people</i>
      <div class="mdui-list-item-content">Audience</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">Language</li>
      <li class="mdui-list-item mdui-ripple">Location</li>
      <li class="mdui-list-item mdui-ripple">New vs Returning</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">device_hub</i>
      <div class="mdui-list-item-content">Acquisition</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Traffic</li>
      <li class="mdui-list-item mdui-ripple">Direct Traffic</li>
      <li class="mdui-list-item mdui-ripple">Search Overview</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">touch_app</i>
      <div class="mdui-list-item-content">Behavior</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Pages</li>
      <li class="mdui-list-item mdui-ripple">Landing Pages</li>
      <li class="mdui-list-item mdui-ripple">Exit Pages</li>
    </ul>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">shopping_cart</i>
    <div class="mdui-list-item-content">Ecommerce</div>
  </li>

</ul>
arrow_backPrevious
Wskaźnik postępu
arrow_forwardNext
Headroom