Web Components Seleccionar

El componente Seleccionar Ignite UI for Web Components permite una sola 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, en función de una coincidencia de uno o varios caracteres.

Web Components Select Example

Usage

En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

npm install igniteui-webcomponents

Before using the IgcSelectComponent component, you need to register it together with its additional components:

import {
    defineComponents,
    IgcSelectComponent
}
from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSelectComponent);

Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

[!Note] Please note that the select header and group components are not mandatory unless you want to use them.

Para empezar a usar el componente, añade elIgcSelectComponent junto con una lista deIgcSelectItemComponent opciones 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

ElIgcSelectComponent componente puede usarse dentro de unForm componente, por lo que expone unaname propiedad a la que debe registrarse. También tiene propiedadeslabel yplaceholder Laoutlined propiedad se utiliza solo con fines de estilismo cuando se trata del tema Material. Excepto por la ranura predeterminada, el componente ofrece algunas otras ranuras, incluyendoheader,footer,helper-text,prefix,suffix, ytoggle-icon. El tamaño del componente puede cambiarse usando la--ig-size variable CSS.

Item

ElIgcSelectItemComponent componente permite a los usuarios especificar declarativamente una lista de opciones que el control va a utilizarIgcSelectComponent. Cada elemento proporciona unavalue propiedad que representa los datos que transporta al seleccionarse. TieneIgcSelectItemComponent una ranura predeterminada que permite especificar el contenido de texto del objeto. Este contenido textual se utilizará como valor en caso de que lavalue propiedad no esté presente en elIgcSelectItemComponent. También podrías proporcionar contenido personalizado para renderizarse antes o después delIgcSelectItemComponent contenido usando lasprefix ranuras ysuffix. Podrías predefinir un elemento seleccionado estableciendo laSelected propiedad. También podrías desactivar algunos o todos los elementos a través de ladisabled propiedad.

Puedes usar elIgcSelectHeaderComponent para proporcionar un encabezado para un grupo de elementos.

<igc-select>
    <igc-select-header>Tasks</igc-select-header>
</igc-select>

Group

Se pueden colocar variasIgcSelectItemComponent s entre los corchetes de apertura y cierre de unIgcSelectGroupComponent componente para que los usuarios puedan agruparlos visualmente. SeIgcSelectGroupComponent puede etiquetar a través de sulabel ranura y desactivarse mediante sudisabled propiedad.

[!Note] Keep in mind that if a select group is disabled, you cannot enable separate items of it.

<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>

Validation

Además, soportaIgcSelectComponent la mayoría de lasIgcInputComponent propiedades, comorequired,disabled,autofocus, etc. El componente también expone un método vinculado a su validación:

reportValidity- comprueba la validez y enfoca el componente si no es válido.

Cuando la selección está enfocada y la lista de opciones no está visible:

Abre elselect usando la ALT + ↓ ↑ combinación o haciendo clic en la SPACE o la ENTER tecla.
Cierra laselect combinación usando la combinación de + ↑ ALT o ↓ o cualquiera de las ENTER, SPACE, ESC oIgcTabComponent las teclas.
Usando las teclas ← → seleccionará el elemento anterior en la lista.
Usando las teclas ↑ ↓ seleccionará el siguiente elemento en la lista.
Usando las HOME teclas o END 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:

Usando las ENTER teclas 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 HOME teclas o END activará el primer o último elemento de la lista.

[!Note] The IgcSelectComponent component supports only single selection of items.

Styling

You can change the appearance of the Ignite UI for Web Components IgcSelectComponent component and its items, by using the exposed CSS parts listed below:

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.

igc-select::part(base) {
  background: var(--ig-primary-50);
}

igc-select-item[active] {
  background: var(--ig-secondary-300);
}

igc-select::part(input) {
  background-color: var(--ig-primary-50);
}

igc-select::part(prefix),
igc-select::part(suffix) {
  color: var(--ig-secondary-500-contrast);
  background: var(--ig-secondary-500);
}

Web Components Seleccionar

Web Components Select Example

Usage

Seleccionar

Item

Header

Group

Validation

Keyboard Navigation

Styling

API Reference

Additional Resources