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 Ejemplo de menú desplegable

    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.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Cómo usar la lista desplegable con Ignite UI for Web Components

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

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

defineComponents(IgcDropdownComponent);
ts

    Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

    La forma más sencilla de comenzar a utilizar IgcDropdownComponent 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>
html

    Objetivo

    La lista desplegable Web Components se coloca en relación con su destino. La target ranura le permite proporcionar un componente incorporado que alterna la propiedad con un open clic. En algunos casos, es posible que desee usar un destino externo o usar otro evento para alternar la apertura del menú desplegable. Puede lograr esto utilizando los showTarget métodos , hide y toggleTarget que le permiten proporcionar el objetivo como parámetro. De forma predeterminada, la lista desplegable utiliza absolute la posición CSS. Deberá establecer el menú desplegable de Web Components IgcPositionStrategy 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.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Posición

    La ubicación preferida del menú desplegable Web Components se puede establecer mediante la placement propiedad. La ubicación predeterminada del menú desplegable es bottom-start. La flip propiedad determina si se debe invertir la ubicación si no hay suficiente espacio para mostrar el menú desplegable en la ubicación especificada. La distancia desde la lista desplegable Web Components hasta su destino se puede especificar mediante la distance propiedad.

    EXAMPLE
    TS
    HTML
    DropDownPositionStyles.css
    index.css
    Edit in:

    Selección

    Emite IgcDropdownComponent 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.

    Artículo

    El IgcDropdownItemComponent 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. El IgcDropdownItemComponent 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 no se establece el value, se resuelve en el contenido de texto del elemento.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Puede utilizar IgcDropdownHeaderComponent para proporcionar un encabezado para un grupo de elementos.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Grupo

    Los elementos del menú desplegable de Web Components también se pueden agrupar mediante el IgcDropdownGroupComponent, lo que facilita a los usuarios la diferenciación de categorías separadas. Véalo en acción en este ejemplo de lista desplegable de Web Components:

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Estrategia de desplazamiento

    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.

    Mantener abierta

    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.

    Ignite UI for Web Components | CTA Banner

    Estilo

    Puede cambiar la apariencia del menú desplegable y sus elementos utilizando las partes CSS expuestas. IgcDropdownComponent expone partes base y list, IgcDropdownItemComponent expone partes prefix, content y suffix y IgcDropdownGroupComponent expone parte label.

    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;
}
css

    EXAMPLE
    TS
    HTML
    DropDownStyling.css
    index.css
    Edit in:

    Referencia de API

    Recursos adicionales