Themes
Layout/Components/es-panel
es-panel

A resizable panel. Automatically sets the relevant layout var based on it's size and when resized.

Props

Name
Description
Type
Default
area

Where to place the panel.

banner
or
cookie
or
panel
or
sidebar
or
toolbar
panel
closeAt

When to snap the panel closed (if a closed mode is set).

number
100
closedMode

How the panel should respond to being closed.

collapsed
or
none
none
closedSize

How large the panel should be when closed.

number
34
defaultSize

What size to default to.

number
200
end

Where to end the panel, inclusive. Must be the opposite axis to the area.

banner
or
body
or
cookie
or
edge
or
panel
or
sidebar
or
toolbar
or
undefined
maximumSize

The maximum possible size to resize to.

number
Infinity
minimumSize

The minimum possible size to resize to.

number
100
rememberMode

If the last mode of the panel should be kept in local storage.

boolean
or
string
or
undefined
rememberSize

If the size of the panel should be kept in local storage.

boolean
or
string
or
undefined
start

Where to start the panel, inclusive. Must be the opposite axis to the area.

banner
or
body
or
cookie
or
edge
or
panel
or
sidebar
or
toolbar
or
undefined

Events

Event
Detail
Description
modeChange
"collapsed" | "inline"

Triggers when the panel's mode changes.

Parts

Name
Description
handle

The grabbable handle

handle collapsed

The handle while collapsed

handle inline

The handle while inline

handle_icon

The handle grips icon

inner

The wrapping aside of the panel.