bonaparte-button

< bonaparte-button >

The button component is a tool to manipulate attributes on HTML elements.

A button defines target-attributes which it updates on the target element when its action is triggered.

On activation, the button syncs all the target-attributes with the attibutes on the target elements. When all target-attributes match all attributes on the target elements, the active-class is set.

Examples

• Dropdown Example Page
  Although it's the example page for bonaparte-dropdown, all the functionality on the page is achieved through bonaparte-button – There is no custom JavaScript on the page.
• Starter

Structure

<bonaparte-button
  action
  active-class
  bubbles
  shortcut
  target
  target-[attribute]
  toggle
  trigger
>
</bonaparte-button>

Attributes

action

HTMLEvent that triggers the button

• Default click

active-class

Class to be added when all target-attributes match the attributes on the target.

• Default active

bubbles

Defines if the action-event bubbels up the DOM

• Default true
• Values true false

shortcut

Keyboard shortcut to trigger this button.

• Values k command+shift+k command+k enter See Mousetrap

target

CSS Selector defining the elements this button affects

target-[attribute]

[attribute]: An attribute on the target element.

Defines an attribute value this button will set on the target element when it is triggered by the action.

toggle

Allows the button to restore the targets state when clicked a second time.

• Default false
• Values
  • false: Clicking the button again will set the button state again.
  • true: Clicking the button again will revert the elements state.
  • attribute, attribute: Comma separated list of attributes that should toggle

trigger

HTMLEvent that will be triggered on the target-element