Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Collapse

Sbalovací panel se používá k rozbalení nebo sbalení bloku obsahu.

Tato komponenta sama o sobě nemá žádný styl, musíte napsat svůj vlastní styl nebo ji použít v kombinaci s jinými komponentami.

Způsob volání

(Pokud je komponenta dynamicky generována, musíte ji inicializovat voláním mdui.mutation())
Volání přes JavaScript

Struktura HTML

Toto je nejzákladnější HTML struktura:

<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>

Přidáním třídy .mdui-collapse-item-open můžete nastavit blok obsahu na výchozí rozbalený stav:

<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>

Prvek obsahující třídu .mdui-collapse-item-arrow se otočí o 180 stupňů, když se blok obsahu rozbalí:

<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>

Způsob volání

Volání přes atributy

S touto metodou není potřeba psát kód v JavaScriptu. Stačí přidat atribut mdui-collapse="options" na prvek <div class="mdui-collapse"></div> a aktivujete komponentu.

Pokud je prvek dynamicky generován, musíte jej inicializovat voláním mdui.mutation().

Příklad

<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>

      <!-- Vnořené prvky -->
      <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>

Můžete přidat některé atributy prvkům v komponentě Collapse pro vázání událostí, tyto atributy lze také použít při volání komponenty pomocí JavaScriptu.

Atribut	Popis
`mdui-collapse-item-close`	Kliknutím na tento prvek se spustí událost `close.mdui.collapse` a zavře panel, ve kterém se nachází.

Volání přes JavaScript

Vytvoření instance komponenty:

// selector je CSS selektor prvku nebo DOM prvek
// options jsou parametry modulu, viz seznam parametrů níže
var inst = new mdui.Collapse(selector, options);

demo

Parametr

Název parametru	Typ	Výchozí hodnota	Popis
`accordion`	`boolean`	`false`	Zda povolit efekt akordeonu. Pokud je `true`, může být otevřen pouze jeden blok obsahu, otevření jednoho bloku obsahu zavře ostatní bloky. Pokud je `false`, můžete otevřít více bloků obsahu současně.

Metoda

Název metody	Popis
`open(item)`	Otevře blok obsahu. `item`: Index bloku obsahu, DOM prvek nebo CSS selektor.
`close(item)`	Zavře blok obsahu. `item`: Index bloku obsahu, DOM prvek nebo CSS selektor.
`toggle(item)`	Přepne stav bloku obsahu. `item`: Index bloku obsahu, DOM prvek nebo CSS selektor.
`openAll()`	Otevře všechny bloky obsahu. Tato metoda je účinná pouze když je `accordion` nastaveno na `false`.
`closeAll()`	Zavře všechny bloky obsahu.

Událost

Název události	Popis	Cíl	Parametry
`open.mdui.collapse`	Událost bude spuštěna, když blok obsahu začne animaci otevírání.	`<div class="mdui-collapse-item"></div>`	`event._detail.inst`: Instance
`opened.mdui.collapse`	Událost bude spuštěna, když blok obsahu ukončí animaci otevírání.
`close.mdui.collapse`	Událost bude spuštěna, když blok obsahu začne animaci zavírání.
`closed.mdui.collapse`	Událost bude spuštěna, když blok obsahu ukončí animaci zavírání.

Další příklady

Podseznam

Příklad

<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>

Indikátor průběhu

Headroom