A Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.

Collapse

A Collapse bővítmény a tartalomblokkok összecsukására vagy kibontására szolgál.

Maga a bővítmény nem tartalmaz stílusokat, a stílusokat magának kell megírnia, vagy más komponensekkel együtt kell használnia.

Használat

(Ha a komponensek dinamikusan jönnek létre, a mdui.mutation() függvényt kell meghívni az inicializáláshoz)
JavaScript segítségével történő hívás

HTML szerkezet

Ez a legalapvetőbb HTML szerkezet:

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

A .mdui-collapse-item-open osztály hozzáadása alapértelmezés szerint kibontott állapotba helyezi a tartalomblokkot:

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

A .mdui-collapse-item-arrow osztályt tartalmazó elemek 180 fokkal elfordulnak, amikor a tartalomblokk kibomlik:

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

Használat

Hívás egyéni attribútumokkal

Ezzel a módszerrel nincs szükség JavaScript kód írására. Csak adja hozzá az mdui-collapse="options" attribútumot az <div class="mdui-collapse"></div> elemhez a bővítmény aktiválásához.

Ha a komponensek dinamikusan jönnek létre, a mdui.mutation() függvényt kell meghívni az inicializáláshoz.

Példa

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

      <!-- Beágyazott elemek -->
      <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>

A Collapse-en belüli elemekhez attribútumok adhatók az események kötéséhez, amelyek a JavaScript hívási mód használatakor is elérhetők.

Attribútum	Leírás
`mdui-collapse-item-close`	Az elemre való kattintás kiváltja a `close.mdui.collapse` eseményt, és bezárja azt a panelt, amelyben az elem található.

JavaScript segítségével történő hívás

Bővítmény példányosítása:

// A selector egy CSS szelektort vagy DOM elemet jelöl
// Az options a bővítmény paraméterei, lásd az alábbi paraméterlistát
var inst = new mdui.Collapse(selector, options);

demo

Paraméter

Paraméter neve	Típus	Alapértelmezett	Leírás
`accordion`	`boolean`	`false`	Engedélyezi-e a harmonika-effektust. Ha `true`, egyszerre legfeljebb egy tartalomblokk lehet nyitva. Egy blokk megnyitásakor a többi bezárul. Ha `false`, egyszerre több tartalomblokk is nyitva lehet.

Metódus

Metódus neve	Leírás
`open(item)`	Tartalomblokk megnyitása. `item`: A tartalomblokk indexe, DOM eleme vagy CSS szelektora.
`close(item)`	Tartalomblokk bezárása. `item`: A tartalomblokk indexe, DOM eleme vagy CSS szelektora.
`toggle(item)`	Tartalomblokk állapotának váltása. `item`: A tartalomblokk indexe, DOM eleme vagy CSS szelektora.
`openAll()`	Összes tartalomblokk megnyitása. Ez a módszer csak akkor működik, ha az `accordion` értéke `false`.
`closeAll()`	Összes tartalomblokk bezárása.

Esemény

Esemény neve	Leírás	Célpont	Paraméterek
`open.mdui.collapse`	Az esemény akkor váltódik ki, amikor a tartalomblokk megnyitási animációja elindul.	`<div class="mdui-collapse-item"></div>`	`event._detail.inst`: Példány
`opened.mdui.collapse`	Az esemény akkor váltódik ki, amikor a tartalomblokk megnyitási animációja befejeződik.
`close.mdui.collapse`	Az esemény akkor váltódik ki, amikor a tartalomblokk bezárási animációja elindul.
`closed.mdui.collapse`	Az esemény akkor váltódik ki, amikor a tartalomblokk bezárási animációja befejeződik.

További példák

Allista

Példa

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

Folyamatjelző

Headroom