Basic Usage

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

<template>
  <CButton
    label="Click to open drawer"
    @click="show = true"
  />

  <CDrawer
    v-model="show"
    title="Hi, there"
  >
    Some drawer content
  </CDrawer>
</template>

Click to open/fold code

Open Vue Repl Editor

Positions

<script setup>
import { ref } from 'vue'
import {
  matArrowBack,
  matArrowDownward,
  matArrowForward,
  matArrowUpward,
} from '@quasar/extras/material-icons/index'

const show = ref(false)
const position = ref('left')

function openWithPosition(pos) {
  position.value = pos
  show.value = true
}
</script>

<template>
  <div class="c-flex c-gutter-md c-wrap">
    <div>
      <c-button
        icon
        @click="openWithPosition('left')"
      >
        <c-icon :content="matArrowBack" />
      </c-button>
    </div>
    <div>
      <c-button
        icon
        @click="openWithPosition('top')"
      >
        <c-icon :content="matArrowUpward" />
      </c-button>
    </div>
    <div>
      <c-button
        icon
        @click="openWithPosition('right')"
      >
        <c-icon :content="matArrowForward" />
      </c-button>
    </div>
    <div>
      <c-button
        icon
        @click="openWithPosition('bottom')"
      >
        <c-icon :content="matArrowDownward" />
      </c-button>
    </div>
  </div>

  <c-drawer
    v-model="show"
    title="Hi, there"
    :position="position"
  >
    I'm some drawer content
  </c-drawer>
</template>

Click to open/fold code

Open Vue Repl Editor

CDrawer API

Props

Slots

Events

modelValue

boolean

Default  false

The drawer shown status. Can be used with v-model.

position

"left" | "top" | "right" | "bottom"

Default  'left'

The position of drawer.

title

string

Default  ''

The title.

width

string

Default  '20vw'

The width of drawer. This is only working when the drawer is left or right.

bodyHeight

string

Default  '20vh'

The height of drawer. This is only working when the drawer is top or bottom.

closeOnClickBackdrop

boolean

Default  true

Determine whether to close the drawer when backdrop clicked or not.