bonaparte-panel

< bonaparte-panel >

A panel is a temporary UI element that slides in from one side and overlays the content. There can only be one panel open at a time. Clicking outside of a panel or opening an second panel will close the currently open one.

For a permanent sidebar that doesn't overlay the content use <sidebar-bonaparte>

Examples

• Starter

Structure

<!-- Position relative to parent element. Parent must not be position:static. -->
<bonaparte-panel
  open
  position
>
</bonaparte-panel>

Attributes

open

Defines if the panel is visible or not.

• Default false
  
• Values false true

position

Defines the position of the panel relative to it's parent container.

• Default left
  
• Values top right bottom left

Events

bonaparte.panel.open

Triggers when the panel opens.

• Source <bonaparte-panel>
  
• Bubbles Yes

bonaparte.panel.close

Triggers when the panel closes.

• Source <bonaparte-panel>
  
• Bubbles Yes