Web Components Dropdown Overview
The Web Components Dropdown is a component, which displays a toggleable list of predefined values and allows users to easily select a single option item with a click. It can be quickly configured to act as a dropdown menu or you can simply use it to deliver more useful visual information by grouping data. With grouping you can use both flat and hierarchical data.
Web Components Dropdown Example
Usage
First, you need to install the Ignite UI for Web Components by running the following command:
npm install igniteui-webcomponents
import {
defineComponents,
IgcDropdownComponent
} from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcDropdownComponent);
The simplest way to start using the IgcDropdownComponent
is as follows:
<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 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 positionStrategy
of the 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 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 Dropdown list to its target can be specified using the distance
property.
Selection
The IgcDropdownComponent
emits the igcChange
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.
Header
You could use the IgcDropdownHeaderComponent
to provide a header for a group of items.
Group
The Dropdown items can also be grouped using the IgcDropdownGroupComponent
, making it easier for users to differentiate separate categories.
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.