Componente de lista desplegable Blazor: descripción general
La lista desplegable Blazor, 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 Blazor muestra una lista de alternancia de valores predefinidos y permite a los usuarios seleccionar fácilmente un elemento de opción única con un clic. Se puede configurar rápidamente para que actúe como un menú desplegable Blazor 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 Blazor Dropdown, plantillas y capacidad de cambiar qué y cómo se muestra en el encabezado, pie de página, cuerpo, lista, etc.
Blazor Dropdown Example
El siguiente ejemplo de lista desplegable Blazor demuestra el uso del menú desplegable interactivo simple Blazor en acción con tres opciones básicas para elegir. Mira cómo funciona.
How to use the Dropdown List with Ignite UI for Blazor
Antes de utilizar IgbDropdown, debe registrarlo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbDropdownModule));
Target
La lista desplegable Blazor 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 Blazor 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 Blazor se puede establecer mediante la propiedad Placement. La ubicación predeterminada del menú desplegable es bottom-start. La propiedad Flip determina si la ubicación se debe invertir si no hay suficiente espacio para mostrar el menú desplegable en la ubicación especificada. La distancia desde la lista desplegable Blazor hasta su objetivo se puede especificar mediante la propiedad Distance.
Selección
Emite IgbDropdown 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
IgbDropdownItem 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. IgbDropdownItem 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 el Value no está establecido, se resuelve en el contenido de texto del elemento.
Header
Puede utilizar IgbDropdownHeader para proporcionar un encabezado para un grupo de elementos.
Group
Los elementos de Blazor Dropdown también se pueden agrupar utilizando IgbDropdownGroup, lo que facilita a los usuarios diferenciar categorías separadas. Véalo en acción en este ejemplo de lista desplegable Blazor:
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. IgbDropdown expone partes base y list, IgbDropdownItem expone partes prefix, content y suffix y IgbDropdownGroup expone parte label.