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

Collapse

Spodní navigační lišta je připevněna na spodní část stránky a může obsahovat 3 až 5 možností. Obvykle se používá pouze na mobilních zařízeních. Každá stránka může mít pouze jednu spodní navigační lištu.

Stačí napsat HTML kód, aby to fungovalo.

Způsob volání

  1. Designové zásady Material Design: Komponenty - Spodní navigační lišta
  2. Volání přes JavaScript

Struktura HTML

Zobrazit pouze text

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

Zobrazit text pouze v aktivním stavu

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

Barva pozadí

<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

Připevněno na spodní část stránky

Automaticky skrýt

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

      <!-- Níže uvedený příklad zobrazuje ikony i text zároveň; obvykle se používá, pokud jsou k dispozici pouze 3 navigační položky. -->
      <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>

Navigační položka obsahující třídu <code>.mdui-bottom-nav-active</code> bude ve výchozím aktivním stavu.

AtributPopis
mdui-collapse-item-closePřidáním třídy .mdui-bottom-nav-text-auto na prvek <div class="mdui-bottom-nav"></div> můžete dosáhnout tohoto efektu.

Volání přes JavaScript

Tato metoda se obvykle používá, když máte 4 až 5 navigačních položek. Ve výchozím nastavení se zobrazují pouze ikony; po aktivaci navigační položky se zobrazí i text.

// Přidáním třídy <code>.mdui-color-[<span mdui-tooltip="{content: 'název barvy'}">color</span>]</code> na prvek <code>&lt;div class=&quot;mdui-bottom-nav&quot;&gt;&lt;/div&gt;</code> můžete nastavit barvu pozadí pro spodní navigační lištu.
// Přidáním třídy <code>.mdui-bottom-nav-fixed</code> na prvek <code>body</code> můžete spodní navigační lištu připevnit na spodní část stránky, aby se nepohybovala se scrollbarem.
var inst = new mdui.Collapse(selector, options);
demo

Parametr

Název parametruTypVýchozí hodnotaPopis
accordionbooleanfalseTuto třídu musíte přidat na prvek <code>body</code>, ne na prvek <code>.mdui-bottom-nav</code>, protože kromě přichycení spodní navigační lišty navíc přidá k <code>body</code> <code>padding-bottom</code>, aby spodní navigační lišta nepřekrývala obsah stránky.
  • Přidáním třídy .mdui-bottom-nav-scroll-hide můžete skrýt spodní navigační lištu při posouvání stránky dolů a zobrazit ji při posouvání nahoru.
  • Poznámka:

Metoda

Název metodyPopis
open(item)Pokud spodní navigační lišta není připevněna na spodní část stránky, tato funkce nebude fungovat.
  • Pokud je prvek dynamicky generován, musíte jej inicializovat voláním mdui.mutation().
close(item)Událost bude spuštěna při přepnutí navigační položky.
  • event._detail.index: Index aktivované navigační položky.
toggle(item)Definuje komponentu spodní navigační lišty.
  • Aktivuje navigační položku.
openAll()Zobrazí text na navigační liště pouze v aktivním stavu.
closeAll()Připevní navigační lištu na spodní část stránky (musí se přidat k prvku <code>body</code>).

Událost

Název událostiPopisCílParametry
open.mdui.collapseSkryje spodní navigační lištu při posouvání stránky dolů a zobrazí ji při posouvání nahoru.<div class="mdui-collapse-item"></div>event._detail.inst: Instance
opened.mdui.collapseUdálost bude spuštěna, když blok obsahu ukončí animaci otevírání.
close.mdui.collapseUdálost bude spuštěna, když blok obsahu začne animaci zavírání.
closed.mdui.collapseUdálost bude spuštěna, když blok obsahu ukončí animaci zavírání.

Základní styl

Zobrazit pouze ikony

code
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>
arrow_backPrevious
Indikátor průběhu
arrow_forwardNext
Headroom