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.
<!DOCTYPE html><html><head><title>Select Overview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-select><igc-select-itemvalue="Orange">Orange</igc-select-item><igc-select-itemvalue="Apple">Apple</igc-select-item><igc-select-itemvalue="Banana">Banana</igc-select-item><igc-select-itemvalue="Mango">Mango</igc-select-item></igc-select></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Uso
En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponents
cmd
Antes de utilizar el IgcSelectComponent componente, debe registrarlo junto con sus componentes adicionales:
El IgcSelectComponent componente se puede utilizar dentro de un Form componente, por lo que expone una name propiedad con la que se va a registrar. También tiene a label, y placeholder propiedades. 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, footer, helper-text, prefix,, suffix y toggle-icon. El tamaño del componente se puede cambiar mediante 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.
<!DOCTYPE html><html><head><title>Select Item</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-select><igc-select-item><igc-iconslot="prefix"name="hotel"collection="material"></igc-icon>
Hotel
</igc-select-item><igc-select-itemdisabled><igc-iconslot="prefix"name="grocery"collection="material"></igc-icon>
Grocery
</igc-select-item><igc-select-itemselected><igc-iconslot="prefix"name="restaurant"collection="material"></igc-icon>
Restaurant
</igc-select-item></igc-select></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Encabezamiento
Puede utilizar IgcSelectHeaderComponent para proporcionar un encabezado para un grupo de elementos.
<!DOCTYPE html><html><head><title>Select Header</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-select><igc-select-header>Tasks</igc-select-header><igc-select-itemvalue="spec"selected>Specification</igc-select-item><igc-select-itemvalue="implement">Implementation</igc-select-item><igc-select-itemvalue="test"disabled>Testing</igc-select-item><igc-select-itemvalue="docs">Documentation</igc-select-item></igc-select></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
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.
Tenga en cuenta que si un grupo seleccionado está deshabilitado, no puede habilitar elementos separados del mismo.
<!DOCTYPE html><html><head><title>Select Group</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-select><igc-select-group><spanslot="label">Europe</span><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Germany
<spanslot="suffix">DE</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
France
<spanslot="suffix">FR</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Spain
<spanslot="suffix">ES</span></igc-select-item></igc-select-group><igc-select-groupdisabled><spanslot="label">Asia</span><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
China
<spanslot="suffix">CN</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Japan
<spanslot="suffix">JP</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
India
<spanslot="suffix">IN</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Thailand
<spanslot="suffix">TH</span></igc-select-item></igc-select-group><igc-select-group><spanslot="label">North America</span><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
USA
<spanslot="suffix">US</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Canada
<spanslot="suffix">CA</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Mexico
<spanslot="suffix">MX</span></igc-select-item></igc-select-group></igc-select></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<igc-select><igc-select-group><spanslot="label">Europe</span><igc-select-item><igc-icon @ref="IconRef"slot="prefix"name="place"collection="material"></igc-icon>
Germany
<spanslot="suffix">DE</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
France
<spanslot="suffix">FR</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Spain
<spanslot="suffix">ES</span></igc-select-item></igc-select-group></igc-select>html
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 o IgcTabComponent.
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.
El componente IgcSelectComponent solo admite una selección única de elementos.
Estilo
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.
<!DOCTYPE html><html><head><title>Select Styling</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-selectlabel="Destinations:"><igc-iconslot="prefix"name="place"collection="material"></igc-icon><spanslot="helper-text">Choose the desired place</span><igc-select-groupdisabled><spanslot="label">Europe</span><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Germany
<spanslot="suffix">DE</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
France
<spanslot="suffix">FR</span></igc-select-item><igc-select-itemselected><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Spain
<spanslot="suffix">ES</span></igc-select-item></igc-select-group><igc-select-group><spanslot="label">North America</span><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
USA
<spanslot="suffix">US</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Canada
<spanslot="suffix">CA</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Mexico
<spanslot="suffix">MX</span></igc-select-item></igc-select-group></igc-select></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css