This page is about version 0.12.1 of the app, which is not the most recent version. The latest stable version is 0.17.1.
This component allows you to have a sliding drawer for your menus. This is specially handy for mobile layouts.
Configuration
Add the app to your theme's dependencies on the manifest.json, for example:
_10"dependencies": {_10 "vtex.store-drawer": "0.x"_10}
Then, you need to add the drawer block into your app. The following is an example taken from Store Theme.
_16"drawer": {_16 "children": [_16 "menu#drawer"_16 ]_16},_16_16"menu#drawer": {_16 "children": [_16 "menu-item#category-clothing",_16 "menu-item#category-decoration",_16 "menu-item#custom-sale"_16 ],_16 "props": {_16 "orientation": "vertical"_16 }_16},
There is also a block that can be used for customizing the icon that triggers the opening of the drawer, it's called "drawer-trigger" and can be used as follows:
_25"drawer": {_25 "children": [_25 "menu#drawer"_25 ],_25 "blocks": ["drawer-trigger"]_25},_25_25"drawer-trigger": {_25 "children": ["rich-text#open-drawer"]_25},_25_25"rich-text#open-drawer": {_25 "text": "Open drawer"_25}_25_25"menu#drawer": {_25 "children": [_25 "menu-item#category-clothing",_25 "menu-item#category-decoration",_25 "menu-item#custom-sale"_25 ],_25 "props": {_25 "orientation": "vertical"_25 }_25},
And there is a block that enables customization of the header that contains the button which closes the drawer.
It's called "drawer-header" and can be used in a similar way as "drawer-trigger", here is an example:
_14// inside blocks.json_14{_14 "drawer": {_14 "blocks": ["drawer-header#my-drawer"]_14 },_14 "drawer-header#my-drawer": {_14 "children": [_14 // you need to include the block `drawer-close-button` somewhere inside here_14 "flex-layout.row#something",_14 // ..._14 "drawer-close-button"_14 ]_14 }_14}
If you're using this component by itself, you just need to import it inside the component you want to use it in. Here's an example:
_20import { Drawer, DrawerHeader, DrawerCloseButton } from 'vtex.store-drawer'_20_20const Menu = () => (_20 <Drawer_20 header={_20 <DrawerHeader>_20 <DrawerCloseButton />_20 </DrawerHeader>_20 }_20 >_20 <ul>_20 <li>Link 1</li>_20 <li>Link 2</li>_20 <li>Link 3</li>_20 <li>Link 4</li>_20 <li>Link 5</li>_20 <li>Link 6</li>_20 </ul>_20 </Drawer>_20)
Configuration
The Drawer component accepts a few props that allow you to customize it.
| Prop name | Type | Description | Default value |
|---|---|---|---|
maxWidth | number or string | Define the open Drawer's maximum width. | 450 |
isFullWidth | Boolean | Control whether or not the open Drawer should occupy the full available width. | false |
slideDirection | 'horizontal'|'vertical'|'rightToLeft'|'leftToRight' | Controls the opening animation's direction. | 'horizontal' |
backdropMode | 'default'|'none' | Controls if it should display the backdrop when the Drawer is open |
The DrawerCloseButton accepts the following props to customize it:
| Prop name | Type | Description | Default value |
|---|---|---|---|
size | Number | Define the size of the icon inside the button | 30 |
type | 'filled'|'line' | Define the type of the icon | 'line' |
Customization
In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.
| CSS Handles |
|---|
drawer |
opened |
closed |
moving |
drawerContent |
drawerHeader |
openIconContainer |
closeIconContainer |
closeIconButton |
childrenContainer |