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

Záložka

Způsob volání

Aktivace prostřednictvím vlastních atributů (pokud je komponenta dynamicky generovaná, musíte pro inicializaci zavolat mdui.mutation())
Volání přes JavaScript

Související čtení

Designové zásady Material Design: Komponenty - Záložky (Tabs)

Styl

Základní styl

Níže je standardní sada záložek. Na mobilních zařízeních bude zabírat 100 % šířky, přičemž každá záložka bude mít stejnou šířku; na tabletech/PC se zarovnává vlevo.

Příklad


        <div class="mdui-tab" mdui-tab>
          <a href="#example1-tab1" class="mdui-ripple">web</a>
          <a href="#example1-tab2" class="mdui-ripple">shopping</a>
          <a href="#example1-tab3" class="mdui-ripple">images</a>
        </div>
        <div id="example1-tab1" class="mdui-p-a-2">web content</div>
        <div id="example1-tab2" class="mdui-p-a-2">shopping content</div>
        <div id="example1-tab3" class="mdui-p-a-2">images content</div>

Posuvné

Přidáním třídy .mdui-tab-scrollable k prvku <div class="mdui-tab"> umožníte vodorovné posouvání záložek, což se často využívá na mobilních zařízeních s mnoha volbami.

Příklad


        <div class="mdui-tab mdui-tab-scrollable" mdui-tab>
          <a href="#example2-tab1" class="mdui-ripple">web</a>
          <a href="#example2-tab2" class="mdui-ripple">shopping</a>
          <a href="#example2-tab3" class="mdui-ripple">videos</a>
          <a href="#example2-tab4" class="mdui-ripple">images</a>
          <a href="#example2-tab5" class="mdui-ripple">news</a>
          <a href="#example2-tab6" class="mdui-ripple">maps</a>
          <a href="#example2-tab7" class="mdui-ripple">books</a>
          <a href="#example2-tab8" class="mdui-ripple">flights</a>
          <a href="#example2-tab9" class="mdui-ripple">apps</a>
          <a href="#example2-tab10" class="mdui-ripple">dictionary</a>
        </div>

Zacentrované

Přidáním třídy .mdui-tab-centered k prvku <div class="mdui-tab"></div> zacentrujete záložky na tabletech/PC.

Příklad


        <div class="mdui-tab mdui-tab-centered" mdui-tab>
          <a href="#example3-tab1" class="mdui-ripple">web</a>
          <a href="#example3-tab2" class="mdui-ripple">shopping</a>
          <a href="#example3-tab3" class="mdui-ripple">videos</a>
        </div>

100 % šířka

Přidáním třídy .mdui-tab-full-width k prvku <div class="mdui-tab"></div> zajistíte, že záložky budou vždy zabírat 100 % šířky a každá z nich bude mít stejnou šířku.

Příklad


        <div class="mdui-tab mdui-tab-full-width" mdui-tab>
          <a href="#example4-tab1" class="mdui-ripple">web</a>
          <a href="#example4-tab2" class="mdui-ripple">shopping</a>
          <a href="#example4-tab3" class="mdui-ripple">videos</a>
        </div>

S ikonou

Příklad


        <div class="mdui-tab" mdui-tab>
          <a href="#example5-tab1" class="mdui-ripple">
            <i class="mdui-icon material-icons">phone</i>
          </a>
          <a href="#example5-tab2" class="mdui-ripple">
            <i class="mdui-icon material-icons">favorite</i>
          </a>
          <a href="#example5-tab3" class="mdui-ripple">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
          </a>
        </div>

S ikonou a textem

Příklad


        <div class="mdui-tab" mdui-tab>
          <a href="#example6-tab1" class="mdui-ripple">
            <i class="mdui-icon material-icons">phone</i>
            <label>recents</label>
          </a>
          <a href="#example6-tab2" class="mdui-ripple">
            <i class="mdui-icon material-icons">favorite</i>
            <label>favorites</label>
          </a>
          <a href="#example6-tab3" class="mdui-ripple">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
            <label>nearby</label>
          </a>
        </div>

S barvou pozadí

Přidáním třídy .mdui-color-[barva] k prvku <div class="mdui-tab"></div> přiřadíte záložkám barvu pozadí.

Příklad


        <div class="mdui-tab mdui-color-theme" mdui-tab>
          <a href="#example7-tab1" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">phone</i>
            <label>recents</label>
          </a>
          <a href="#example7-tab2" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">favorite</i>
            <label>favorites</label>
          </a>
          <a href="#example7-tab3" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
            <label>nearby</label>
          </a>
        </div>

Výchozí aktivní volba

Přidáním třídy .mdui-tab-active k prvku <a> nastavíte danou volbu jako výchozí aktivní.

Příklad


        <div class="mdui-tab" mdui-tab>
          <a href="#example8-tab1" class="mdui-ripple">web</a>
          <a href="#example8-tab2" class="mdui-tab-active mdui-ripple"
            >shopping</a
          >
          <a href="#example8-tab3" class="mdui-ripple">images</a>
        </div>

Zakázaná volba

Přidáním atributu disabled k prvku <a> tuto volbu zakážete.

Příklad


        <div class="mdui-tab" mdui-tab>
          <a href="#example9-tab1" class="mdui-ripple">web</a>
          <a href="#example9-tab2" class="mdui-ripple" disabled>shopping</a>
          <a href="#example9-tab3" class="mdui-ripple">images</a>
        </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-tab="options" k prvku <div class="mdui-tab"></div> pro aktivaci komponenty.

Pokud je komponenta dynamicky generovaná, musíte pro inicializaci zavolat mdui.mutation().

<div class="mdui-tab" mdui-tab>
...
</div>

Volání přes JavaScript

Inicializace komponenty:

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

Spustit

Parametr

Název parametru	Typ	Výchozí hodnota	Popis
`trigger`	`string`	`click`	Způsob přepínání záložek. `click`: Přepnutí kliknutím `hover`: Přepnutí přejetím myší
`loop`	`boolean`	`false`	Zda je povoleno cyklické přepínání. Pokud je `true`, zavolání metody next na poslední volbě se vrátí na první volbu; zavolání metody prev na první volbě se vrátí na poslední volbu.

Metoda

Název metody	Popis
`prev()`	Přepne na předchozí volbu.
`next()`	Přepne na další volbu.
`show(index)`	Zobrazí zadanou volbu. `index`: indexové číslo nebo ID volby
`handleUpdate()`	Při změně šířky nadřazeného prvku je nutné zavolat tuto metodu pro přepočítání polohy indikátoru. Při dynamickém přidání nových voleb do záložek je také nutné zavolat tuto metodu, aby se nové volby aktivovaly.

Událost

Název události	Popis	Cíl	Parametry
`change.mdui.tab`	Událost bude spuštěna při přepínání voleb.	`<div class="mdui-tab"></div>`	`event._detail.inst`: instance `event._detail.index`: indexové číslo aktivní volby `event._detail.id`: ID obsahu aktivní záložky
`show.mdui.tab`	Událost bude spuštěna po přepnutí na zadanou volbu.	`<a></a>`	`event._detail.inst`: instance

Seznam CSS tříd

Název třídy	Popis
`.mdui-tab`	Definuje komponentu záložek.
`.mdui-tab-scrollable`	Posuvná komponenta záložek.
`.mdui-tab-centered`	Zacentrovaná komponenta záložek.
`.mdui-tab-full-width`	Komponenta záložek s šířkou 100 %.
`.mdui-tab-active`	Aktivní volba.

Mřížkový seznam

Nástrojová lišta