LxBadgeGroupSelect

Visão geral

O componente LxBadgeGroupSelect permite agrupar e selecionar badges, oferecendo diversas opções de personalização e suporte a pesquisa. Ele é parte do SEEDs – Design System da Linx.

Exemplo de seleção de badges

Nenhum resultado encontrado para a busca utilizada.

Todas

Todos os pagamentos

Todos os recebimentos

Rendimentos

Recebimento de vendas

Clique para visualizar o código

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

const modelValueMock = ref([
	{ id: 'badge-1', label: 'Todas', selected: false, disabled: false },
	{ id: 'badge-2', label: 'Todos os pagamentos', selected: true, disabled: false },
	{ id: 'badge-3', label: 'Todos os recebimentos', selected: false, disabled: false },
	{ id: 'badge-4', label: 'Rendimentos', selected: false, disabled: false },
	{ id: 'badge-5', label: 'Recebimento de vendas', selected: false, disabled: false }
]);
</script>

<template>
	<div class="d-flex gap-1">
		<LxBadgeGroupSelect id="badge-group" v-model="modelValueMock" label="Exemplo de seleção de badges" :max-height="100" />
	</div>
</template>

Formato do v-model

⚠️ O v-model recebe e emite um Array de objetos de badge. Inicialize sempre como array vazio.

const badgesSelecionados = ref([])   // ✅ nunca null

O componente gerencia internamente quais objetos estão selecionados e emite o array atualizado no update:modelValue.

Inicialização: ref([]) — nunca null.

Propriedades

Nome	Descrição	Tipo	Padrão
modelValue	Lista de badges a serem exibidos e selecionados.	Array	[]
id	Identificador único do grupo de badges.	String	''
label	Rótulo do grupo de badges.	String	''
size	Tamanho dos badges ('sm', 'md', 'lg').	String	'md'
inputSearch e noResult	Acesse o InputSearch para mais detalhes	Object	null
maxHeight	Altura máxima do container de badges.	Number	0

Slots

Nome	Descrição
badge-group-label-content	Conteúdo personalizado para o rótulo do grupo de badges.
badge-group-body-content	Conteúdo personalizado para o corpo do grupo de badges.

Classes Padrão

O componente LxBadgeGroupSelect utiliza uma série de classes CSS padrão que podem ser personalizadas. Essas classes permitem que você estilize qualquer parte do badge usando :deep com a classe desejada.

Nome	Descrição
lx-badge-group	Classe base do badge.
lx-badge-group-container	Classe base do container do grupo de badges.
lx-badge-group-label	Classe do rótulo do grupo de badges.
lx-badge-group-badge-container	Classe base do container de badges.
lx-badge-group-badge-container--cropped	Classe aplicada quando o container de badges está cortado.
lx-badge-group-all-badges-visible-container	Classe para o container do botão de "ver mais/menos".

Exemplo de Personalização

Você pode personalizar o estilo do botão utilizando as classes padrão com o seletor :deep. Veja um exemplo de como alterar o estilo do rótulo do botão:

Clique para visualizar o código

:deep .lx-badge-group-label {
  color: red;
}

Playground

Id:

Rótulo:

Tamanho:smmdlg

Altura máxima:

Desabilitado

Config. Campo busca (inputSearch):

Config. Quando sem resultado (noResult):

Exemplo de seleção de badges

Nenhum resultado

Todas

Todos os pagamentos

Todos os recebimentos

Rendimentos

Recebimento de vendas

Investimentos

Despesas

Lucros

Perdas

Impostos

Salários

Comissões

Bonificações

Dividendos

Juros

Multas

Taxas

Doações

Patrocínios

Outros