vwc-dropdown 2.44.0
Install from the command line:
Learn more about npm packages
$ npm install @vonage/vwc-dropdown@2.44.0
Install via package.json:
"@vonage/vwc-dropdown": "2.44.0"
About this version
vwc-dropdown is a surfacing content component, dropdown, showing up on demand, eg upon user action.
vwc-dropdown, in contrast to vwc-menu, allows a free content provided by consumer, while structuring the internal body with slots: header, footer and the default content.
Usage example:
<vwc-menu>
<vwc-textfield slot="header">Item 1</vwc-textfield>
<div>
any HTML content can go here as main body
</div>
<vwc-button slot="footer">Done</vwc-button>
</vwc-menu>Initiate vwc-dropdown to be available in your component/application:
import '@vonage/vwc-dropdown';
// or, to be able to use casting in TypeScript, do
import { VWCDropdown } from '@vonage/vwc-dropdown';vwc-dropdown exposes several APIs to provide its fuctionality, namely properties, methods and events.
| Property | Modifiers | Type | Description |
|---|---|---|---|
absolute |
boolean |
||
activatable |
boolean |
||
anchor |
HTMLElement | null |
||
corner |
"TOP_LEFT" | "TOP_RIGHT" | "BOTTOM_LEFT" | "BOTTOM_RIGHT" | "TOP_START" | "TOP_END" | "BOTTOM_START" | "BOTTOM_END" |
||
defaultFocus |
"NONE" | "LIST_ROOT" | "FIRST_ITEM" | "LAST_ITEM" |
||
fixed |
boolean |
||
forceGroupSelection |
boolean |
||
fullwidth |
boolean |
||
index |
readonly | MWCListIndex |
|
innerRole |
"menu" | "listbox" |
||
items |
readonly | ListItemBase[] |
|
menuCorner |
MenuCorner |
||
multi |
boolean |
||
open |
boolean |
||
quick |
boolean |
||
selected |
readonly | ListItemBase | ListItemBase[] | null |
|
slotElement |
HTMLSlotElement | null |
||
wrapFocus |
boolean |
||
x |
number | null |
||
y |
number | null |
| Method | Type |
|---|---|
close |
(): void |
focusItemAtIndex |
(index: number): void |
getFocusedItemIndex |
(): number |
layout |
(updateItems?: boolean | undefined): void |
select |
(index: MWCListIndex): void |
show |
(): void |
| Event | Description |
|---|---|
action |
{ActionDetail} |
closed |
|
opened |
|
selected |
{SelectedDetail} |
