SfDrawer is a container that can be anchored to the left, right, top or bottom edge of the screen. This can be used to create things like navigation drawers, sliding cart views, or anything else that needs to stick to the edge of the screen. It also adds additional functionality like closing when the user clicks outside of the drawer or presses the escape key.
Examples
Basic Usage
SfDrawer supports 4 different placements that can be set via placement prop: top, right, bottom, left. To open/close the drawer, you can use v-model.
By default, SfDrawer will emit update:modelValue when the user clicks outside of the drawer or presses the escape key. These behaviors can be disabled by setting the disableClickAway and disableEsc props to true.
Drawer transition and trap focus
You can wrap SfDrawer in a <transition> (opens new window) component to add enter/exit animations. Additionally, you can use the useTrapFocus composable for better control of focusable elements inside.
Accessibility notes
The component is providing keyboard accessibility with @keydown.esc="onEscKeyDown" and onClickOutside function which allows users to close the drawer by pressing the Escape key or click outside of the drawer.