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

Clique para exibir o código

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

const tabSelecionada = ref('tab-2');

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

<template>
	<LxTabs v-model="tabSelecionada" @update:modelValue="selectedTab">
		<LxTabItem id="tab-1" label="Grifinória" 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
modelValue	Valor selecionado da tab. Nota: Utilizar a implementação padrão com o v-model.	String	''
size	Especifica o tamanho das tabs. Valores válidos são 'sm' (pequeno), 'md' (medio), e 'lg' (grande).	String	'md'
fill	Quando definido como verdadeiro, as abas se esticam para preencher a largura disponível.	Boolean	false
disabled	Determina se a navegação de tab ficará totalmente desabilitada (veja abaixo que também é possível desabilitar por item).	Boolean	false
appearance	Define a aparência da tab. Os valores possíveis são default (linha abaixo da tab) ou filled (tab selecionada preenchida, com itens visualmente agrupados).	String	'default'

LxTabItem

Nome	Descrição	Tipo	Padrão
id	⚠️ obr ID único da TAB.	String	''
label	Label que aparece na TAB.	String	''
icon	Icone que aparece na TAB.	String	''
selected	⚠️ depreciado Tab está selecionada. Se um valor inicial for fornecido ao modelValue, a tag perderá a funcionalidade esperada.	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

Tamanho:smmdlg

Aparência:defaultfilled

Aba Selecionada:Primeira tabSegunda tabTerceira tab

Preencher todo o espaço

Desabilitar

Clique para exibir o código

<template>
	<div class="d-flex flex-column gap-4">
		<div class="d-flex flex-column gap-3">
			<div class="row align-items-end row-gap-3">
				<div class="col-md-4 col-12">
					<label for="size" class="form-label">Tamanho:</label>
					<select id="size" v-model="size" class="form-select">
						<option value="sm">sm</option>
						<option value="md">md</option>
						<option value="lg">lg</option>
					</select>
				</div>
				<div class="col-md-4 col-12">
					<label for="appearance" class="form-label">Aparência:</label>
					<select id="appearance" v-model="appearance" class="form-select">
						<option value="default">default</option>
						<option value="filled">filled</option>
					</select>
				</div>
				<div class="col-md-4 col-12">
					<label for="selectedTab" class="form-label">Aba Selecionada:</label>
					<select id="selectedTab" v-model="selectedTab" class="form-select">
						<option value="tab1">Primeira tab</option>
						<option value="tab2">Segunda tab</option>
						<option value="tab3">Terceira tab</option>
					</select>
				</div>
			</div>
			<div class="row align-items-end row-gap-3">
				<div class="col-md-4 col-12">
					<div class="form-check d-flex align-items-center gap-2">
						<input id="fill" v-model="fill" type="checkbox" class="form-check-input" />
						<label for="fill" class="form-check-label">Preencher todo o espaço</label>
					</div>
				</div>
				<div class="col-md-4 col-12">
					<div class="form-check d-flex align-items-center gap-2">
						<input id="disabled" v-model="disabled" type="checkbox" class="form-check-input" />
						<label for="disabled" class="form-check-label">Desabilitar</label>
					</div>
				</div>
			</div>
		</div>

		<LxTabs :size="size" :fill="fill" :disabled="disabled" :appearance="appearance" v-model="selectedTab">
			<LxTabItem id="tab1" label="Primeira tab">
				<p>Conteúdo da Aba 1</p>
			</LxTabItem>
			<LxTabItem id="tab2" label="Segunda tab">
				<p>Conteúdo da Aba 2</p>
			</LxTabItem>
			<LxTabItem id="tab3" label="Terceira tab">
				<p>Conteúdo da Aba 3</p>
			</LxTabItem>
		</LxTabs>
	</div>
</template>
<script setup>
import { ref } from 'vue';
import LxTabs from '@/components/LxTabs/LxTabs.vue';
import LxTabItem from '@/components/LxTabs/LxTabItem.vue';

const selectedTab = ref('tab1');
const size = ref('md');
const fill = ref(false);
const disabled = ref(false);
const appearance = ref('default');
</script>