Tabs Deprecated

Tabs são componentes utilizados para criar soluções de navegação internas.

---

Quando usar:

• 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

<CdsTabs
	variant="green"
	:tabs="items"
	:activeTab="items[1]"
	@right-click="handleRightClick"
	@tabs-change="handleTabsChange"
	@add-action="handleAddAction"
>
	<template #room-42>
		Sala de Psicologia
	</template>
	<template #room-51>
		Sala de Fisioterapia
	</template>
	<template #room-13>
		Sala de Otorrinolaringologista
	</template>
</CdsTabs>

---

Preview

• Psicologia
• Fisioterapia
• Otorrinolaringologista

Sala de Psicologia

Sala de Fisioterapia

Sala de Otorrinolaringologista

Mostrar log

⚡Nenhum evento foi disparado

---

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`.
showAddAction	boolean	false	--	Define se o botão de adicionar deve ser exibido ou não, por padrão ele não será exibido

Eventos

Nome	Descrição
@right-click	Evento emitido quando uma das abas é clicada com o botão direito
@tabs-change	Evento emitido quando a aba ativa é alterada
@add-action	Evento emitido ao clicar no botão de adicionar

Slots

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