FilterSelect Deprecated
FilterSelect permitem que o usuário escolha opções como filtro de determinado conteúdo. São derivados dos Selects, mas têm implementação e aplicabilidade mais específicas. Ocupam menos conteúdo verticalmente e não possuem propriedades relacionadas à validação.
Quando usar:
- O usuário tiver de escolher uma única opção em uma lista com diversos itens.
- Quando essas opções servierem de filtros a conteúdos em uma página, card, ou sidesheet,como por exemplo para mapas, gráficose relatórios
Quando não usar:
- Em substituição ao componente Select
- O usuário precisar selecionar mais de um item da lista. Nesse caso, utilize ClusteredMultiselects.
Observações:
- Coloque as opções mais prováveis de serem selecionadas no topo do FilterSelect. Na dúvida, ordene-os em ordem alfanumérica.
- As labels dos selects devem ser sucintas (de uma a três palavras).
- ⚠️ Importante: Para que o FilterSelect funcione corretamente, a propriedade cujos valores serão exibidos no select, deve se chamar
value, como indicado no exemplo abaixo na tabela de props.
Uso
js
<CdsFilterSelect
:value="value"
:options="options"
width="wide"
label="Séries"
placeholder="Selecione uma das séries"
required
/>Preview
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
* label (required) | string | 'Label' | -- | Especifica o título do FilterSelect. |
placeholder | string | 'Selecione...' | -- | Indica o texto que instrui o usuário a como interagir com o FilterSelect. |
* options (required) | array | [] | -- | Array de objetos que especifica a lista de opções do Filter Select. Os valores a serem mostrado como opções do FilterSelect devem estar atribuídos a chave `value` do objeto. |
* modelValue (required) | array|object | -- | Guarda o valor selecionado do FilterSelect. | |
searchable | boolean | false | -- | Indica se vai ser possível fazer buscas no FilterSelect. |
width | string | 'default' | -- | Define a largura do FilterSelect. As opções são 'thin', 'default' e 'wide'. |
fluid | boolean | false | -- | Especifica se a largura do FilterSelect deve ser fluida. |
disabled | boolean | false | -- | Especifica o status de interação do FilterSelect. |
optionsField | string | 'value' | -- | Indica o nome da da chave do objeto a ser considerada na renderização das opções do FilterSelect. |
returnValue | boolean | false | -- | Quando true, passa a retornar o optionsField no modelValue fora do objeto das opções do FilterSelect. |
Eventos
Nome | Descrição |
|---|---|
@update:modelValue | Evento que indica que o valor do Select foi alterado |