Tabs
Le schede organizzano il contenuto in diverse schermate e viste.
Importa i componenti:
import 'mdui/components/tabs.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
Importa i tipi TypeScript:
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';
Esempio:
Scheda 1
Scheda 2
Scheda 3
Pannello 1
Pannello 2
Pannello 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">Scheda 1</mdui-tab>
<mdui-tab value="tab-2">Scheda 2</mdui-tab>
<mdui-tab value="tab-3">Scheda 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Pannello 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Pannello 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Pannello 3</mdui-tab-panel>
</mdui-tabs>
L'attributo variant sul componente <mdui-tabs> consente di impostare lo stile delle schede.
Scheda 1
Scheda 2
Scheda 3
Pannello 1
Pannello 2
Pannello 3
Scheda 1
Scheda 2
Scheda 3
Pannello 1
Pannello 2
Pannello 3
<mdui-tabs value="tab-1" variant="primary">
<mdui-tab value="tab-1">Scheda 1</mdui-tab>
<mdui-tab value="tab-2">Scheda 2</mdui-tab>
<mdui-tab value="tab-3">Scheda 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Pannello 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Pannello 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Pannello 3</mdui-tab-panel>
</mdui-tabs>
<mdui-tabs value="tab-1" variant="secondary">
<mdui-tab value="tab-1">Scheda 1</mdui-tab>
<mdui-tab value="tab-2">Scheda 2</mdui-tab>
<mdui-tab value="tab-3">Scheda 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Pannello 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Pannello 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Pannello 3</mdui-tab-panel>
</mdui-tabs>
Sorgente
Usa l'attributo placement sul componente <mdui-tabs> per impostare la posizione delle schede.
top-start
top
top-end
bottom-start
bottom
bottom-end
left-start
left
left-end
right-start
right
right-end
Scheda 1
Scheda 2
Scheda 3
Pannello 1
Pannello 2
Pannello 3
<mdui-select class="example-change-placement" placeholder="Seleziona valore di posizionamento" 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">Scheda 1</mdui-tab>
<mdui-tab value="tab-2">Scheda 2</mdui-tab>
<mdui-tab value="tab-3">Scheda 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1" style="height: 260px">Pannello 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2" style="height: 260px">Pannello 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3" style="height: 260px">Pannello 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>
Sorgente
Per far sì che le schede occupino l'intera larghezza e siano distribuite uniformemente, aggiungi l'attributo full-width al componente <mdui-tabs>.
Scheda 1
Scheda 2
Scheda 3
Pannello 1
Pannello 2
Pannello 3
<mdui-tabs value="tab-1" full-width>
<mdui-tab value="tab-1">Scheda 1</mdui-tab>
<mdui-tab value="tab-2">Scheda 2</mdui-tab>
<mdui-tab value="tab-3">Scheda 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Pannello 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Pannello 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Pannello 3</mdui-tab-panel>
</mdui-tabs>
Sorgente
Aggiungi Icone Material alle schede impostando l'attributo icon sul componente <mdui-tab>. Oppure, usa lo slot icon per aggiungere elementi icona.
Disponi l'icona e il testo orizzontalmente aggiungendo l'attributo inline.
Scheda 1
Scheda 2
Scheda 3
Pannello 1
Pannello 2
Pannello 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1" icon="library_music">Scheda 1</mdui-tab>
<mdui-tab value="tab-2">
Scheda 2
<mdui-icon slot="icon" name="movie"></mdui-icon>
</mdui-tab>
<mdui-tab value="tab-3" icon="menu_book" inline>Scheda 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Pannello 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Pannello 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Pannello 3</mdui-tab-panel>
</mdui-tabs>
Sorgente
Aggiungi un badge al componente <mdui-tab> utilizzando lo slot badge.
Scheda 1
99+
Scheda 2
Scheda 3
Pannello 1
Pannello 2
Pannello 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">
Scheda 1
<mdui-badge slot="badge">99+</mdui-badge>
</mdui-tab>
<mdui-tab value="tab-2">Scheda 2</mdui-tab>
<mdui-tab value="tab-3">Scheda 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Pannello 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Pannello 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Pannello 3</mdui-tab-panel>
</mdui-tabs>
Sorgente
Usa lo slot custom nel componente <mdui-tab> per personalizzare completamente il contenuto delle schede.
Scheda 1
Icona
Scheda 2
Scheda 3
Pannello 1
Pannello 2
Pannello 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">
Scheda 1
<mdui-chip slot="custom" icon="search">Icona</mdui-chip>
</mdui-tab>
<mdui-tab value="tab-2">Scheda 2</mdui-tab>
<mdui-tab value="tab-3">Scheda 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Pannello 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Pannello 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Pannello 3</mdui-tab-panel>
</mdui-tabs>
Sorgente| Attributo HTML | Proprietà JavaScript | Reflect | Tipo | Predefinito |
|---|
value | value | | string | - |
Valore dell'elemento del pannello a schede
|
| Attributo HTML | Proprietà JavaScript | Reflect | Tipo | Predefinito |
|---|
value | value | | string | - |
Valore dell'elemento di navigazione a schede
|
icon | icon | | string | - |
Nome dell'icona Material. Può anche essere impostato tramite slot="icon".
|
inline | inline | | boolean | false |
Se disporre orizzontalmente icona e testo
|
autofocus | autofocus | | boolean | false |
Se deve ricevere automaticamente il focus al caricamento della pagina
|
tabindex | tabIndex | | number | - |
Ordine di tabulazione dell'elemento
|
| Nome | Parametri | Restituisce |
|---|
click | | void |
Simula un clic del mouse sull'elemento
|
focus | options: FocusOptions (Opzionale)
| void |
Imposta il focus sull'elemento corrente.
È possibile passare un oggetto come parametro, le cui proprietà includono:
preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
|
blur | | void |
Rimuove il focus dall'elemento corrente
|
| Nome |
|---|
focus |
Attivato quando si riceve il focus
|
blur |
Attivato quando si perde il focus
|
| Nome |
|---|
| (predefinito) |
Contenuto testuale dell'elemento di navigazione a schede
|
icon |
Icona nell'elemento di navigazione a schede
|
badge |
Badge
|
custom |
Personalizza l'intero contenuto dell'elemento di navigazione a schede
|
| Nome |
|---|
container |
Contenitore dell'elemento di navigazione a schede
|
icon |
Icona nell'elemento di navigazione a schede
|
label |
Testo dell'elemento di navigazione a schede
|
| Attributo HTML | Proprietà JavaScript | Reflect | Tipo | Predefinito |
|---|
variant | variant | | 'primary' | 'secondary' | 'primary' |
Forma delle schede. I valori opzionali includono:
primary: adatto per scenari in cui si trova sotto <mdui-top-app-bar> e serve a cambiare la pagina principale dell'applicazionesecondary: adatto per scenari in cui si trova all'interno di una pagina e serve a cambiare un gruppo di contenuti correlati
|
value | value | | string | - |
Valore del <mdui-tab> attualmente attivo
|
placement | placement | | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' | 'top-start' |
Posizione delle schede. Il valore predefinito è top-start. I valori opzionali includono:
top-start: in alto a sinistratop: in alto al centrotop-end: in alto a destrabottom-start: in basso a sinistrabottom: in basso al centrobottom-end: in basso a destraleft-start: a sinistra in altoleft: a sinistra al centroleft-end: a sinistra in bassoright-start: a destra in altoright: a destra al centroright-end: a destra in basso
|
full-width | fullWidth | | boolean | false |
Se riempire l'intera larghezza dell'elemento padre
|
| Nome |
|---|
change |
Attivato quando il valore selezionato cambia
|
Capitolo precedente
Switch
Capitolo successivo
TextField
