Wondering what’s next for npm?Check out our public roadmap! »

    bonaparte-button

    0.0.36 • Public • Published

    < bonaparte-button >

    npm version

    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

    Install

    npm i bonaparte-button

    DownloadsWeekly Downloads

    28

    Version

    0.0.36

    License

    ISC

    Homepage

    bonaparte.io

    Last publish

    Collaborators

    • avatar