Drawer

The Drawer component is a panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.

import {
  CDrawer,
  CDrawerBody,
  CDrawerFooter,
  CDrawerHeader,
  CDrawerOverlay,
  CDrawerContent,
  CDrawerCloseButton,
} from '@chakra-ui/vue';

Usage#

Basic Drawer#

Drawer placement#

The Drawer can appear from any edge of the screen. Pass the placement prop and set it to top, right, bottom, or left.

<template>
  <div>
    <c-radio-group
      is-inline
      :spacing="5"
      mb="6"
      :default-value="placement"
      @change="setPlacement"
    >
      <c-radio value="top">Top</c-radio>
      <c-radio value="right">Right</c-radio>
      <c-radio value="bottom">Bottom</c-radio>
      <c-radio value="left">Left</c-radio>
    </c-radio-group>

    <c-button @click="isOpen =true">Open</c-button>

    <c-drawer :placement="placement" :on-close="close" :isOpen="isOpen">
      <c-drawer-overlay />
      <c-drawer-content>
        <c-drawer-header borderBottomWidth="1px">Basic Drawer</c-drawer-header>
        <c-drawer-body>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </c-drawer-body>
      </c-drawer-content>
    </c-drawer>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        isOpen: false,
        placement: 'right'
      }
    },
    methods: {
      setPlacement(value) {
        this.placement = value
      },
      close () {
        this.isOpen = false
      }
    }
  }
</script>

Focus on specific element#

When a form is in the drawer, you might need to set focus on a specific element when the drawer opens. Pass the initialFocusRef prop.

Without the initialFocusRef prop, the drawer will set focus on the first focusable element when it opens.

Accessibility#

• When opening the Drawer, focus is trapped inside the CDrawer.
• By default, the drawer sets focus on the first focusable element. If the initialFocusRef prop is passed, the drawer sets focus on the element with the assigned ref.
• After the CDrawer closes, it'll return focus to the element that triggered it.

Props#

CDrawer Props#

CDrawer composes the CModal component with these extra props. So all Modal props apply here. See Modal component for list of props

Other components#

• CDrawerOverlay, CDrawerFooter, CDrawerHeader and CDrawerBody composes CBox component
• CDrawerCloseButton composes CCloseButton