TabsTab
El componente Tabs se usa para organizar contenido relacionado y facilitar el cambio rápido entre diferentes categorías.
Importa los componentes cuando los necesites:
import 'mdui/components/tabs.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
Importa los tipos TypeScript cuando los necesites:
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';
Uso:
Pestaña 1
Pestaña 2
Pestaña 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">Pestaña 1</mdui-tab>
<mdui-tab value="tab-2">Pestaña 2</mdui-tab>
<mdui-tab value="tab-3">Pestaña 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>
El atributo variant en el componente <mdui-tabs> define el estilo de las pestañas.
Pestaña 1
Pestaña 2
Pestaña 3
Panel 1
Panel 2
Panel 3
Pestaña 1
Pestaña 2
Pestaña 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1" variant="primary">
<mdui-tab value="tab-1">Pestaña 1</mdui-tab>
<mdui-tab value="tab-2">Pestaña 2</mdui-tab>
<mdui-tab value="tab-3">Pestaña 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">Pestaña 1</mdui-tab>
<mdui-tab value="tab-2">Pestaña 2</mdui-tab>
<mdui-tab value="tab-3">Pestaña 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>
Fuente
El atributo placement en el componente <mdui-tabs> define la posición de las pestañas.
top-start
top
top-end
bottom-start
bottom
bottom-end
left-start
left
left-end
right-start
right
right-end
Pestaña 1
Pestaña 2
Pestaña 3
Panel 1
Panel 2
Panel 3
<mdui-select class="example-change-placement" placeholder="Elige un valor para 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">Pestaña 1</mdui-tab>
<mdui-tab value="tab-2">Pestaña 2</mdui-tab>
<mdui-tab value="tab-3">Pestaña 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>
Fuente
El atributo full-width al componente <mdui-tabs>, las pestañas ocuparán todo el ancho y cada pestaña distribuirá el ancho equitativamente.
Pestaña 1
Pestaña 2
Pestaña 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1" full-width>
<mdui-tab value="tab-1">Pestaña 1</mdui-tab>
<mdui-tab value="tab-2">Pestaña 2</mdui-tab>
<mdui-tab value="tab-3">Pestaña 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>
Fuente
Si usas el atributo icon en el componente <mdui-tab>, puedes añadir un icono de Material Icons en la pestaña. También puedes añadir un elemento de icono mediante el slot icon.
Con el atributo inline puedes alinear horizontalmente el icono y el texto.
Pestaña 1
Pestaña 2
Pestaña 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1" icon="library_music">Pestaña 1</mdui-tab>
<mdui-tab value="tab-2">
Pestaña 2
<mdui-icon slot="icon" name="movie"></mdui-icon>
</mdui-tab>
<mdui-tab value="tab-3" icon="menu_book" inline>Pestaña 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>
Fuente
En el componente <mdui-tab>, puedes añadir un Badge mediante el slot badge.
Pestaña 1
99+
Pestaña 2
Pestaña 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">
Pestaña 1
<mdui-badge slot="badge">99+</mdui-badge>
</mdui-tab>
<mdui-tab value="tab-2">Pestaña 2</mdui-tab>
<mdui-tab value="tab-3">Pestaña 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>
Fuente
Usando el slot custom en el componente <mdui-tab>, puedes personalizar completamente el contenido de la pestaña.
Pestaña 1
Icono
Pestaña 2
Pestaña 3
Panel 1
Panel 2
Panel 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">
Pestaña 1
<mdui-chip slot="custom" icon="search">Icono</mdui-chip>
</mdui-tab>
<mdui-tab value="tab-2">Pestaña 2</mdui-tab>
<mdui-tab value="tab-3">Pestaña 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>
Fuente| Atributo | Propiedad | Reflect | Tipo | Predeterminado |
|---|
value | value | | string | - |
Valor del elemento de Tab Panel.
|
| Atributo | Propiedad | Reflect | Tipo | Predeterminado |
|---|
value | value | | string | - |
Valor del elemento de Tab.
|
icon | icon | | string | - |
Nombre del icono de Material Icons. También se puede establecer mediante slot="icon".
|
inline | inline | | boolean | false |
Indica si se colocan el icono y el texto horizontalmente.
|
autofocus | autofocus | | boolean | false |
Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
|
tabindex | tabIndex | | number | - |
Orden del elemento al navegar con la tecla Tab.
|
| Nombre | Parámetros | Valor de retorno |
|---|
click | | void |
Simula un clic del ratón en el elemento.
|
focus | options: FocusOptions (Opcional)
| void |
Establece el foco en el elemento actual.
Puede pasarse un objeto como parámetro con las siguientes propiedades:
preventScroll: Por defecto, cuando el elemento recibe el foco, la página se desplaza hasta mostrarlo. Si no quiere que la página se desplace, defina esta propiedad como true.
|
blur | | void |
Quita el foco del elemento actual.
|
| Nombre |
|---|
focus |
Se dispara cuando recibe el foco.
|
blur |
Se dispara cuando pierde el foco.
|
| Atributo | Propiedad | Reflect | Tipo | Predeterminado |
|---|
variant | variant | | 'primary' | 'secondary' | 'primary' |
Variante de las pestañas. Los valores posibles son:
primary: Adecuado para ubicarse debajo de <mdui-top-app-bar>, para cambiar la página principal de la aplicaciónsecondary: Adecuado para ubicarse dentro de una página, para cambiar un conjunto de contenido relacionado
|
value | value | | string | - |
Valor del <mdui-tab> actualmente activo.
|
placement | placement | | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' | 'top-start' |
Posición de las pestañas. Por defecto es top-start. Los valores posibles son:
top-start: Ubicado arriba, alineado a la izquierdatop: Ubicado arriba, centradotop-end: Ubicado arriba, alineado a la derechabottom-start: Ubicado abajo, alineado a la izquierdabottom: Ubicado abajo, centradobottom-end: Ubicado abajo, alineado a la derechaleft-start: Ubicado a la izquierda, alineado arribaleft: Ubicado a la izquierda, centradoleft-end: Ubicado a la izquierda, alineado abajoright-start: Ubicado a la derecha, alineado arribaright: Ubicado a la derecha, centradoright-end: Ubicado a la derecha, alineado abajo
|
full-width | fullWidth | | boolean | false |
Indica si debe ocupar todo el ancho del elemento padre.
|
| Nombre |
|---|
change |
Se dispara cuando cambia el valor seleccionado.
|
| Nombre |
|---|
container |
Contenedor de los elementos <mdui-tab>.
|
indicator |
Indicador de estado activo.
|
Capítulo anterior
Switch Switch
Capítulo siguiente
TextField Campo de texto
