Canvas

ECanvas is similar to the EModal component, often hidden and displayed when triggered. However, off-canvas is frequently used as a sidebar navigation menu. Demo Here

Usage

<template>
  <EBtn @click="isCanvasShown = !isCanvasShown">Open Canvas</EBtn>
  <ECanvas v-model="isCanvasShown">
    <template #header> Canvas title</template>
    <template #body>
      Canvas content
    </template>
  </ECanvas>
</template>

<script setup>
  const isCanvasShown = ref(false);
</script>

The type of v-model is Boolean.

Props

For ECanvas component, the following props are available:

Prop	Type	Default	Note
teleport	Boolean	true	Enables vue teleport.
blurEffect	Boolean	true	Applies background blur.
width	String	-	Sets the component's width.
height	String	-	Sets the component's height.
bodyClasses	String	-	Overrides or extends the component's body styles.
square	Boolean	false	Removes rounded corners of the element.
closeIcon	Boolean	true	Adds close icon to canvas header.
modelValue	Boolean	false	Controls the visible/hidden state of canvas.
persistent	Boolean	false	persistent ECanvas is not discarded when touching outside.
position	String	"left"	The ECanvas element can appear from the left, right, top or bottom edge of the viewport.

Emits

The ECanvas component contains following emits.

Emit	Description
update:modelValue	Toggles canvas active state.

Slots

The ECanvas component provides following slots that enable you to customize the content.

Slot	Description
header	The slot used for the header of the canvas.
body	The slot used for the canvas card body.
footer	The slot used for the canvas card footer.