select-customizado v1.0.0
Select Customizado
Sobre
Select customizado para utilizar em ordenção de listagem, seleção de atributo.
Dependências
Não há.
Instalação
- Instale o app através do seu terminal
npm i @wapstore/select-customizado- Valide se seu arquivo package.json possui a dependência
"dependencies": {
"@wapstore/select-customizado": "0.0.6"
}Agora a loja está apta para o uso da aplicação.
Uso
O componente de Select Customizado pode ser inserido em qualquer lugar da pasta "components". Neste arquivo você pode inserir todas as props e slots que o componente aceita, além de seus estilos.
Exemplo
-Este é um exemplo da aplicação de um arquivo padrão para um select customizado:
<template>
...
</template>
<script>
...
</script>
<style>
...
</style>Recursos
Props
| Prop | Descrição | Tipo | Valor Padrão |
|---|---|---|---|
labelDefault 0.0.6 | Texto exibido no select quando não tiver nenhuma opção selecionada. | String | Selecione |
opcoes 0.0.6 | Array de objeto com as opções a ser selecionada no select. | Array | - |
Configurações da prop opções
| Opção | Descrição | Tipo |
|---|---|---|
selecionado 0.0.6 | Define qual opção esta selecionada, pode ser: selecionado, ativo ou atual. | Boolean |
label 0.0.6 | Texto visual para seleção da opção, pode ser: label ou nome. | String |
Slots
| Slot | Descrição | Name | Exemplo de uso |
|---|---|---|---|
Icone seta 0.0.6 | Campo para adicionar uma seta toggle personalizada do projeto. | iconeArrow | <selectCustomizado><template #iconeArrow>/*...*/</template></selectCustomizado> |
Eventos
| Slot | Descrição | Argumentos |
|---|---|---|
change 0.0.6 | Quando é alterado a opção selecionada. | newValue Descrição: A nova opção a ser selecionada. Tipo: Objeto oldValue Descrição: A antiga opção selecionada. Tipo: Objeto |
initSelect 0.0.6 | Primeira renderização no DOM do componente. | element Descrição: Referencia do HTML da aba no DOM. Tipo: HTMLDivElement |
updatedSelect 0.0.6 | Toda atualização no DOM. | element Descrição: Referencia do HTML da aba no DOM. Tipo: HTMLDivElement |
Estilização
Classes CSS
- Estado do select
- Descrição: Utilize essa classe para aplicar estilos conforme o estado do select aberto ou fechado, muito util para adicionar animações.
- Classes
- selectActive
- Descrição: Essa classe css é renderizada no select quando ele está no estado aberto.
- selectActive
Para a estilização, basta utilizar estilos sem escopos dentro do componente onde for inserido, utilizando sempre de um ID ou classe específica para a chamada do componente, para que em outras chamadas o estilo não influencie. Caso o estilo seja para várias chamadas do componente é recomendado a inserção dos estilos em um arquivos CSS separado.
1 year ago