This page is about version 0.9.0 of the app, which is not the most recent version. The latest stable version is 0.18.3.
This component allows you to have a sliding drawer for your menus. This is specially handy for mobile layouts.
Basic Usage
To configure or customize this app, you need to import it in your dependencies in your manifest.json file.
_10dependencies: {_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' |
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' |
Styles API
This app provides some CSS classes as an API for style customization.
To use this CSS API, you must add the styles builder and create an app styling CSS file.
- Add the
stylesbuilder to yourmanifest.json:
_10"builders": {_10 "styles": "1.x"_10}
- Create a file called
vtex.store-drawer.cssinside thestyles/cssfolder and add your custom using regular CSS.
CSS Namespaces
Below, we describe the namespaces that are defined in the store-drawer.
| Token name | Description |
|---|---|
drawer | The main container of the Drawer component. |
drawerHeader | The container of the DrawerHeader component. |
openIconContainer | The container of icon that opens the Drawer when clicked. |
closeIconContainer | The container of icon that closes the Drawer when clicked. |
closeIconButton | The button around of the icon that closes the Drawer when clicked. |
childrenContainer | The container of children blocks passed to Drawer. |