Edit This Page

< bonaparte-toolbar >

npm version

The toolbar component is a specialized bonaparte sidebar which contains button groups.

The toolbar inherits all the functionality from <bonaparte-sidebar>. In addition child elements of the sidebar are handled as button groups and spread evenly from left to right / top to bottom.

Examples

Structure

<bonaparte-toolbar
  open
  position
>
    <1st-child> <!-- toolbar -->
        <nth-child> <!-- group -->
    </1st-child>

    <2nd-child> <!-- content -->

</bonaparte-toolbar>

<1st-child> Toolbar

Place on one side of the content according to the sidebar attribute.

<1st-child> <nth-child> Group

Each child of the toolbar is considered a button group. Groups are spread out evenly long the toolbar.

<2nd-child> Content

Holds the main content. The toolbar is placed around this element.

Attributes

open

Defines if the toolbar is open/visible.

  • Default true
  • Values false true

position

Defines the position of the toolbar relative to the content area.

  • Default left
  • Values top right bottom left

Events

bonaparte.toolbar.open

Triggers when the toolbar opens.

  • Source <bonaparte-toolbar>
  • Bubbles Yes

bonaparte.toolbar.close

Triggers when the toolbar closes.

  • Source <bonaparte-toolbar>
  • Bubbles Yes