Web Components Componente de lista desplegable - Descripción general

    Rica en funciones, la lista desplegable de Web Components 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 Web Components 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 Web Components 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 Web Components desplegable, plantillas y la capacidad de cambiar qué y cómo se muestra en el encabezado, pie de página, cuerpo, lista, etc.

    Web Components Dropdown Example

    El siguiente ejemplo de lista desplegable de Web Components muestra el uso de un menú desplegable de Web Components 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 Web Components

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    import {
    defineComponents,
    IgcDropdownComponent
} from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDropdownComponent);

    Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

    La forma más sencilla de empezar a usar elIgcDropdownComponent uso 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>

    Target

    La lista desplegable de Web Components 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 losshowTarget​hide 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 configurarIgcPositionStrategy el de la Web Components 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 Web Components 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 Web Components hasta su destino puede especificarse usando ladistance propiedad.

    Selección

    EmiteIgcDropdownComponent elChange evento cuando el usuario selecciona un elemento. Elselect método del Desplegable te permite seleccionar un elemento por su índice o valor.

    Item

    RepresentaIgcDropdownItemComponent 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. TieneIgcDropdownItemComponent 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.

    Podrías usar elIgcDropdownHeaderComponent para proporcionar un encabezado para un grupo de elementos.

    Group

    Los elementos del Web Components Desplegable también pueden agruparse usando elIgcDropdownGroupComponent, facilitando a los usuarios diferenciar categorías separadas. Míralo en acción en este ejemplo de Web Components 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. ElIgcDropdownComponent Exponebase ylist partes, elIgcDropdownItemComponent Exponeprefix,content ysuffix Partes y elIgcDropdownGroupComponent 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;
}

    API Reference

    Additional Resources