Blazor Componente de lista desplegable - Descripción general
Rica en funciones, la lista desplegable de Blazor 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 Blazor 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 Blazor 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 Blazor desplegable, plantillas y la 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 de Blazor muestra el uso de un menú desplegable de Blazor 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 Blazor
Antes de usarlosIgbDropdown, debes registrarlo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbDropdownModule));
Target
La lista desplegable de Blazor 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 losShowHide métodos yToggle que te permiten proporcionar el objetivo como parámetro. Por defecto, la lista desplegable usaabsolute la posición CSS. Tendrás que configurarIgbPositionStrategy el de la Blazor 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 Blazor 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 Blazor hasta su destino puede especificarse usando laDistance propiedad.
Selección
EmiteIgbDropdown elChange evento cuando el usuario selecciona un elemento. ElSelect método del Desplegable te permite seleccionar un elemento por su índice o valor.
Item
RepresentaIgbDropdownItem 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. TieneIgbDropdownItem 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 elIgbDropdownHeader para proporcionar un encabezado para un grupo de elementos.
Group
Los elementos del Blazor Desplegable también pueden agruparse usando elIgbDropdownGroup, facilitando a los usuarios diferenciar categorías separadas. Míralo en acción en este ejemplo de Blazor 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. ElIgbDropdown Exponebase ylist partes, elIgbDropdownItem Exponeprefix,content ysuffix Partes y elIgbDropdownGroup 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;
}