TabsZáložky
Záložky seskupují obsah nebo datové sady a usnadňují rychlé přepínání mezi kategoriemi.
Importujte komponenty podle potřeby:
import 'mdui/components/tabs.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
Importujte TypeScript typy komponent podle potřeby:
import type { Tabs } from 'mdui/components/tabs.js';
import type { Tab } from 'mdui/components/tab.js';
import type { TabPanel } from 'mdui/components/tab-panel.js';
Příklad použití:
Záložka 1
Záložka 2
Záložka 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">Záložka 1</mdui-tab>
<mdui-tab value="tab-2">Záložka 2</mdui-tab>
<mdui-tab value="tab-3">Záložka 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>
Pomocí atributu variant na komponentě <mdui-tabs> můžete nastavit styl záložek.
Záložka 1
Záložka 2
Záložka 3
Panel 1
Panel 2
Panel 3
Záložka 1
Záložka 2
Záložka 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1" variant="primary">
<mdui-tab value="tab-1">Záložka 1</mdui-tab>
<mdui-tab value="tab-2">Záložka 2</mdui-tab>
<mdui-tab value="tab-3">Záložka 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>
<mdui-tabs value="tab-1" variant="secondary">
<mdui-tab value="tab-1">Záložka 1</mdui-tab>
<mdui-tab value="tab-2">Záložka 2</mdui-tab>
<mdui-tab value="tab-3">Záložka 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>
Zdrojový kód
Pomocí atributu placement na komponentě <mdui-tabs> můžete nastavit umístění záložek.
top-start
top
top-end
bottom-start
bottom
bottom-end
left-start
left
left-end
right-start
right
right-end
Záložka 1
Záložka 2
Záložka 3
Panel 1
Panel 2
Panel 3
<mdui-select class="example-change-placement" placeholder="Vyberte hodnotu placement" style="width: 180px">
<mdui-menu-item value="top-start">top-start</mdui-menu-item>
<mdui-menu-item value="top">top</mdui-menu-item>
<mdui-menu-item value="top-end">top-end</mdui-menu-item>
<mdui-menu-item value="bottom-start">bottom-start</mdui-menu-item>
<mdui-menu-item value="bottom">bottom</mdui-menu-item>
<mdui-menu-item value="bottom-end">bottom-end</mdui-menu-item>
<mdui-menu-item value="left-start">left-start</mdui-menu-item>
<mdui-menu-item value="left">left</mdui-menu-item>
<mdui-menu-item value="left-end">left-end</mdui-menu-item>
<mdui-menu-item value="right-start">right-start</mdui-menu-item>
<mdui-menu-item value="right">right</mdui-menu-item>
<mdui-menu-item value="right-end">right-end</mdui-menu-item>
</mdui-select>
<mdui-tabs value="tab-1" placement="top-start" class="example-placement">
<mdui-tab value="tab-1">Záložka 1</mdui-tab>
<mdui-tab value="tab-2">Záložka 2</mdui-tab>
<mdui-tab value="tab-3">Záložka 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1" style="height: 260px">Panel 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2" style="height: 260px">Panel 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3" style="height: 260px">Panel 3</mdui-tab-panel>
</mdui-tabs>
<script>
const select = document.querySelector(".example-change-placement");
const tabs = document.querySelector(".example-placement");
select.addEventListener("change", (event) => {
tabs.placement = event.target.value;
});
</script>
Zdrojový kód
Přidáním atributu full-width na komponentu <mdui-tabs> zajistíte, že záložky zaberou celou šířku a jednotlivé záložky si rovnoměrně rozdělí šířku.
Záložka 1
Záložka 2
Záložka 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1" full-width>
<mdui-tab value="tab-1">Záložka 1</mdui-tab>
<mdui-tab value="tab-2">Záložka 2</mdui-tab>
<mdui-tab value="tab-3">Záložka 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>
Zdrojový kód
Nastavením atributu icon na komponentě <mdui-tab> můžete přidat ikonu Material Icons na záložku. Lze také přidat prvek ikony pomocí slotu icon.
Přidáním atributu inline můžete ikonu a text uspořádat vodorovně.
Záložka 1
Záložka 2
Záložka 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1" icon="library_music">Záložka 1</mdui-tab>
<mdui-tab value="tab-2">
Záložka 2
<mdui-icon slot="icon" name="movie"></mdui-icon>
</mdui-tab>
<mdui-tab value="tab-3" icon="menu_book" inline>Záložka 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>
Zdrojový kód
V komponentě <mdui-tab> můžete přidat odznak pomocí slotu badge.
Záložka 1
99+
Záložka 2
Záložka 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">
Záložka 1
<mdui-badge slot="badge">99+</mdui-badge>
</mdui-tab>
<mdui-tab value="tab-2">Záložka 2</mdui-tab>
<mdui-tab value="tab-3">Záložka 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>
Zdrojový kód
Použitím slotu custom v komponentě <mdui-tab> můžete zcela přizpůsobit obsah záložky.
Záložka 1
Ikona
Záložka 2
Záložka 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">
Záložka 1
<mdui-chip slot="custom" icon="search">Ikona</mdui-chip>
</mdui-tab>
<mdui-tab value="tab-2">Záložka 2</mdui-tab>
<mdui-tab value="tab-3">Záložka 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>
Zdrojový kód| Atribut | Vlastnost | Reflect | Typ | Výchozí |
|---|
value | value | | string | - |
Hodnota panelu záložky.
|
| Atribut | Vlastnost | Reflect | Typ | Výchozí |
|---|
value | value | | string | - |
Hodnota položky záložky.
|
icon | icon | | string | - |
Název ikony z knihovny Material Icons. Lze také nastavit pomocí slot="icon".
|
inline | inline | | boolean | false |
Určuje, zda se má ikona a text umístit vodorovně vedle sebe.
|
autofocus | autofocus | | boolean | false |
Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
|
tabindex | tabIndex | | number | - |
Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
|
| Název | Parametry | Vrací |
|---|
click | | void |
Simuluje kliknutí myší na prvek.
|
focus | options: FocusOptions (Volitelné)
| void |
Nastaví fokus na aktuální prvek.
Lze předat objekt jako parametr s vlastnostmi:
preventScroll: Ve výchozím nastavení se po získání fokusu stránka posune tak, aby byl prvek viditelný. Pokud nechcete, aby se stránka posouvala, nastavte tuto vlastnost na true.
|
blur | | void |
Odebere fokus z aktuálního prvku.
|
| Název |
|---|
focus |
Spustí se při získání fokusu.
|
blur |
Spustí se při ztrátě fokusu.
|
| Název |
|---|
| (výchozí) |
Textový obsah položky záložky.
|
icon |
Ikona v položce záložky.
|
badge |
Odznak.
|
custom |
Vlastní obsah celé položky záložky.
|
| Název |
|---|
container |
Kontejner položky záložky.
|
icon |
Ikona v položce záložky.
|
label |
Text položky záložky.
|
| Atribut | Vlastnost | Reflect | Typ | Výchozí |
|---|
variant | variant | | 'primary' | 'secondary' | 'primary' |
Varianta záložek. Možné hodnoty:
primary: Vhodné pro umístění pod <mdui-top-app-bar> pro přepínání hlavních stránek aplikace.secondary: Vhodné pro umístění na stránce pro přepínání skupiny souvisejícího obsahu.
|
value | value | | string | - |
Hodnota aktuálně aktivního prvku <mdui-tab>.
|
placement | placement | | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' | 'top-start' |
Umístění záložek. Výchozí je top-start. Možné hodnoty:
top-start: Nahoře vlevo.top: Nahoře uprostřed.top-end: Nahoře vpravo.bottom-start: Dole vlevo.bottom: Dole uprostřed.bottom-end: Dole vpravo.left-start: Vlevo nahoře.left: Vlevo uprostřed.left-end: Vlevo dole.right-start: Vpravo nahoře.right: Vpravo uprostřed.right-end: Vpravo dole.
|
full-width | fullWidth | | boolean | false |
Určuje, zda má komponenta vyplnit celou šířku rodičovského prvku.
|
| Název |
|---|
change |
Spustí se při změně vybrané hodnoty.
|
Předchozí kapitola
Switch Spínač
Další kapitola
TextField Textové pole
