Tabs
Die Tabs-Komponente gruppiert und zeigt Inhalte oder Datensätze an, damit Benutzer einfach zwischen Kategorien wechseln können.
Importieren Sie die Komponenten nach Bedarf:
import 'mdui/components/tabs.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf:
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';
Beispiel:
Tab 1
Tab 2
Tab 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">Tab 1</mdui-tab>
<mdui-tab value="tab-2">Tab 2</mdui-tab>
<mdui-tab value="tab-3">Tab 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>
Verwenden Sie das Attribut variant auf der <mdui-tabs>-Komponente, um den Stil der Tabs festzulegen.
Tab 1
Tab 2
Tab 3
Panel 1
Panel 2
Panel 3
Tab 1
Tab 2
Tab 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1" variant="primary">
<mdui-tab value="tab-1">Tab 1</mdui-tab>
<mdui-tab value="tab-2">Tab 2</mdui-tab>
<mdui-tab value="tab-3">Tab 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">Tab 1</mdui-tab>
<mdui-tab value="tab-2">Tab 2</mdui-tab>
<mdui-tab value="tab-3">Tab 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>
Quellcode
Mit dem Attribut placement auf der <mdui-tabs>-Komponente legen Sie die Position der Tabs fest.
top-start
top
top-end
bottom-start
bottom
bottom-end
left-start
left
left-end
right-start
right
right-end
Tab 1
Tab 2
Tab 3
Panel 1
Panel 2
Panel 3
<mdui-select class="example-change-placement" placeholder="placement Wert auswählen" 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">Tab 1</mdui-tab>
<mdui-tab value="tab-2">Tab 2</mdui-tab>
<mdui-tab value="tab-3">Tab 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>
Quellcode
Fügen Sie das Attribut full-width zur <mdui-tabs>-Komponente hinzu, damit die Tabs die volle Breite einnehmen. Die einzelnen Tabs verteilen sich dann gleichmäßig auf die Breite.
Tab 1
Tab 2
Tab 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1" full-width>
<mdui-tab value="tab-1">Tab 1</mdui-tab>
<mdui-tab value="tab-2">Tab 2</mdui-tab>
<mdui-tab value="tab-3">Tab 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>
Quellcode
Setzen Sie das Attribut icon auf der <mdui-tab>-Komponente, um ein Material Icons-Symbol auf dem Tab hinzuzufügen. Sie können das Symbolelement auch über den Slot icon hinzufügen.
Fügen Sie das Attribut inline hinzu, um Symbol und Text horizontal anzuordnen.
Tab 1
Tab 2
Tab 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1" icon="library_music">Tab 1</mdui-tab>
<mdui-tab value="tab-2">
Tab 2
<mdui-icon slot="icon" name="movie"></mdui-icon>
</mdui-tab>
<mdui-tab value="tab-3" icon="menu_book" inline>Tab 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>
Quellcode
In der <mdui-tab>-Komponente können Sie über den Slot badge ein Badge hinzufügen.
Tab 1
99+
Tab 2
Tab 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">
Tab 1
<mdui-badge slot="badge">99+</mdui-badge>
</mdui-tab>
<mdui-tab value="tab-2">Tab 2</mdui-tab>
<mdui-tab value="tab-3">Tab 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>
Quellcode
Verwenden Sie den Slot custom in der <mdui-tab>-Komponente, um den Inhalt des Tabs vollständig anzupassen.
Tab 1
Icon
Tab 2
Tab 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">
Tab 1
<mdui-chip slot="custom" icon="search">Icon</mdui-chip>
</mdui-tab>
<mdui-tab value="tab-2">Tab 2</mdui-tab>
<mdui-tab value="tab-3">Tab 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>
Quellcode| Attribut | Property | Reflect | Typ | Standard |
|---|
value | value | | string | - |
Gibt den Wert des Tab Panels an.
|
| Attribut | Property | Reflect | Typ | Standard |
|---|
value | value | | string | - |
Gibt den Tab-Wert an.
|
icon | icon | | string | - |
Gibt den Namen des Material Icons an. Alternativ können Sie slot="icon" verwenden.
|
inline | inline | | boolean | false |
Ordnet Icon und Text horizontal an.
|
autofocus | autofocus | | boolean | false |
Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
|
tabindex | tabIndex | | number | - |
Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
|
| Name | Parameter | Rückgabewert |
|---|
click | | void |
Simuliert einen Mausklick auf das Element.
|
focus | options: FocusOptions (Optional)
| void |
Setzt den Fokus auf das Element. Der optionale Objektparameter kann eine preventScroll-Eigenschaft enthalten. Wenn preventScroll auf true gesetzt ist, scrollt die Seite nicht, um das fokussierte Element in den sichtbaren Bereich zu bringen.
|
blur | | void |
Entfernt den Fokus vom Element.
|
| Name |
|---|
focus |
Wird ausgelöst, wenn der Tab den Fokus erhält.
|
blur |
Wird ausgelöst, wenn der Tab den Fokus verliert.
|
| Attribut | Property | Reflect | Typ | Standard |
|---|
variant | variant | | 'primary' | 'secondary' | 'primary' |
Definiert die Tab-Variante. Mögliche Werte:
primary: Befindet sich unterhalb von <mdui-top-app-bar> und wird verwendet, um zwischen Anwendungsseiten zu wechseln.secondary: Befindet sich innerhalb der Seite und wird verwendet, um zwischen verwandten Inhaltsgruppen zu wechseln.
|
value | value | | string | - |
Gibt den Wert des aktiven <mdui-tab> an.
|
placement | placement | | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' | 'top-start' |
Definiert die Tab-Position. Standard ist top-start. Mögliche Werte:
top-start: Oben links.top: Oben zentriert.top-end: Oben rechts.bottom-start: Unten links.bottom: Unten, zentriert.bottom-end: Unten rechts.left-start: Links oben.left: Links, zentriert.left-end: Links unten.right-start: Rechts oben.right: Rechts, zentriert.right-end: Rechts unten.
|
full-width | fullWidth | | boolean | false |
Wenn gesetzt, füllen die Tabs die Breite ihres übergeordneten Elements aus.
|
| Name |
|---|
change |
Wird ausgelöst, wenn sich der ausgewählte Wert ändert.
|
| Name |
|---|
container |
Container für <mdui-tab>-Elemente.
|
indicator |
Indikator für den aktiven Zustand.
|
