Edit This Page

< bonaparte-panel >

npm version

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

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