Dropdown

A dropdown is simply a popover with a different design and a different default visibility behavior.

NOTE

You should read the Popover doc first, because everything that applies to a popover also applies to a dropdown.

Here we'll only look at the specifics of a dropdown.

Usage

To create a dropdown, create a bt-dropdown inside the element you want the dropdown to show under. It expects bt-dropdown-item elements inside for the design to work properly:

<bt-dropdown>
    <bt-dropdown-item>Item A</bt-dropdown-item>
    <bt-dropdown-item>Item B</bt-dropdown-item>
    <bt-dropdown-item>Item C</bt-dropdown-item>
</bt-dropdown>

The popover is under me

NOTE

Where the visibility of a popover is (by default) controlled by mouse events on the target element, the default behavior of dropdowns is to be visible as soon as they are placed in the DOM.

Divider

You can visually separate your dropdown's items via the bt-dropdown-divider component:

<bt-dropdown>
    <bt-dropdown-item>Item A</bt-dropdown-item>
    <bt-dropdown-item>Item B</bt-dropdown-item>
    <bt-dropdown-item>Item C</bt-dropdown-item>
    <bt-dropdown-divider></bt-dropdown-divider>
    <bt-dropdown-item>Item 1</bt-dropdown-item>
    <bt-dropdown-item>Item 2</bt-dropdown-item>
    <bt-dropdown-item>Item 3</bt-dropdown-item>
    <bt-dropdown-divider></bt-dropdown-divider>
    <bt-dropdown-item>Last</bt-dropdown-item>
</bt-dropdown>

The popover is under me

Theming

Below the list of all CSS variables and selectors available to customize the appearance of the component. If you're not familiar on how the theming works, please refer to the VueThemes documentation.

Variables

All variables of Popover +

Variable	Default	Comment
minWidth	12rem	-
maxHeight	25vh	-

Selectors

All selectors of Popover +

Name	Comment
item	An item of the dropdown.
divider	Items separators.

Examples:

cssSelectors: {
    root: {
        background: '...'
    },
    divider: {
        background: '...'
    }
}