# Panel

API Documentation

Display HTML content on a sidebar on the left of the viewer.

# Example

This example adds a custom button to toggle a panel.

# Methods

# show(config)

Open the side panel.

option type
id string Unique identifier of the panel, this will be used to hide the panel only if the content has not been replaced by something else. It will be used to store the width defined by the user when using the resize handle.
content (required) string HTML content of the panel.
noMargin (default false) boolean Remove the default margins inside the panel.
width (default 400px) string Initial width of the panel (example: 100%, 600px).
clickHandler(target) function<HTMLElement> Function called when the user clicks inside the panel or presses the Enter key while an element focused.

Content focus

After openning, the first focusable element (a, button or anything with tabindex) will be focused, allowing the user to navigate with the Tab key and activate the clickHandler with the Enter key.

# hide([id])

Hide the panel, without condition if id is not provided, or only if the last show was called with the same id.

# isVisible([id]): boolean

Check if the panel is opened.

# Events

# show-panel(id)

Triggered when the panel is shown.

# hide-panel(id)

Triggered when the panel is hidden.