Have ideas to improve npm?Join in the discussion! »

bonaparte-sidebar

0.0.36 • Public • Published

< bonaparte-sidebar >

npm version

The sidebar component divides the space into two areas: sidebar and content. The sidebar can be positioned on either side of the content. As opposed to the panel, the sidebar does not overlay the content but pushes it. There can be multiple sidebars open at the same time and they can be nested.

If you plan to only have buttons in the sidebar have a look at <toolbar-bonaparte> instead.

Structure

<bonaparte-sidebar
  position
  open
>
  <1st-child> <!-- sidebar -->
  
  <2nd-child> <!-- content --> 
  
</bonaparte-sidebar>

<1st-child> Sidebar

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

<2nd-child> Content

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

Attributes

open

Defines if the sidebar is open/visible.

  • Default true
  • Values false true

position

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

  • Default left
  • Values top right bottom left

Events

bonaparte.sidebar.open

Triggers when the sidebar opens.

  • Source <bonaparte-sidebar>
  • Bubbles Yes

bonaparte.sidebar.close

Triggers when the sidebar closes.

  • Source <bonaparte-sidebar>
  • Bubbles Yes

Install

npm i bonaparte-sidebar

DownloadsWeekly Downloads

5

Version

0.0.36

License

ISC

Homepage

bonaparte.io

Last publish

Collaborators

  • avatar