Skip to content

Sidebar ⚠️ Experimental

The Sidebar component can be used imported from:

Playground

Parameters

Events

This component has events. Check the documentation about how to use the events.

NamePayloadDescription
changebooleanReturns the new value of the model

Slots

This component has slots. Check the documentation about how to use the slots.

NameTagsDescription
defaultspanContent of the sidebar.

Parameters use

Check the documentation about how to use the parameters.

model

Attention!

If you hardcode this value, it will not be reactive and the selection won't change. Use a variable instead and, ideally, a closed loop.

Controls if the sidebar item is shown or not.

Content

config

This parameter is used to set the position of the sidebar. The possible values are left and right. If not set, the default value is right.

Content

Flags

open

This flag is only used to set the initial value with no control loop. Use model to handle the model properly:

Content

Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples

CodeSandbox example