React Componente de lista desplegable - Descripción general
Rica en funciones, la lista desplegable de React 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 este componente hace prácticamente es reemplazar de manera efectiva y fácil 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 React muestra una lista de alternancia de valores predefinidos y permite a los usuarios seleccionar fácilmente un solo elemento de opción con un clic. Se puede configurar rápidamente para que actúe como un menú desplegable de React o simplemente puede usarlo para brindar información visual más útil agrupando datos. Además, con la agrupación se pueden utilizar tanto datos 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 React desplegable, plantillas y la capacidad de cambiar qué y cómo se muestra en el encabezado, pie de página, cuerpo, lista, etc.
React Dropdown Example
El siguiente ejemplo de lista desplegable de React muestra el uso de un menú desplegable de React interactivo simple en acción con tres opciones básicas para elegir. Vea cómo funciona.
How to use the Dropdown List with Ignite UI for React
Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:
npm install igniteui-react
Luego tendrás que importar elIgrDropdown CSS necesario y registrar su módulo, así:
import { IgrDropdown } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
Para una introducción completa al Ignite UI for React, lee el tema Empezar.
<IgrDropdown>
<div slot="target">
<IgrButton><span>Options</span></IgrButton>
</div>
<IgrDropdownItem><span>Option 1</span></IgrDropdownItem>
<IgrDropdownItem><span>Option 2</span></IgrDropdownItem>
<IgrDropdownItem><span>Option 3</span></IgrDropdownItem>
</IgrDropdown>
Target
La lista desplegable de React está posicionada en relación con su objetivo. Latarget ranura te permite proporcionar un componente integrado que activa laopen propiedad al hacer clic. En algunos casos querrás usar un objetivo externo o usar otro evento para activar la apertura del desplegable. Puedes lograr esto usando losshowTargethide métodos ytoggleTarget que te permiten proporcionar el objetivo como parámetro. Por defecto, la lista desplegable usaabsolute la posición CSS. Tendrás que configurarIgrPositionStrategy el de la React desplegable parafixed que el elemento objetivo esté dentro de un contenedor fijo, pero el desplegable no. La lista desplegable se dimensiona automáticamente según su contenido; si quieres que la lista tenga el mismo ancho que el objetivo, deberías establecer lasameWidth propiedad paratrue.
Position
La colocación preferida del React desplegable puede establecerse usando laplacement propiedad. La ubicación predeterminada del desplegable esbottom-start. Laflip propiedad determina si la colocación debe invertirse si no hay suficiente espacio para mostrar el desplegable en la ubicación especificada. La distancia desde la lista desplegable React hasta su destino puede especificarse usando ladistance propiedad.
Selección
EmiteIgrDropdown elChange evento cuando el usuario selecciona un elemento. Elselect método del Desplegable te permite seleccionar un elemento por su índice o valor.
Item
RepresentaIgrDropdownItem un elemento seleccionable en la lista desplegable. Podrías predefinir un elemento seleccionado estableciendo laselected propiedad. También podrías desactivar un elemento para que no pueda seleccionarse usando esadisabled propiedad. TieneIgrDropdownItem una ranura predeterminada que te permite especificar el contenido del objeto. También podrías proporcionar contenido personalizado para renderizarse antes o después del contenido usando lasprefix ranuras ysuffix. Lavalue propiedad te permite asignar un valor personalizado a un artículo. Si no estávalue activado, se resuelve al contenido de texto del elemento.
Header
Podrías usar elIgrDropdownHeader para proporcionar un encabezado para un grupo de elementos.
Group
Los elementos del React Desplegable también pueden agruparse usando elIgrDropdownGroup, facilitando a los usuarios diferenciar categorías separadas. Míralo en acción en este ejemplo de React lista desplegable:
Scroll Strategy
LascrollStrategy propiedad determina el comportamiento del componente durante el desplazamiento del contenedor del elemento objetivo. El valor por defecto esscroll que significa que el desplegable se desplazará con su objetivo. Configurar la propiedad enblock bloqueará el desplazamiento si se abre el desplegable. También podrías configurar la propiedad paraclose que el desplegable se cierre automáticamente al desplazar.
Keep Open
Por defecto, el desplegable se cierra automáticamente cuando el usuario hace clic fuera de él o selecciona un elemento. Podrías prevenir este comportamiento usando laskeepOpenOnOutsideClick propiedades ykeepOpenOnSelect.
Styling
Puedes cambiar la apariencia del desplegable y sus objetos usando las partes CSS expuestas. ElIgrDropdown Exponebase ylist partes, elIgrDropdownItem Exponeprefix,content ysuffix Partes y elIgrDropdownGroup Exponelabel parte.
igc-dropdown::part(list) {
height: 220px;
}
igc-dropdown-item[selected] {
background: var(--ig-success-300);
}
igc-dropdown-group::part(label) {
display: flex;
justify-content: center;
}