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

Összecsukható panel

Használat

Hívás egyéni attribútumokon keresztül (ha a komponens dinamikusan jön létre, az inicializáláshoz meg kell hívni az mdui.mutation() metódust)
JavaScript segítségével történő hívás

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Komponensek – Összecsukható panel

Stílus

Teljes HTML szerkezet

Ez a példa tartalmazza az összes lehetséges HTML elemet.

Példa

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

Minimális HTML szerkezet

A fenti példában szereplő elemek egy része nem kötelező, az alábbi példa csak a szükséges HTML elemeket tartalmazza.

Példa

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

Alapértelmezés szerint nyitott panelelemek

Adja hozzá a .mdui-panel-item-open osztályt a <div class="mdui-panel-item"></div> elemhez, hogy az adott panelelem alapértelmezés szerint nyitott legyen.

Példa

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

Panelek közötti térköz eltávolítása

Adja hozzá a .mdui-panel-gapless osztályt a <div class="mdui-panel"></div> elemhez, hogy eltávolítsa a nyitott panel és a többi panel közötti térközt.

Példa

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

Popout panel

Adja hozzá a .mdui-panel-popout osztályt a <div class="mdui-panel"></div> elemhez, hogy a nyitott panel kiugró hatással bírjon.

Példa

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

Beágyazott panelek

Az összecsukható panelek egymásba ágyazhatók.

Példa

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

      <!-- Első beágyazott összecsukható panel -->
      <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>

            <!-- Második beágyazott összecsukható panel -->
            <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>

Használat

Hívás egyéni attribútumokkal

Ezzel a módszerrel nem kell JavaScript kódot írni. Csak adja hozzá az mdui-panel="options" attribútumot az <div class="mdui-panel"></div> elemhez a bővítmény aktiválásához.

Ha az összetevő dinamikusan jön létre, az inicializáláshoz meg kell hívni az mdui.mutation() metódust.

Példa

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

Az összecsukható panelen belüli elemekhez attribútumok adhatók az események kötéséhez, amelyek JavaScript hívásakor is használhatók.

Attribútum	Leírás
`mdui-panel-item-close`	Az elemre kattintás kiváltja a `close.mdui.panel` eseményt, és bezárja az elemet tartalmazó panelelemet.

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

Összetevő példányosítása:

// A selector a .mdui-panel elem CSS-választója vagy DOM-eleme
// Az options a bővítmény paraméterei, lásd az alábbi paraméterlistát
var inst = new mdui.Panel(selector, options);

Futtatás

Paraméter

Paraméter neve	Típus	Alapértelmezett	Leírás
`accordion`	`boolean`	`false`	Harmonika effektus engedélyezése. Ha `true`, egyszerre legfeljebb egy panelelem lehet nyitva; egy elem kinyitásakor a többi bezárul. Ha `false`, egyszerre több panelelem is nyitva lehet.

Metódus

Metódus neve	Leírás
`open(item)`	Panelelem megnyitása. `item`: A panelelem indexe, DOM-eleme vagy CSS-választója.
`close(item)`	Panelelem bezárása. `item`: A panelelem indexe, DOM-eleme vagy CSS-választója.
`toggle(item)`	Panelelem állapotának váltása. `item`: A panelelem indexe, DOM-eleme vagy CSS-választója.
`openAll()`	Minden panelelem megnyitása. Ez a metódus csak akkor működik, ha az `accordion` értéke `false`.
`closeAll()`	Minden panelelem bezárása.

Esemény

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

CSS osztályok listája

Osztálynév	Leírás
`.mdui-panel`	Összecsukható panel meghatározása.
`.mdui-panel-gapless`	A nyitott panel és a többi panel közötti térköz eltávolítása.
`.mdui-panel-popout`	Kiugró hatás biztosítása a nyitott panelnek.
`.mdui-panel-item`	Összecsukható panel egy elemének meghatározása.
`.mdui-panel-item-open`	A panelelem alapértelmezés szerint nyitottá tétele.
`.mdui-panel-item-header`	A panelelem fejlécének meghatározása.
`.mdui-panel-item-title`	A panelelem fejlécében lévő cím meghatározása.
`.mdui-panel-item-summary`	A panelelem fejlécében lévő összegzés meghatározása.
`.mdui-panel-item-arrow`	A panelelem kibontási/összecsukási ikonjának meghatározása.
`.mdui-panel-item-body`	A panelelem tartalmának meghatározása.
`.mdui-panel-item-actions`	A panelelem műveleti sávjának meghatározása.

Elválasztó

Szövegmező