Dropdown (dropdown)
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision.
| ID | Label | Description | Schema |
|---|---|---|---|
| button_label | Button label | ||
| button_variant | Button variant |
|
|
| button_url | Button URL | If empty, the button action is disabled and trigger the dropdown. If set, the button is split: the first part triggers its action, the second part the dropdown. |
|
| direction | Direction |
|
|
| content | Content |
|
id: dropdown
label: Dropdown
description: 'Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision. '
homepage: 'https://getbootstrap.com/docs/4.6/components/dropdowns/'
slots:
button_label:
id: button_label
label: 'Button label'
props:
button_variant:
id: button_variant
label: 'Button variant'
schema:
type: string
enum:
- primary
- secondary
- success
- danger
- warning
- info
- light
- dark
- link
- outline_primary
- outline_secondary
- outline_success
- outline_danger
- outline_warning
- outline_info
- outline_light
- outline_dark
- primary__lg
- primary__lg__block
- secondary__lg__block
- primary__sm
- secondary__sm
- outline_primary__sm
- outline_secondary__sm
- outline_primary__lg
- outline_primary__lg__block
- outline_secondary__lg__block
- link_primary
button_url:
id: button_url
label: 'Button URL'
description: 'If empty, the button action is disabled and trigger the dropdown. If set, the button is split: the first part triggers its action, the second part the dropdown.'
schema:
type: string
format: uri-reference
direction:
id: direction
label: Direction
schema:
type: string
enum:
1: up
2: right
3: left
content:
id: content
label: Content
schema:
type: array
items:
type: object
properties:
title:
type: string
attributes:
$ref: '#/$defs/attributes_value'
below:
type: object
library:
js:
'https://data.dilla.io/bootstrap_4/components/dropdown/init.js': { }
id: dropdown
examples:
preview:
id: preview
label: Preview
renderable:
'@component': dropdown
button_label: 'Dropdown button'
button_variant: primary
button_url: /
content:
-
title: Action
url: '#'
-
title: 'Another action'
url: '#'
-
title: 'Something else here'
url: '#'