Drawer

A convenient sidebar that can be toggled on or off. When opened, it traps the user's focus so that keyboard navigation will remain within the sidebar until it is closed. It also supports being closed by pressing the ESC key.

• Source

Features:

• Manages tabindex attributes for drawer accessibility.
• Manages aria-haspopup and aria-expanded attributes for toggle button accessibility.
• Maintains focus states to remain within the drawer for keyboard users.
• Adds event listener to close drawer on the esc key.
• Supports preventing page scroll while open.

Styled Examples

Styling

NOTE: drawer background colors have been removed.

To add background colors to the content, you have 3 options:

1. Use the provided .vts-drawer__content class to add a background color:

   .vts-drawer__content {
     color: #000;
     background: #FFF;
   }
   

2. Use the classes prop object to provide a custom class:

   <VDrawer :classes="{ content: 'color-black bg-white' }">
    ...
   </VDrawer>
   

3. Use the slot content to provide a custom class:

   <VDrawer>
     <div class="sidebar">...</div>
   </VDrawer>
   

   .sidebar {
     height: 100%;
     color: #000;
     background: #FFF;
   }
   

Examples

The following styles have been added to this site to make the drawers easier to see:

.color-black {
  color: #000;
}
.bg-white {
  background-color: #FFF;
}
.bg-black-alpha {
  background: rgba(0, 0, 0, 0.2);
}

Using v-model

Right aligned

Prevent page scroll

Add transitions

Custom Classes

This component can accept a classes prop to customize the output HTML classes:

:classes="{ bg: string, content: string }"