TabsAbas
O componente tabs é usado para agrupar e exibir conjuntos de dados ou conteúdo, permitindo que os usuários alternem rapidamente entre diferentes categorias.
Importe os componentes conforme necessário:
import 'mdui/components/tabs.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
Importe os tipos TypeScript dos componentes conforme necessário:
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';
Exemplo de uso:
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>
Use o atributo variant no componente <mdui-tabs> para definir o estilo das abas.
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>
Fonte
Use o atributo placement no componente <mdui-tabs> para definir a posição das abas.
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="Selecione o valor de 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">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>
Fonte
Use o atributo full-width ao componente <mdui-tabs> para fazer as abas ocuparem toda a largura, distribuindo a largura igualmente entre as abas.
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>
Fonte
Defina o atributo icon no componente <mdui-tab> para adicionar um ícone do Material Icons na aba. Você também pode adicionar um elemento de ícone pelo slot icon.
Use o atributo inline para alinhar o ícone e o texto horizontalmente.
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>
Fonte
No componente <mdui-tab>, você pode adicionar um badge pelo slot badge.
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>
Fonte
Use o slot custom no componente <mdui-tab> para personalizar completamente o conteúdo da aba.
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>
Fonte| Atributo | Propriedade | Reflect | Tipo | Padrão |
|---|
value | value | | string | - |
O valor do item de painel da aba.
|
| Nome |
|---|
| (padrão) |
Conteúdo do item de painel da aba.
|
| Atributo | Propriedade | Reflect | Tipo | Padrão |
|---|
value | value | | string | - |
O valor do item de navegação por abas.
|
icon | icon | | string | - |
Nome do ícone Material Icons. Também pode ser definido via slot="icon".
|
inline | inline | | boolean | false |
Define se o ícone e o texto devem ser alinhados horizontalmente.
|
autofocus | autofocus | | boolean | false |
Define se o elemento deve receber foco automaticamente após o carregamento da página.
|
tabindex | tabIndex | | number | - |
A ordem do elemento ao navegar com a tecla Tab.
|
| Nome | Parâmetros | Retorno |
|---|
click | | void |
Simula um clique do mouse no elemento.
|
focus | options: FocusOptions (Opcional)
| void |
Define o foco no elemento atual.
Você pode passar um objeto como argumento, com as seguintes propriedades:
preventScroll: Por padrão, após o elemento receber o foco, a página é rolada para que ele fique visível. Se você não quiser que a página role, defina esta propriedade como true.
|
blur | | void |
Remove o foco do elemento atual.
|
| Nome |
|---|
focus |
Disparado ao receber foco.
|
blur |
Disparado ao perder o foco.
|
| Nome |
|---|
| (padrão) |
Conteúdo de texto do item de navegação por abas.
|
icon |
Ícone no item de navegação por abas.
|
badge |
Badge.
|
custom |
Personaliza todo o conteúdo dentro do item de navegação por abas.
|
| Nome |
|---|
container |
Contêiner do item de navegação por abas.
|
icon |
Ícone no item de navegação por abas.
|
label |
Texto do item de navegação por abas.
|
| Atributo | Propriedade | Reflect | Tipo | Padrão |
|---|
variant | variant | | 'primary' | 'secondary' | 'primary' |
Forma das abas. Os valores possíveis são:
primary: Adequado para cenários onde as abas estão localizadas abaixo do <mdui-top-app-bar> para alternar entre as páginas principais do aplicativo.secondary: Adequado para cenários onde as abas estão localizadas em uma página para alternar entre um conjunto de conteúdos relacionados.
|
value | value | | string | - |
O valor do <mdui-tab> atualmente ativo.
|
placement | placement | | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' | 'top-start' |
Posição das abas. O padrão é top-start. Os valores possíveis são:
top-start: Acima, alinhado à esquerda.top: Acima, centralizado.top-end: Acima, alinhado à direita.bottom-start: Abaixo, alinhado à esquerda.bottom: Abaixo, centralizado.bottom-end: Abaixo, alinhado à direita.left-start: À esquerda, alinhado ao topo.left: À esquerda, centralizado.left-end: À esquerda, alinhado à base.right-start: À direita, alinhado ao topo.right: À direita, centralizado.right-end: À direita, alinhado à base.
|
full-width | fullWidth | | boolean | false |
Define se deve preencher a largura do elemento pai.
|
| Nome |
|---|
change |
Disparado quando o valor selecionado muda.
|
| Nome |
|---|
| (padrão) |
Elementos <mdui-tab>.
|
panel |
Elementos <mdui-tab-panel>.
|
Capítulo anterior
Switch Switch
Próximo capítulo
TextField Campo de texto
