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#

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

Usage#

Basic Drawer#

Editable Example 
<template>
  <div>
    <c-button ref="btnRef" @click="isOpen =true">Open Drawer</c-button>

    <c-drawer :isOpen="isOpen" placement="right" :on-close="close" :initialFocusRef="()=>$refs.inputInsideModal">
      <c-drawer-overlay />
      <c-drawer-content>
      <c-drawer-close-button />
      <c-drawer-header>Create your account</c-drawer-header>

      <c-drawer-body>
        <c-input ref="inputInsideModal" placeholder="Type here..." />
      </c-drawer-body>

      <c-drawer-footer>
        <c-button variant="outline" mr="3" @click="isOpen = false">Cancel</c-button>
        <c-button variant-color="blue">Save</c-button>
      </c-drawer-footer>
      </c-drawer-content>
    </c-drawer>
  </div>
</template>

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

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.

Editable Example 
<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.

Editable Example 
<template>
  <div>
    <c-button ref="btnRef" left-icon="add" variant-color="vue" @click="isOpen =true">Create user</c-button>

    <c-drawer
      :isOpen="isOpen"
      placement="right"
      :on-close="close"
      :initialFocusRef="() => $refs.firstField"
      :finalFocusRef="$refs.btnRef"
    >
      <c-drawer-overlay />
      <c-drawer-content>
      <c-drawer-close-button />
      
      <c-drawer-header>
        Create a new account
      </c-drawer-header>

      <c-drawer-body>
        <c-form-control>
          <c-stack spacing="24px">
              <c-box>
                <c-form-label for="username">Name</c-form-label>
                <c-input
                  ref="firstField"
                  id="username"
                  placeholder="Please enter user name"
                />
              </c-box>

              <c-box>
                <c-form-label for="url">Url</c-form-label>
                <c-input-group>
                  <c-input-left-addon>https://</c-input-left-addon>
                  <c-input
                    type="url"
                    id="url"
                    placeholder="Please enter website"
                    rounded="0"
                  />
                  <c-input-right-addon>.com</c-input-right-addon>
                </c-input-group>
              </c-box>

              <c-box>
                <c-form-label for="owner">Select Owner</c-form-label>
                <c-select id="owner" v-model="owner">
                  <option value="jonathan">Jonathan Bakebwa</option>
                  <option value="mesut">Mesut Koca</option>
                  <option value="kelvin">Kelvin Omereshone</option>
                </c-select>
              </c-box>

              <c-box>
                <c-form-label for="desc">Description</c-form-label>
                <c-textarea id="desc" />
              </c-box>
          </c-stack>
        </c-form-control>
      </c-drawer-body>

      <c-drawer-footer>
        <c-button mr="3" @click="isOpen = false">Cancel</c-button>
        <c-button variant-color="blue">Save</c-button>
      </c-drawer-footer>
      </c-drawer-content>
    </c-drawer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isOpen: false,
      owner: 'jonathan'
    }
  },
  methods: {
    close () {
      this.isOpen = false
    }
  }
}
</script>

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

NameTypeDefaultDescription
isFullHeightbooleanfalseIf true and placement is set to top or bottom, the drawer fills the height of the viewport.
placementleft, right, top, bottomrightThe ref to the initial element to receive focus when the drawer opens.

Other components#

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

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!