InnerTabs

InnerTabs são componentes utilizados para criar soluções de navegação interas às Tabs

---

Quando usar:

• Dentro de tabs, houver necessidade de mais um nível na estrutura de navegação;
• Em casos que for muito importante mostrar todo o título das abas;
• For necessário separar o conteúdo por abas e navergar por elas;
• Não for o caso de utilizar soluções como navbars, sidebars, cards ou links como navegação;

Quando não usar:

• Houver muitos itens a serem mostrados como abas.
• Quando a ação de clique realizada pelo usuário o levar para outra página.

---

Uso

<CdsInnerTabs
	variant="green"
	:tabs="dataSet"
	:activeTab="dataSet[1]"
	:lazy="false"
	:headerLeft="false"
>
	<template #overview>
		Overview
	</template>
	<template #indicator-1>
		Conteúdo da tab-1
	</template>
	<template #prision-tab>
		Você não pode sair dessa aba pois a propriedade "disableTabChange" está com o valor "true" neste item na propriedade "tabs"
	</template>
	<template #indicator-3>
		Conteúdo da tab-3
	</template>
	<template #indicator-4>
		Conteúdo da tab-4
	</template>
	<template #indicator-5>
		Conteúdo da tab-5
	</template>
	<template #indicator-6>
		Conteúdo da tab-6
	</template>
	<template #indicator-7>
		Conteúdo da tab-7
	</template>
	<template #indicator-8>
		Conteúdo da tab-8
	</template>
</CdsInnerTabs>

---

Preview

• Visão geral
• Indicador 1
• Aba Prisão
• Indicador 3
• Indicador 4

Overview

Conteúdo da tab-1

Você não pode sair dessa aba pois a propriedade "disableTabChange" está com o valor "true" neste item na propriedade "tabs"

Conteúdo da tab-3

Conteúdo da tab-4

Mostrar log

⚡Nenhum evento foi disparado

---

Com scroll horizontal

Quando o conjunto de abas tiver uma largura maior que o container, será exibida uma barra de scroll horizonal para que o layout não seja quebrado em linhas ou fique oculto.

• Visão geral
• Indicador 1
• Indicador 2
• Indicador 3
• Indicador 4
• Indicador 5
• Indicador com o nome absurdamente grande 6
• Indicador 7
• Indicador 8

Overview

Conteúdo da tab-1

Conteúdo da tab-3

Conteúdo da tab-4

Conteúdo da tab-5

Conteúdo da tab-6

Conteúdo da tab-7

Conteúdo da tab-8

---

Props

Nome	Tipo	Default	Opções	Descrição
* tabs (required)	array	[]	--	Define a lista dos itens da InnerTabs a serem mostrados. Os itens da lista devem ser objetos com `name` (para identificar o slot) e `title` (título da aba)
* activeTab (required)	object	{}	--	O item ativo dentre as abas
variant	string	'green'	green teal blue indigo violet pink red orange amber dark	Cor da borda que indica o item ativo. Existem algumas cores predefinidas seguindo os guias do Cuida, são elas: `turquoise`, `green`, `blue`, `violet`, `pink`, `red`, `orange`, `amber` e `gray`.
headerLeft	boolean	false	--	Define se as abas devem ser alinhadas à esquerda. Caso `false`, o container das abas tomará todo o espaço disponível.
lazy	boolean	false	--	Define se as abas devem ser todas carregadas na renderização do componente ou sob demanda, apenas após elas serem acessadas pela primeira vez

Eventos

Nome	Descrição
@tab-click
@change

Slots

Nome	Descrição
#getSlotName(tab)	Slot para renderização customizada do conteúdo das abas