TabsFül
A fülek komponens tartalmak vagy adatkészletek csoportosítására és megjelenítésére szolgál, megkönnyítve a felhasználók számára a különböző kategóriák közötti gyors váltást.
A komponensek importálása:
import 'mdui/components/tabs.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
A komponensek TypeScript-típusainak importálása:
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élda:
1. fül
2. fül
3. fül
1. panel
2. panel
3. panel
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">1. fül</mdui-tab>
<mdui-tab value="tab-2">2. fül</mdui-tab>
<mdui-tab value="tab-3">3. fül</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">1. panel</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">2. panel</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">3. panel</mdui-tab-panel>
</mdui-tabs>
A <mdui-tabs> komponensen a variant attribútummal beállíthatja a fülek változatát.
1. fül
2. fül
3. fül
1. panel
2. panel
3. panel
1. fül
2. fül
3. fül
1. panel
2. panel
3. panel
<mdui-tabs value="tab-1" variant="primary">
<mdui-tab value="tab-1">1. fül</mdui-tab>
<mdui-tab value="tab-2">2. fül</mdui-tab>
<mdui-tab value="tab-3">3. fül</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">1. panel</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">2. panel</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">3. panel</mdui-tab-panel>
</mdui-tabs>
<mdui-tabs value="tab-1" variant="secondary">
<mdui-tab value="tab-1">1. fül</mdui-tab>
<mdui-tab value="tab-2">2. fül</mdui-tab>
<mdui-tab value="tab-3">3. fül</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">1. panel</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">2. panel</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">3. panel</mdui-tab-panel>
</mdui-tabs>
Forrás
A <mdui-tabs> komponensen a placement attribútummal beállíthatja a fülek pozícióját.
top-start
top
top-end
bottom-start
bottom
bottom-end
left-start
left
left-end
right-start
right
right-end
1. fül
2. fül
3. fül
1. panel
2. panel
3. panel
<mdui-select class="example-change-placement" placeholder="Válassza ki a placement értékét" 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">1. fül</mdui-tab>
<mdui-tab value="tab-2">2. fül</mdui-tab>
<mdui-tab value="tab-3">3. fül</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1" style="height: 260px">1. panel</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2" style="height: 260px">2. panel</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3" style="height: 260px">3. panel</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>
Forrás
A full-width attribútummal a fülek kitöltik a teljes szélességet, és egyenlő helyet kapnak.
1. fül
2. fül
3. fül
1. panel
2. panel
3. panel
<mdui-tabs value="tab-1" full-width>
<mdui-tab value="tab-1">1. fül</mdui-tab>
<mdui-tab value="tab-2">2. fül</mdui-tab>
<mdui-tab value="tab-3">3. fül</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">1. panel</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">2. panel</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">3. panel</mdui-tab-panel>
</mdui-tabs>
Forrás
A <mdui-tab> komponensen az icon attribútummal Material Icons ikont adhat a fülhöz. Az icon sloton keresztül is hozzáadhat ikonelemet.
Az inline attribútummal az ikon és a szöveg vízszintesen rendezhető el.
1. fül
2. fül
3. fül
1. panel
2. panel
3. panel
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1" icon="library_music">1. fül</mdui-tab>
<mdui-tab value="tab-2">
2. fül
<mdui-icon slot="icon" name="movie"></mdui-icon>
</mdui-tab>
<mdui-tab value="tab-3" icon="menu_book" inline>3. fül</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">1. panel</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">2. panel</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">3. panel</mdui-tab-panel>
</mdui-tabs>
Forrás
A <mdui-tab> komponensben a badge slotban adhat hozzá badge-et.
1. fül
99+
2. fül
3. fül
1. panel
2. panel
3. panel
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">
1. fül
<mdui-badge slot="badge">99+</mdui-badge>
</mdui-tab>
<mdui-tab value="tab-2">2. fül</mdui-tab>
<mdui-tab value="tab-3">3. fül</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">1. panel</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">2. panel</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">3. panel</mdui-tab-panel>
</mdui-tabs>
Forrás
A <mdui-tab> komponensben a custom slotban teljesen testreszabhatja a fül tartalmát.
1. fül
Ikon
2. fül
3. fül
1. panel
2. panel
3. panel
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">
1. fül
<mdui-chip slot="custom" icon="search">Ikon</mdui-chip>
</mdui-tab>
<mdui-tab value="tab-2">2. fül</mdui-tab>
<mdui-tab value="tab-3">3. fül</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">1. panel</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">2. panel</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">3. panel</mdui-tab-panel>
</mdui-tabs>
Forrás| Attribútum | Tulajdonság | Reflect | Típus | Alapértelmezett |
|---|
value | value | | string | - |
A fülpanel értéke.
|
| Attribútum | Tulajdonság | Reflect | Típus | Alapértelmezett |
|---|
value | value | | string | - |
A fül értéke.
|
icon | icon | | string | - |
Material Icons ikon neve. Beállítható a slot="icon" segítségével is.
|
inline | inline | | boolean | false |
Az ikon és a szöveg vízszintesen legyen-e elrendezve.
|
autofocus | autofocus | | boolean | false |
Automatikusan fókuszt kapjon-e betöltődés után.
|
tabindex | tabIndex | | number | - |
Az elem sorszáma a Tab billentyűvel történő navigálás során.
|
| Név | Paraméterek | Visszatérési érték |
|---|
click | | void |
Egérkattintás szimulálása az elemen.
|
focus | options: FocusOptions (Opcionális)
| void |
Fókusz állítása az aktuális elemre.
Egy objektum is átadható paraméterként, a következő tulajdonságokkal:
preventScroll: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot true-ra állítja, a görgetés elmarad.
|
blur | | void |
Fókusz eltávolítása az aktuális elemről.
|
| Név |
|---|
focus |
Fókusz elnyerésekor aktiválódik.
|
blur |
Fókusz elvesztésekor aktiválódik.
|
| Attribútum | Tulajdonság | Reflect | Típus | Alapértelmezett |
|---|
variant | variant | | 'primary' | 'secondary' | 'primary' |
A fülek variánsa. Lehetséges értékek:
primary: A <mdui-top-app-bar> alatt található, az alkalmazás főoldalainak váltására szolgáló forgatókönyvekhezsecondary: Az oldalon belül található, kapcsolódó tartalomcsoportok váltására szolgáló forgatókönyvekhez
|
value | value | | string | - |
Az aktuálisan aktív <mdui-tab> értéke.
|
placement | placement | | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' | 'top-start' |
A fülek pozíciója. Alapértelmezés szerint top-start. Lehetséges értékek:
top-start: Fent, balra igazítvatop: Fent, középre igazítvatop-end: Fent, jobbra igazítvabottom-start: Lent, balra igazítvabottom: Lent, középre igazítvabottom-end: Lent, jobbra igazítvaleft-start: Balra, felülre igazítvaleft: Balra, középre igazítvaleft-end: Balra, alulra igazítvaright-start: Jobbra, felülre igazítvaright: Jobbra, középre igazítvaright-end: Jobbra, alulra igazítva
|
full-width | fullWidth | | boolean | false |
Kitölti-e a szülőelem teljes szélességét.
|
| Név |
|---|
change |
A kiválasztott érték változásakor aktiválódik.
|
Előző fejezet
Switch Kapcsoló
Következő fejezet
TextField Szövegmező
