TabsВкладки
Komponent zakładek grupuje i wyświetla treści lub dane, ułatwiając szybkie przełączanie się między różnymi kategoriami.
Zaimportuj komponenty:
import 'mdui/components/tabs.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
Zaimportuj typy TypeScript komponentów:
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';
Przykład użycia:
Zakładka 1
Zakładka 2
Zakładka 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">Zakładka 1</mdui-tab>
<mdui-tab value="tab-2">Zakładka 2</mdui-tab>
<mdui-tab value="tab-3">Zakładka 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>
Użyj atrybutu variant na komponencie <mdui-tabs>, aby ustawić styl zakładek.
Zakładka 1
Zakładka 2
Zakładka 3
Panel 1
Panel 2
Panel 3
Zakładka 1
Zakładka 2
Zakładka 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1" variant="primary">
<mdui-tab value="tab-1">Zakładka 1</mdui-tab>
<mdui-tab value="tab-2">Zakładka 2</mdui-tab>
<mdui-tab value="tab-3">Zakładka 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">Zakładka 1</mdui-tab>
<mdui-tab value="tab-2">Zakładka 2</mdui-tab>
<mdui-tab value="tab-3">Zakładka 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>
Исходный код
Użyj atrybutu placement na komponencie <mdui-tabs>, aby ustawić pozycję zakładek.
top-start
top
top-end
bottom-start
bottom
bottom-end
left-start
left
left-end
right-start
right
right-end
Zakładka 1
Zakładka 2
Zakładka 3
Panel 1
Panel 2
Panel 3
<mdui-select class="example-change-placement" placeholder="Wybierz wartość 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">Zakładka 1</mdui-tab>
<mdui-tab value="tab-2">Zakładka 2</mdui-tab>
<mdui-tab value="tab-3">Zakładka 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>
Исходный код
Dodanie atrybutu full-width do komponentu <mdui-tabs> powoduje, że zakładki zajmują całą dostępną szerokość, a poszczególne zakładki równomiernie dzielą tę szerokość.
Zakładka 1
Zakładka 2
Zakładka 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1" full-width>
<mdui-tab value="tab-1">Zakładka 1</mdui-tab>
<mdui-tab value="tab-2">Zakładka 2</mdui-tab>
<mdui-tab value="tab-3">Zakładka 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>
Исходный код
Ustaw atrybut icon na komponencie <mdui-tab>, aby dodać ikonę Material Icons do zakładki. Możesz również użyć slotu icon do dodania elementu ikony.
Dodanie atrybutu inline powoduje poziome ułożenie ikony i tekstu.
Zakładka 1
Zakładka 2
Zakładka 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1" icon="library_music">Zakładka 1</mdui-tab>
<mdui-tab value="tab-2">
Zakładka 2
<mdui-icon slot="icon" name="movie"></mdui-icon>
</mdui-tab>
<mdui-tab value="tab-3" icon="menu_book" inline>Zakładka 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>
Исходный код
W komponencie <mdui-tab> możesz dodać badge za pomocą slotu badge.
Zakładka 1
99+
Zakładka 2
Zakładka 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">
Zakładka 1
<mdui-badge slot="badge">99+</mdui-badge>
</mdui-tab>
<mdui-tab value="tab-2">Zakładka 2</mdui-tab>
<mdui-tab value="tab-3">Zakładka 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>
Исходный код
Użyj slotu custom w komponencie <mdui-tab>, aby całkowicie dostosować treść zakładki.
Zakładka 1
Ikona
Zakładka 2
Zakładka 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">
Zakładka 1
<mdui-chip slot="custom" icon="search">Ikona</mdui-chip>
</mdui-tab>
<mdui-tab value="tab-2">Zakładka 2</mdui-tab>
<mdui-tab value="tab-3">Zakładka 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>
Исходный код| Атрибут | Свойство | Reflect | Тип | По умолчанию |
|---|
value | value | | string | - |
Wartość elementu panelu zakładki
|
| Атрибут | Свойство | Reflect | Тип | По умолчанию |
|---|
value | value | | string | - |
Wartość elementu zakładki
|
icon | icon | | string | - |
Nazwa ikony Material Icons. Można również ustawić za pomocą slot="icon"
|
inline | inline | | boolean | false |
Określa, czy ikona i tekst mają być ułożone poziomo.
|
autofocus | autofocus | | boolean | false |
Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
|
tabindex | tabIndex | | number | - |
Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
|
| Название | Параметры | Возвращаемое значение |
|---|
click | | void |
Symuluje kliknięcie myszą na elemencie
|
focus | options: FocusOptions (Опционально)
| void |
Przenosi fokus na bieżący element.
Można przekazać obiekt jako parametr, którego właściwości obejmują:
preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
|
blur | | void |
Usuwa fokus z bieżącego elementu
|
| Название |
|---|
focus |
Wywoływane po otrzymaniu fokusu
|
blur |
Wywoływane po utracie fokusu
|
| Атрибут | Свойство | Reflect | Тип | По умолчанию |
|---|
variant | variant | | 'primary' | 'secondary' | 'primary' |
Wariant zakładek. Dozwolone wartości:
primary: Odpowiednie dla scenariuszy, w których zakładki znajdują się pod <mdui-top-app-bar> i służą do przełączania głównych stron aplikacjisecondary: Odpowiednie dla scenariuszy, w których zakładki znajdują się na stronie i służą do przełączania grupy powiązanych treści
|
value | value | | string | - |
Wartość aktualnie aktywnej <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' |
Pozycja zakładek. Domyślnie top-start. Dozwolone wartości:
top-start: Na górze, wyrównany do lewejtop: Na górze, wyśrodkowanytop-end: Na górze, wyrównany do prawejbottom-start: Na dole, wyrównany do lewejbottom: Na dole, wyśrodkowanybottom-end: Na dole, wyrównany do prawejleft-start: Po lewej, wyrównany do góryleft: Po lewej, wyśrodkowanyleft-end: Po lewej, wyrównany do dołuright-start: Po prawej, wyrównany do góryright: Po prawej, wyśrodkowanyright-end: Po prawej, wyrównany do dołu
|
full-width | fullWidth | | boolean | false |
Określa, czy wypełnić całą szerokość elementu nadrzędnego.
|
| Название |
|---|
change |
Wywoływane po zmianie zaznaczonej wartości
|
Предыдущая глава
Switch Переключатель
Следующая глава
TextField Текстовое поле
