Seleccionar Web Components
El componente Ignite UI for Web Components Select permite una única selección de una lista de elementos, colocados en un menú desplegable. Este control de formulario ofrece una navegación rápida por la lista de elementos, incluida la selección, basada en una coincidencia de uno o varios caracteres.
Ejemplo de selección Web Components
Uso
Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponents
Antes de utilizar el IgcSelectComponent
componente, debe registrarlo junto con sus componentes adicionales:
import { defineComponents, IgcSelectComponent } from 'igniteui-webcomponents'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; defineComponents(IgcSelectComponent);
Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.
[!Note] Tenga en cuenta que los componentes de grupo y encabezado de selección no son obligatorios a menos que desee usarlos.
Para comenzar a usar el componente, agregue el IgcSelectComponent
junto con una lista de IgcSelectItemComponent
para elegir:
<igc-select> <igc-select-item value="orange">Orange</igc-select-item> <igc-select-item value="apple">Apple</igc-select-item> <igc-select-item value="banana">Banana</igc-select-item> <igc-select-item value="mango">Mango</igc-select-item> </igc-select>
Seleccionar
El IgcSelectComponent
componente se puede utilizar dentro de un IgcFormComponent
componente, por lo que expone una Name
propiedad con la que se va a registrar. También tiene una y placeholder
propiedades label
. La outlined
propiedad se utiliza con fines de estilo solo cuando se trata del tema Material. A excepción de la ranura predeterminada, el componente proporciona algunas otras ranuras, entre las que se incluyen header
,,,, helper-text
prefix
, footer
suffix
y toggle-icon
. El tamaño del componente se puede cambiar usando la--ig-size
variable CSS.
Artículo
El IgcSelectItemComponent
componente permite a los usuarios especificar de forma declarativa una lista de opciones que utilizará el IgcSelectComponent
control. Cada elemento proporciona una value
propiedad que representa los datos que transporta tras la selección. Tiene IgcSelectItemComponent
una ranura predeterminada que le permite especificar el contenido de texto del elemento. Este contenido de texto se utilizará como valor en caso de que la value
propiedad no esté presente en el IgcSelectItemComponent
. También puede proporcionar contenido personalizado para que se represente antes o después del IgcSelectItemComponent
contenido mediante las prefix
ranuras y suffix
. Puede predefinir un elemento seleccionado estableciendo la Selected
propiedad. También puede deshabilitar algunos o todos los elementos a través de la disabled
propiedad.
Encabezamiento
Puede utilizar IgcSelectHeaderComponent
para proporcionar un encabezado para un grupo de elementos.
<igc-select> <igc-select-header>Tasks</igc-select-header> </igc-select>
Grupo
Se pueden colocar varios IgcSelectItemComponent
entre los corchetes de apertura y cierre de un componente IgcSelectGroupComponent
para que los usuarios puedan agruparlos visualmente. El IgcSelectGroupComponent
puede etiquetarse a través de su ranura label
y deshabilitarse a través de su propiedad disabled
.
[!Note] Tenga en cuenta que si un grupo seleccionado está deshabilitado, no puede habilitar elementos separados del mismo.
<igc-select> <igc-select-group> <span slot="label">Europe</span> <igc-select-item> <igc-icon @ref="IconRef" slot="prefix" name="place" collection="material"></igc-icon> Germany <span slot="suffix">DE</span> </igc-select-item> <igc-select-item> <igc-icon slot="prefix" name="place" collection="material"></igc-icon> France <span slot="suffix">FR</span> </igc-select-item> <igc-select-item> <igc-icon slot="prefix" name="place" collection="material"></igc-icon> Spain <span slot="suffix">ES</span> </igc-select-item> </igc-select-group> </igc-select>
Validación
Además, soporta la IgcSelectComponent
mayoría de las IgcInputComponent
propiedades, tales como required
,,, disabled
autofocus
etc. El componente también expone un método enlazado a su validación:
reportValidity
: comprueba la validez y centra el componente si no es válido.
Navegación por teclado
Cuando la selección está enfocada y la lista de opciones no está visible:
- Abra la
select
usando la combinación ALT + ↑ ↓ o haciendo clic en la tecla Espacio o Enter. - Cierre la
select
usando la combinación ALT + ↑ o ↓ o cualquiera de las teclas Enter, Space, Esc oIgcTabComponent
. - Usando las teclas ← → seleccionará el elemento anterior en la lista.
- Usando las teclas ↑ ↓ seleccionará el siguiente elemento en la lista.
- El uso de las teclas Inicio o Fin seleccionará el primer o último elemento de la lista.
- Al escribir caracteres se consultará la lista de elementos y se seleccionará el que más se asemeje a la entrada actual del usuario.
Cuando la selección está enfocada y la lista de opciones está visible:
- El uso de las teclas Enter o Space seleccionará un elemento y cerrará la lista.
- Usando las teclas ← → se activará el elemento anterior de la lista.
- El uso de las teclas ↑ ↓ activará el siguiente elemento de la lista.
- El uso de las teclas Inicio o Fin activará el primer o último elemento de la lista.
[! Nota] El
IgcSelectComponent
componente solo admite una selección única de elementos.
Estilismo
Puede cambiar la apariencia del componente Ignite UI for Web Components IgcSelectComponent
y sus elementos mediante las partes CSS expuestas que se enumeran a continuación:
Partes CSS
Seleccionar componente
Nombre de la pieza | Descripción |
---|---|
input |
La entrada igc encapsulada. |
label |
La etiqueta de texto encapsulado. |
list |
Un contenedor que contiene la lista de opciones. |
prefix |
Un contenedor de prefijo que representa el contenido antes de la entrada. |
suffix |
Un contenedor de sufijo que representa el contenido después de la entrada. |
toggle-icon |
Un contenedor de icono de alternancia que representa el contenido dentro del contenedor de sufijo. |
helper-text |
Un contenedor de texto auxiliar que muestra el contenido debajo de la entrada. |
Seleccionar componente del artículo
Nombre de la pieza | Descripción |
---|---|
content |
El contenedor principal que contiene el contenido de texto de un elemento. |
prefix |
Un contenedor de prefijo que presenta el contenido antes del contenedor principal. |
suffix |
Un contenedor de sufijo que representa el contenido después del contenedor principal. |
Seleccionar componente de grupo
Nombre de la pieza | Descripción |
---|---|
label |
Un contenedor de etiquetas que muestra el contenido encima de los elementos del grupo seleccionado. |