TABS

Visão geral

As tabs são usadas para agrupar conteúdos diferentes, mas relacionados, permitindo que os usuários naveguem pelas visualizações sem sair da página.

As TABS devem ser criadas utilizando dois componentes distintos, são eles:

LxTabs: Representa o container das TABS.
LxTabItem: Representa uma TAB.

Exemplo

Grifinória tem como cores oficiais o vermelho e o dourado e seu fundador foi Godric Gryffindor. Esta casa valoriza a coragem, a bravura, a determinação e a nobreza de espírito. Seu animal símbolo é o leão, e sua sala comunal está localizada na torre oeste do castelo. A diretora da casa é a Professora Minerva McGonagall. Alguns dos membros notáveis da Grifinória incluem Harry Potter, Hermione Granger, Ron Weasley e Alvo Dumbledore.

Clique para exibir o código

<script setup>
import { LxTabs } from '@lde/lxcomponents';
import { LxTabItem } from '@lde/lxcomponents';

function selectedTab(id) {
	console.log('tab id selected -> ', id);
}
</script>

<template>
	<LxTabs @tab-selected-id="selectedTab">
		<LxTabItem id="tab-1" label="Grifinória" selected icon="fa-solid fa-user-secret">
			<p class="m-0">
				Grifinória tem como cores oficiais o vermelho e o dourado e seu fundador foi Godric Gryffindor. Esta casa valoriza a coragem, a bravura, a determinação e a nobreza
				de espírito. Seu animal símbolo é o leão, e sua sala comunal está localizada na torre oeste do castelo. A diretora da casa é a Professora Minerva McGonagall. Alguns
				dos membros notáveis da Grifinória incluem Harry Potter, Hermione Granger, Ron Weasley e Alvo Dumbledore.
			</p>
		</LxTabItem>
		<LxTabItem id="tab-2" label="Sonserina">
			<p class="m-0">
				Sonserina é caracterizada por suas cores verdes e prateadas e foi fundada por Salazar Slytherin. Esta casa valoriza a astúcia, a ambição, a determinação e a crença
				na pureza do sangue. Seu animal símbolo é a serpente, e a sala comunal de Sonserina está localizada nas masmorras do castelo. O diretor da casa é o Professor
				Severus Snape (posteriormente, Horácio Slughorn). Membros notáveis de Sonserina incluem Severus Snape, Draco Malfoy e Voldemort (Tom Riddle).
			</p>
		</LxTabItem>
		<LxTabItem id="tab-3" label="Corvinal">
			<p class="m-0">
				As cores da Corvinal são azul e bronze, e sua fundadora foi Rowena Ravenclaw. Esta casa valoriza a inteligência, a sabedoria, a criatividade e a curiosidade. Seu
				animal símbolo é a águia, e a sala comunal de Corvinal está localizada na torre norte do castelo. O diretor da casa é o Professor Fílio Flitwick. Alguns membros
				notáveis da Corvinal incluem Luna Lovegood e Cho Chang.
			</p>
		</LxTabItem>
		<LxTabItem id="tab-4" label="Lufa-Lufa" disabled>
			<p class="m-0">
				Lufa-Lufa é identificada pelas cores amarelo e preto e foi fundada por Helga Hufflepuff. Esta casa valoriza a lealdade, a paciência, o trabalho árduo e a igualdade.
				Seu animal símbolo é o texugo, e a sala comunal de Lufa-Lufa está localizada perto das cozinhas do castelo. A diretora da casa é a Professora Pomona Sprout. Alguns
				membros notáveis de Lufa-Lufa incluem Cedrico Diggory e Ninfadora Tonks.
			</p>
		</LxTabItem>
	</LxTabs>
</template>

API do componente

Propriedades

LxTabs

Nome	Descrição	Tipo	Padrão
size	Specifies the size of the tabs. Valid values are 'sm' (small), 'md' (medium), and 'lg' (large).	String	md
fill	When set to true, the tabs stretch to fill the available width.	Boolean	false

LxTabItem

Nome	Descrição	Tipo	Padrão
id *	ID único da TAB.	String	''
label	Label que aparece na TAB.	String	''
icon	Icone que aparece na TAB.	String	''
selected	Tab está selecionada.	Boolean	false
disabled	Tab está desabilitada.	Boolean	false

Slots

O componente LxTabItem recebe seu conteúdo através de um slot. Logo, a implementação do conteúdo de uma determinada TAB fica dentro da sua respectiva instancia de LxTabItem.

Playground