Chip
Chips ajudam as pessoas a inserir informações, fazer seleções, filtrar conteúdo ou disparar ações.
Quando usar:
- For necessário selecionar e/ou filtrar conteúdo
- O conteúdo que a chip representa puder ser setado ou removido pelo usuário.
Quando não usar:
- O conteúdo a ser mostrado for readonly (nesse caso, é mais indicado utlizar o componente Badge).
Uso
js
<CdsChip
v-model="select"
variant="red"
size="md"
>
Chip
</CdsChip>Preview
Chip
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
variant | string | 'gray' | green teal blue indigo violet pink red orange amber dark | A variante da Badge. São 9 variantes. |
size | string | 'md' | sm md lg | Especifica o tamanho da chip. São 3 tamanhos implementados. |
persistantActionIcon | boolean | false | -- | Especifíca se o ícone de ação da chip é mostrado independentemente do estado de seleção. |
iconLeft | boolean | true | -- | Especifica se o ícone da chip é mostrado na esquerda (true) ou direita (false). |
Slots
Nome | Descrição |
|---|---|
#icon | Slot utilizado para alterar o ícone mostrado na chip. |
#default | Slot utilizado para o conteúdo textual da chip. |