Skip to content

Offcanvas

te-offcanvas slides a panel in from the side. Like the modal, it is teleported to <body>.

Usage

Not shown inline — it is fixed to the viewport edge.

vue
<te-button @click="open = true">Open panel</te-button>

<te-offcanvas v-model="open" title="Filters">
  Panel content.
</te-offcanvas>

Props

PropTypeDefaultDescription
modelValuebooleanfalseSupports v-model.
titlestring''Header text, and the accessible name.
position'left' | 'right''left'Edge it slides from.

Events

EventPayloadDescription
update:modelValuebooleanVisibility changed.

Slots

SlotPropsDescription
defaultPanel body.

Released under the MIT License.