Sheet

Off-Canvas container.

Usage

Simple Usage

<template>
  <p-sheet v-model="isOpen">
    <div class="p-4">
      Hello World
    </div>
  </p-sheet>
</template>

<script setup lang="ts">
  const isOpen = ref(true)
</script>

Position

There are 4 positions you can use, left, right, top and bottom. Default is left.

<template>
  <p-sheet v-model="model" position="left">
    <div class="p-4">
      Position Left
    </div>
  </p-sheet>
  <p-sheet v-model="model2" position="top">
    <div class="p-4">
      Position Top
    </div>
  </p-sheet>
  <p-sheet v-model="model3" position="right">
    <div class="p-4">
      Position Right
    </div>
  </p-sheet>
  <p-sheet v-model="model4" position="bottom">
    <div class="p-4">
      Position Bottom
    </div>
  </p-sheet>
</template>

Sizing

There are 4 sizes you can use, sm, md, lg and xl. Default is sm.

<template>
  <p-sheet v-model="modelSM" size="sm">
    <div class="p-4">
      Small
    </div>
  </p-sheet>
  <p-sheet v-model="modelMD" size="md">
    <div class="p-4">
      Medium
    </div>
  </p-sheet>
  <p-sheet v-model="modelLG" size="lg">
    <div class="p-4">
      Large
    </div>
  </p-sheet>
  <p-sheet v-model="modelXL" size="xl">
    <div class="p-4">
      Extra Large
    </div>
  </p-sheet>
</template>

API

Props

Props	Type	Default	Description
position	String	left	Sheet positions, valid value: left, right, top, bottom
size	String	sm	Sheet size, valid value: sm, md, lg, xl
noCloseOnEsc	Boolean	false	No close modal while Escape was pressed
noCloseOnBackdrop	Boolean	false	Disabled close when click on backdrop

Slots

Name	Description
default	Content to place inside the sheet

Events

Name	Arguments	Description
close	-	Event when sheet wµill closed

See Also

• Card
• Modal