LxComponentsLxBadgeGroupSelect
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.
Clique para visualizar o código
vue
<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"
:inputSearch="{ active: true }"
:noResult="{ active: true }"
:max-height="100"
/>
</div>
</template>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 ::v-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 ::v-deep. Veja um exemplo de como alterar o estilo do rótulo do botão:
Clique para visualizar o código
css
::v-deep .lx-badge-group-label {
color: red;
}