@mamba/tabs NPM | npm.io

12.1.0 • Published 1 year ago

Install

Weekly downloads

102

License

Apache-2.0

Repository

Last release

1 year ago

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

@infinitebrahmanuniverse/nolb-_mam @everything-registry/sub-chunk-576 @zalastax/nolb-_mam

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago