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
The React Dropdown list is positioned relatively to its target. The target slot allows you to provide a built-in component which toggles the open property on click. In some cases you would want to use an external target or use another event to toggle the opening of the Dropdown. You can achieve this using the showTarget, hide and toggleTarget methods which allow you to provide the target as a parameter. By default, the Dropdown list uses absolute CSS position. You will need to set the IgrPositionStrategy of the React Dropdown to fixed when the target element is inside a fixed container, but the Dropdown is not. The Dropdown list is automatically sized based on its content, if you want the list to have the same width as the target, you should set the sameWidth property to true.
Position
The preferred placement of the React Dropdown can be set using the placement property. The default placement of the Dropdown is bottom-start. The flip property determines whether the placement should be flipped if there is not enough space to display the Dropdown at the specified placement. The distance from the React Dropdown list to its target can be specified using the distance property.
Selección
The IgrDropdown emits the Change event when the user selects an item. The select method of the Dropdown allows you to select an item by its index or value.
Item
The IgrDropdownItem represents a selectable item in the Dropdown list. You could predefine a selected item by setting the selected property. You could also disable an item so that it can't be selected using the disabled property. The IgrDropdownItem has a default slot which allows you to specify the content of the item. You could also provide custom content to be rendered before or after the content using the prefix and suffix slots. The value property allows you to provide a custom value to an item. If the value is not set, it resolves to the text content of the item.
Header
You could use the IgrDropdownHeader to provide a header for a group of items.
Group
The React Dropdown's items can also be grouped using the IgrDropdownGroup, making it easier for users to differentiate separate categories. See it in action in this React Dropdown List example:
Scroll Strategy
The scrollStrategy property determines the behavior of the component during scrolling the container of the target element. The default value is scroll which means that the Dropdown will be scrolled with its target. Setting the property to block will block the scrolling if the Dropdown is opened. You could also set the property to close which means that the Dropdown will be closed automatically on scroll.
Keep Open
By default, the Dropdown is closed automatically when the user clicks outside of it or selects an item. You could prevent this behavior using the keepOpenOnOutsideClick and keepOpenOnSelect properties.
Styling
You can change the appearance of the Dropdown and its items, by using the exposed CSS parts. The IgrDropdown exposes base and list parts, the IgrDropdownItem exposes prefix, content and suffix parts and the IgrDropdownGroup exposes label part.
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;
}