Set if the dropdown is disabled.
Protected ReadonlyeaOptionalgetAn optional function to asynchronously get items to show in the dropdown.
import { DropdownItem } from "@nospamproxy/core";
class Example {
private getItems = async (search: string, limit: number): DropdownItem[] => {
return [
{ id: 0, value: "Foo" },
{ id: 1, value: "Bar" },
{ id: 2, value: "Bar" },
].filter(item => item.value.toLowerCase().includes(search.toLowerCase()));
};
}
<dropdown-control get-items.bind="getItems" search="auto"></dropdown-control>
Protected Readonlyi18nAn array of available items.
The maximum number of items to show at the same time when using getItems.
Note, that
limit + 1is passed to thegetItemsfunction to check if there are more items.
OptionalresourceResource prefix to use for display texts in the dropdown.
The following keys are optional:
The following keys are required when the dropdown is searchable:
The maximum number of item rows to show before enable scrolling.
By default this is limited to 5 rows if search is enabled and 15 if search is disabled.
Set if search is enabled.
getItems function is bound or if there are at least 5 items available.The currently selected item id.
This will be modified by the dropdown when the selection is changed by the user or via the view model api.
Protected ReadonlyselectionA signal that can be used by extending classes when the selected items have changed.
Protected ReadonlysignalerTrue to display items in alphabetical order.
An event channel that the dropdown content subscribes to to get notified when the popout state changes. The popout instance must be passed as the first argument.
Set how the dropdown button looks.
Set a fixed width for the dropdown container.
An array of items as they are currently displayed.
ProtectedcomputeProtectedgetGet the current display text of the dropdown button.
Protected OptionalhideProtectedrefreshProtectedselected
Base class to encapsulate logic for dropdown content.