Skip to content

vwc-dropdown 2.43.0

Install from the command line:
Learn more about npm packages
$ npm install @vonage/vwc-dropdown@2.43.0
Install via package.json:
"@vonage/vwc-dropdown": "2.43.0"

About this version

vwc-dropdown

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

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';

API

vwc-dropdown exposes several APIs to provide its fuctionality, namely properties, methods and events.

Properties

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

Methods

Method Type
close (): void
focusItemAtIndex (index: number): void
getFocusedItemIndex (): number
layout (updateItems?: boolean | undefined): void
select (index: MWCListIndex): void
show (): void

Events

Event Description
action {ActionDetail}
closed
opened
selected {SelectedDetail}

Details

Assets

  • vwc-dropdown-2.43.0.tgz

Download activity

  • Total downloads 0
  • Last 30 days 0
  • Last week 0
  • Today 0

Recent versions

View all