Links

Dropdown

Son listas de opciones donde se puede seleccionar una o varias de ellas. Una opci贸n seleccionada puede representar un valor en un formulario, o puede utilizarse como una acci贸n para filtrar contenido.

Racional de aplicaci贸n

Los Dropdowns pueden utilizarse en formularios de p谩ginas completas, en modales o en paneles laterales. El componente Dropdown se utiliza para seleccionar, filtrar u ordenar contenidos en una p谩gina.
No utilizamos un Dropdown para selecciones binarias, ya que para ese caso consideramos mejor opci贸n los Radio Button.
No anidamos los Dropdown ni los utilizamos para mostrar informaci贸n demasiado compleja. Se debe mantener la selecci贸n de opciones lo m谩s sencilla posible.
Consideramos la posibilidad de utilizar un men煤 desplegable de selecci贸n si la mayor parte de la experiencia se basa en formularios o se utiliza con frecuencia en plataformas m贸viles. La selecci贸n nativa funciona mejor con un formulario nativo cuando se env铆an datos y tambi茅n es m谩s f谩cil de usar en una plataforma m贸vil.

Buenas pr谩cticas

Uso correcto
Uso incorrecto
Acompa帽amos al selector de entrada con una etiqueta que informe del contexto de la selecci贸n.
Un selector de entrada sin etiqueta aporta poca informaci贸n.
Procuramos que los nombres de las opciones del selector sean cortas.
Los nombres largos en las opciones pueden exceder el ancho del selector y producir comportamientos no deseados
Puede ser mejor opci贸n para una selecci贸n binaria un grupo de radio buttons.
Para selecciones de dos elementos y seg煤n el contexto, el Dropdown puede no ser la mejor opci贸n.

Interacci贸n

Este componente ha sido validado para cumplir con las pautas de accesibilidad WCAG 2.1 AA, sin embargo los cambios realizados por el propietario del contenido pueden afectar el cumplimiento de la accesibilidad. Hay que asegurarse de revisar y seguir las instrucciones de esta secci贸n cuando se actualice o se agregue contenido nuevo a este componente.
Dispositivo
Interacci贸n
Rat贸n
Se puede activar un Dropdown haciendo clic en cualquier lugar dentro del contenedor del Dropdown.
Teclado
Se puede activar un Dropdown presionando Intro o Espacio mientras el Dropdown est谩 enfocado.

Anatom铆a y variabilidad

Anatom铆a del componente

Letra
Elemento
Descripci贸n
A
Etiqueta
Se aconseja que los Dropdown vayan acompa帽ados de una etiqueta.
B
Texto de ayuda
Brinda un contexto adicional o instrucciones sobre el selector que se va a utilizar.
C
Selector de entrada
Muestra un texto de contexto (Placeholder) o la 煤ltima opci贸n seleccionada.
D
Opci贸n
Elemento disponible para ser seleccionado.
E
Opci贸n seleccionada
Opci贸n que ha sido seleccionada y se reflejar谩 en el selector de entrada.

Variabilidad de estados

Letra
Estado
Descripci贸n
A
Default
Estado por defecto, el selector est谩 disponible para elegir una opci贸n.
B
Hover
Visible al posicionar el cursor del rat贸n encima del selector.
C
Active
Activado por rat贸n con click o tabulador para actuar sobre el mismo.
D
Filled
Estado resultante de seleccionar una de las opciones disponibles.
E
Disabled
Selector no disponible, normalmente atenuado visualmente.

Instalaci贸n

npm i --save @plural-wc/dropdown
// or
yarn add @plural-wc/dropdown
import { PluralDropdown } from '@plural-wc/dropdown';
// or
import '@plural-wc/dropdown/plural-dropdown.js';

Uso

Default

export const defaultPreview = () => html`<plural-dropdown name="dropdown" label="Label">
<plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
<plural-option .choiceValue=${'red'}>Red</plural-option>
<plural-option .choiceValue=${'hotpink'}>Hotpink</plural-option>
<plural-option .choiceValue=${'blue'}>Blue</plural-option>
</plural-dropdown>`;

Help-text

export const helpText = () => html`<plural-dropdown name="dropdown" label="Label">
<plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
<plural-option .choiceValue=${'red'}>Red</plural-option>
<plural-option .choiceValue=${'hotpink'}>Hotpink</plural-option>
<plural-option .choiceValue=${'blue'}>Blue</plural-option>
<p slot="help-text">Help-text</p>
</plural-dropdown>`;

Disabled

export const disabled = () => html`<plural-dropdown name="dropdown" label="Label" disabled>
<plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
</plural-dropdown>`;

Disabled & Feedback

export const disabledFeedback = () => html`<plural-dropdown name="dropdown" label="Label" disabled>
<plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
<p slot="feedback">Feedback</p>
</plural-dropdown>`;

Feedback

export const feedback = () => html`<plural-dropdown name="dropdown" label="Label">
<plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
<plural-option .choiceValue=${'red'}>Red</plural-option>
<plural-option .choiceValue=${'hotpink'}>Hotpink</plural-option>
<plural-option .choiceValue=${'blue'}>Blue</plural-option>
<p slot="feedback">Feedback</p>
</plural-dropdown>`;

Intercept the checked item index or the value when selected item is changed

export const intercept = () => html`<plural-dropdown
name="dropdown"
label="Label"
@model-value-changed=${({ target }) => {
console.log(`updated value: ${target.modelValue}`);
console.log(`checked index: ${target.checkedIndex}`);
}}
>
<plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
<plural-option .choiceValue=${'red'}>Red</plural-option>
<plural-option .choiceValue=${'hotpink'} checked>Hotpink</plural-option>
<plural-option .choiceValue=${'blue'}>Blue</plural-option>
</plural-dropdown>`;
脷ltima actualizaci贸n 1yr ago