O módulo Tabs
é responsável por exibir uma lista de abas, possibilitando a troca de conteúdo de acordo com a sua seleção.
Usar o modo de funcionamento route
do parâmetro changeOn
, faz com que a troca das abas seja feita pela rota da aplicação. Isso é útil para lembrar a posição do índice da aba para rotas internas, e voltar na história do navegador, ou para quando você quiser entrar um uma página exibindo um índice específico.
<Tabs>
<TabPane label="Tab 1">Your content</TabPane>
<TabPane label="Tab 2">Another content</TabPane>
</Tabs>
<script>
export default {
components: {
Tabs: '@mamba/tabs/Tabs.html',
TabPane: '@mamba/tabs/TabPane.html',
},
};
</script>
O TabPane
é um wrapper sem funcionalidades, gerenciado pelo seu componente pai Tabs
. Os items da Tabs
são renderizados na ordem em que os TabPane
são declarados.
O atributo label
será usado como label no item da aba.
Omitir o attributo label
, resulta a aba e seu contúdo correspondente não ser exibido.
Para que o parâmetro route
funcionar corretamente, é necessário que o caminho da aba seja completo e absoluto, incluindo a rota do pai.
<Tabs ...props />
Propriedades | Descrição | Tipo | Padrão |
---|---|---|---|
changeOn | Define qual o modo de funcionamento das abas: por state ou route
|
string |
state |
<TabPane ...props />
Propriedades | Descrição | Tipo | Padrão |
---|---|---|---|
label | Título a ser utilizado para criar o item na navegação de abas | string |
undefined |
route | Rota da aba para ser usada com modo de troca por route do modo changeOn
|
string |
undefined |
<Tabs ... on:event="..."/>
Eventos | Disparado quando ... | Tipo |
---|---|---|
change | Especifique uma função que será chamada quando trocar de aba. Recebe índice atual e antigo. | function({ currentIndex, lastIndex }) |