@mamba/tabs

Tabs

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.

Como utilizar

<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>

TabPane

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

Eventos

<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 })