Componente de lista suspensa de Web Components- Visão geral

    Rico em recursos, o Web Components Dropdown list oferece filtragem pronta para uso, acessibilidade, valores pré-selecionados, vinculação de dados flexível, agrupamento, personalização de UI e muito mais. O que esse componente faz na prática é substituir tags de seleção HTML de forma eficaz e fácil, permitindo que os usuários escolham rapidamente um valor não editável de um conjunto predefinido de várias opções.

    O componente Ignite UI for Web Components Dropdown exibe uma lista de alternância de valores predefinidos e permite que os usuários selecionem facilmente um único item de opção com um clique. Ele pode ser configurado rapidamente para atuar como um menu suspenso Web Components ou você pode simplesmente usá-lo para fornecer informações visuais mais úteis agrupando dados. Além disso, com o agrupamento, você pode usar dados simples e hierárquicos.

    Com nosso componente, você obtém todas as funções e opções de personalização necessárias para seu projeto – personalizações de estilo, opções de posicionamento Web Components Dropdown, modelos e capacidade de alterar o que e como é exibido no cabeçalho, rodapé, corpo, lista, etc.

    Web Components Dropdown Example

    O exemplo a seguir Web Components Dropdown List demonstra o uso do menu Web Components Dropdown interativo simples em ação com três opções básicas para escolher. Veja como funciona.

    How to use the Dropdown List with Ignite UI for Web Components

    Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

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

defineComponents(IgcDropdownComponent);

    Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Comecando.

    A maneira mais simples de começar a usar oIgcDropdownComponent é a seguinte:

    <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

    The Web Components 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 IgcPositionStrategy of the Web Components 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 Web Components 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 Web Components Dropdown list to its target can be specified using the distance property.

    Escolha

    The IgcDropdownComponent 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 IgcDropdownItemComponent 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 IgcDropdownItemComponent 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.

    You could use the IgcDropdownHeaderComponent to provide a header for a group of items.

    Group

    The Web Components Dropdown's items can also be grouped using the IgcDropdownGroupComponent, making it easier for users to differentiate separate categories. See it in action in this Web Components 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 IgcDropdownComponent exposes base and list parts, the IgcDropdownItemComponent exposes prefix, content and suffix parts and the IgcDropdownGroupComponent 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;
}

    API Reference

    Additional Resources