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

Sbalovací panel

Způsob volání

Volání pomocí vlastního atributu (pokud je komponenta dynamicky generována, je třeba volat mdui.mutation() pro inicializaci)
Volání přes JavaScript

Související čtení

Designové zásady Material Design: Komponenty – Sbalovací panel

Styl

Úplná HTML struktura

Tento příklad obsahuje všechny HTML prvky, které lze zahrnout.

Příklad

<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ální HTML struktura

Některé prvky v předchozím příkladu nejsou povinné. Následující příklad obsahuje pouze povinné HTML prvky.

Příklad

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

Výchozí otevřená položka panelu

Přidáním třídy .mdui-panel-item-open k prvku <div class="mdui-panel-item"></div> se položka panelu ve výchozím nastavení otevře.

Příklad

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

Odstranit mezeru panelu

Přidáním třídy .mdui-panel-gapless k prvku <div class="mdui-panel"></div> odstraníte mezeru mezi otevřeným panelem a ostatními panely.

Příklad

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

Vysunutý panel

Přidáním třídy .mdui-panel-popout k prvku <div class="mdui-panel"></div> získá otevřený panel efekt vysunutí.

Příklad

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

Vnořování panelů

Sbalovací panely se mohou vzájemně vnořovat.

Příklad

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

      <!-- První vnořený sbalovací 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>

            <!-- Druhý vnořený sbalovací 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>

Způsob volání

Volání přes atributy

Tímto způsobem není potřeba psát kód v JavaScriptu. Stačí přidat atribut mdui-panel="options" k prvku <div class="mdui-panel"></div> pro aktivaci pluginu.

Pokud je komponenta dynamicky generována, je třeba volat mdui.mutation() pro inicializaci.

Příklad

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

Na prvky uvnitř sbalovacího panelu můžete přidat některé atributy k vázání událostí. Tyto atributy lze také použít při volání přes JavaScript.

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

Volání přes JavaScript

Inicializace komponenty:

// selector je CSS selektor nebo DOM prvek elementu .mdui-panel
// options jsou parametry pluginu, viz seznam parametrů níže
var inst = new mdui.Panel(selector, options);

Spustit

Parametr

Název parametru	Typ	Výchozí hodnota	Popis
`accordion`	`boolean`	`false`	Zda je povolen efekt akordeonu. Pokud je hodnota `true`, může být otevřena pouze jedna položka panelu najednou; otevření jedné položky panelu zavře ostatní položky panelu. Pokud je hodnota `false`, lze otevřít více položek panelu současně.

Metoda

Název metody	Popis
`open(item)`	Otevře položku panelu. `item`: Index položky panelu, DOM prvek nebo CSS selektor.
`close(item)`	Zavře položku panelu. `item`: Index položky panelu, DOM prvek nebo CSS selektor.
`toggle(item)`	Přepne stav položky panelu. `item`: Index položky panelu, DOM prvek nebo CSS selektor.
`openAll()`	Otevře všechny položky panelu. Tato metoda je účinná pouze v případě, že je `accordion` nastaven na `false`.
`closeAll()`	Zavře všechny položky panelu.

Událost

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

Seznam CSS tříd

Název třídy	Popis
`.mdui-panel`	Definuje sbalovací panel.
`.mdui-panel-gapless`	Odstraní mezeru mezi otevřeným panelem a ostatními panely.
`.mdui-panel-popout`	Způsobí, že otevřený panel bude mít efekt vysunutí.
`.mdui-panel-item`	Definuje položku sbalovacího panelu.
`.mdui-panel-item-open`	Způsobí, že položka panelu bude ve výchozím nastavení otevřená.
`.mdui-panel-item-header`	Definuje záhlaví položky panelu.
`.mdui-panel-item-title`	Definuje nadpis záhlaví položky panelu.
`.mdui-panel-item-summary`	Definuje souhrn v záhlaví položky panelu.
`.mdui-panel-item-arrow`	Definuje ikonu pro rozbalení a sbalení položky panelu.
`.mdui-panel-item-body`	Definuje obsah položky panelu.
`.mdui-panel-item-actions`	Definuje panel akcí položky panelu.

Oddělovač

Textové pole