< bonaparte-toolbar >

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

• Starter

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