< bonaparte-dropdown >

The dropdown component is a temporary UI element that appears along one edge of the <bonaparte-dropdown> tag when open.

Examples

Example Page

Structure

<bonaparte-dropdown
  action
  handler
  open
  position
>
  <1st-child> <!-- dropdown content -->
 
</bonaparte-dropdown>

`<1st-child>` Dropdown content

Container which is placed along one edge of <bonaprate-dropdown> and is only visible when open=true.

Attributes

`action`

HTMLEvent that opens the dropdown. (sets open=true)

Default click

`handler`

CSS Selector to specify which element within <bonaparte-dropdown> will trigger the action.

Default By default the whole <bonaparte-dropdown> tag is the handler

`open`

Defines if the dropdown content is visible or not.

Default false
Values false true

`position`

Defines the position of the dropdown content relative to <bonaparte-dropedown>. The first value defines the side the content appears on. The second value defines the edge the content aligns to.

Default bottom left
Values top right bottom left top right top left right top right bottom bottom left bottom right left top left bottom

npm