TabsZakładka

Komponent zakładek grupuje i wyświetla treści lub dane, ułatwiając szybkie przełączanie się między różnymi kategoriami.

Sposób użycia

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>

Przykłady

Styl zakładek

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>

Źródło

Pozycja zakładek

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>

Źródło

Pełna szerokość

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>

Źródło

Ikona

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>

Źródło

Badge

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>

Źródło

Niestandardowa treść

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>

Źródło

`mdui-tab-panel` API

Właściwości

Atrybut HTML	Właściwość JavaScript	Reflect	Typ	Domyślne
`value`	`value`		`string`	-
Wartość elementu panelu zakładki

Slots

Nazwa
(domyślny)
Treść panelu zakładki

`mdui-tab` API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`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).

Metody

Nazwa	Parametry	Zwraca
`click`		`void`
Symuluje kliknięcie myszą na elemencie
`focus`	`options: FocusOptions` (Opcjonalny)	`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

Zdarzenia

Nazwa
`focus`
Wywoływane po otrzymaniu fokusu
`blur`
Wywoływane po utracie fokusu

Slots

Nazwa
(domyślny)
Treść zakładki
`icon`
Ikona w zakładce
`badge`
Badge
`custom`
Niestandardowa treść dla całego elementu zakładki

CSS Parts

Nazwa
`container`
Kontener elementu zakładki
`icon`
Ikona w zakładce
`label`
Tekst zakładki

`mdui-tabs` API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`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 aplikacji `secondary`: 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 lewej `top`: Na górze, wyśrodkowany `top-end`: Na górze, wyrównany do prawej `bottom-start`: Na dole, wyrównany do lewej `bottom`: Na dole, wyśrodkowany `bottom-end`: Na dole, wyrównany do prawej `left-start`: Po lewej, wyrównany do góry `left`: Po lewej, wyśrodkowany `left-end`: Po lewej, wyrównany do dołu `right-start`: Po prawej, wyrównany do góry `right`: Po prawej, wyśrodkowany `right-end`: Po prawej, wyrównany do dołu
`full-width`	`fullWidth`	`boolean`	`false`
Określa, czy wypełnić całą szerokość elementu nadrzędnego.

Zdarzenia

Nazwa
`change`
Wywoływane po zmianie zaznaczonej wartości

Slots

Nazwa
(domyślny)
Elementy `<mdui-tab>`
`panel`
Elementy `<mdui-tab-panel>`

CSS Parts

Nazwa
`container`
Kontener elementów `<mdui-tab>`
`indicator`
Wskaźnik stanu aktywnego

Poprzedni rozdział

Switch Przełącznik

Następny rozdział

TextField Pole tekstowe