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.
Ejemplo desplegable Web Components
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.
Cómo utilizar la lista desplegable con Ignite UI for Web Components
Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponentsimport { 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>Objetivo
La lista desplegable Web Components se coloca en relación con su destino. La target ranura le permite proporcionar un componente incorporado que alterna la propiedad con un open clic. En algunos casos, es posible que desee utilizar un destino externo o utilizar otro evento para alternar la apertura del menú desplegable. Puede lograr esto utilizando los showTarget métodos , hide and toggleTarget que le permiten proporcionar el objetivo como parámetro. De forma predeterminada, la lista desplegable utiliza absolute la posición CSS. Deberá establecer el IgcPositionStrategy menú desplegable fixed de Web Components en cuando el elemento de destino esté dentro de un contenedor fijo, pero el menú desplegable no. 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.
Posición
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.
Artículo
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.
Encabezamiento
Puede utilizar IgcDropdownHeaderComponent para proporcionar un encabezado para un grupo de elementos.
Grupo
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:
Estrategia de desplazamiento
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.
Mantener abierta
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.
Estilismo
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.