Componente de lista desplegable Web Components: descripción general
La lista desplegable Web Components, rica en funciones, ofrece filtrado listo para usar, accesibilidad, valores preseleccionados, enlace de datos flexible, agrupación, personalización de la interfaz de usuario y más. Lo que prácticamente hace este componente es reemplazar de manera efectiva y sencilla las etiquetas de selección HTML, lo que permite a los usuarios elegir rápidamente un valor no editable de un conjunto predefinido de varias opciones.
El componente desplegable Ignite UI for Web Components muestra una lista de alternancia de valores predefinidos y permite a los usuarios seleccionar fácilmente un único elemento de opción con un clic. Se puede configurar rápidamente para que actúe como un menú desplegable Web Components o simplemente puede usarlo para brindar información visual más útil agrupando datos. Además, con la agrupación puedes utilizar datos tanto planos como jerárquicos.
Con nuestro componente, obtiene todas las funciones y opciones de personalización que necesita para su proyecto: personalizaciones de estilo, opciones de ubicación del menú desplegable Web Components, plantillas y capacidad de cambiar qué y cómo se muestra en el encabezado, pie de página, cuerpo, lista, etc.
Web Components Dropdown Example
El siguiente ejemplo de lista desplegable Web Components demuestra el uso de un menú desplegable Web Components interactivo simple en acción con tres opciones básicas para elegir. Mira cómo funciona.
How to use the Dropdown List with Ignite UI for Web Components
Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponents
import {
defineComponents,
IgcDropdownComponent
} from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcDropdownComponent);
Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.
La forma más sencilla de comenzar a utilizar IgcDropdownComponent es la siguiente:
<igc-dropdown>
<igc-button slot="target">Options</igc-button>
<igc-dropdown-item>Option 1</igc-dropdown-item>
<igc-dropdown-item>Option 2</igc-dropdown-item>
<igc-dropdown-item>Option 3</igc-dropdown-item>
</igc-dropdown>
Target
La lista desplegable Web Components se posiciona en relación con su destino. La target ranura le permite proporcionar un componente incorporado que alterna la open propiedad al hacer clic. En algunos casos, querrá usar un destino externo o usar otro evento para alternar la apertura del menú desplegable. Puede lograr esto utilizando los show2 métodos , hide and toggle2 que le permiten proporcionar el objetivo como parámetro. De forma predeterminada, la lista desplegable utiliza absolute la posición CSS. Deberá establecer el positionStrategy menú desplegable de Web Components en fixed cuando el elemento de destino esté dentro de un contenedor fijo, pero el menú desplegable no lo esté. El tamaño de la lista desplegable se ajusta automáticamente en función de su contenido, si desea que la lista tenga el mismo ancho que el destino, debe establecer la sameWidth propiedad en true.
Position
La ubicación preferida del menú desplegable Web Components se puede configurar utilizando la propiedad placement. La ubicación predeterminada del menú desplegable es bottom-start. La propiedad flip determina si la ubicación se debe voltear si no hay suficiente espacio para mostrar el menú desplegable en la ubicación especificada. La distancia desde la lista desplegable Web Components hasta su destino se puede especificar utilizando la propiedad distance.
Selección
Emite IgcDropdownComponent el evento cuando el Change usuario selecciona un elemento. El select método del menú desplegable le permite seleccionar un elemento por su índice o valor.
Item
El IgcDropdownItemComponent representa un elemento seleccionable en la lista desplegable. Puede predefinir un elemento seleccionado configurando la propiedad selected. También puede deshabilitar un elemento para que no se pueda seleccionar usando la propiedad disabled. El IgcDropdownItemComponent tiene una ranura predeterminada que le permite especificar el contenido del elemento. También puede proporcionar contenido personalizado para que se represente antes o después del contenido utilizando las ranuras prefix y suffix. La propiedad value le permite proporcionar un valor personalizado a un artículo. Si no se establece el value, se resuelve en el contenido de texto del elemento.
Header
Puede utilizar IgcDropdownHeaderComponent para proporcionar un encabezado para un grupo de elementos.
Group
Los elementos del menú desplegable de Web Components también se pueden agrupar utilizando IgcDropdownGroupComponent, lo que facilita a los usuarios diferenciar categorías separadas. Véalo en acción en este ejemplo de lista desplegable Web Components:
Scroll Strategy
La propiedad scrollStrategy determina el comportamiento del componente durante el desplazamiento del contenedor del elemento de destino. El valor predeterminado es scroll, lo que significa que el menú desplegable se desplazará con su destino. Establecer la propiedad en block bloqueará el desplazamiento si se abre el menú desplegable. También puede configurar la propiedad para que se close, lo que significa que el menú desplegable se cerrará automáticamente al desplazarse.
Keep Open
De forma predeterminada, el menú desplegable se cierra automáticamente cuando el usuario hace clic fuera de él o selecciona un elemento. Puede evitar este comportamiento utilizando las propiedades keepOpenOnOutsideClick y keepOpenOnSelect.
Styling
Puede cambiar la apariencia del menú desplegable y sus elementos utilizando las partes CSS expuestas. IgcDropdownComponent expone partes base y list, IgcDropdownItemComponent expone partes prefix, content y suffix y IgcDropdownGroupComponent expone parte label.