Dropdown Button

<bk-dropdown></bk-dropdown>

The Dropdown Button renders a button which opens a dropdown when hovered. Selection of any element of the dropdown menu triggers an action.

How to configure

The items of the Dropdown Button can be configured through the menuItems property. For each item, a localized label and a Back-kit Action to be execute upon click can be specified. Each action is injected with information on the currently logged user, retrievable with currentUser keyword, as context.

Examples

The Dropdon Button configured as follows provides two actions:

• first action can be triggered selecting the menu item with label "New Rider" (assuming the browser language to be english) and notifies the request to create a new item (emits an add-new event)
• second action is associated to menu item with label "New transport type", and causes to navigate to path "/transport-type"

  {
    "tag": "bk-dropdown",
    "properties": {
      "label": {
        "en": "Create new...",
        "it": "Crea nuovo..."
      },
      "menuItems": [
        {
          "label": {
            "en": "New rider",
            "it": "Nuovo fattorino"
          },
          "action": {
            "type": "event",
            "config": {
              "events": "add-new"
            }
          }
        },
        {
          "label": "New transport type",
          "action": {
            "type": "push",
            "config": {
              "url": "/transport-type"
            }
          }
        }
      ]
    }
  }

API

Properties & Attributes

property	attribute	type	default	description
label	-	LocalizedText		dropdown label
iconId	icon-id	string	-	defines which icon should be rendered in the dropdown, if this property is not defined or doesn't match any icon no icon will be rendered
iconPlacement	-	"default" | "left" | "right"	"default"	defines where icon should be rendered, either left or right defaulting on left
listenToLoadingData	listen-to-loading-data	boolean	false	configures the dropdown to be loading when trigger by a loading-data event
shape	shape	string	'round'	dropdown button shape property
type	type	string	'primary'	dropdown button type property
menuItem	-	DropdownItem[]	-	dropdown menu items configuration

DropdownItem

type DropdownItem = {
  label: LocalizedText,
  action: Action
}

where Action type refers to the Back-kit Action interface, and LocalizedText is either a string or an object mapping language acronyms to strings.

Listens to

event	description
loading-data	notifies that loading state should be entered. Ignored if property listenToLoadingData is not set to true

Emits

event	description
configurable event	generic event configurable through the event type configuration
error	contains error messages for an http event
success	notifies a successful http request