:warning: The modal block has been deprecated in favor of the Modal Layout app. Although support for this block is still granted, we strongly recommend you to update your store theme with the Modal Layout's blocks in order to keep up with the component's evolution.
Description
The VTEX Modal is the block to use when you want to display another block in a VTEX app.
It renders a button and when you click it, it opens the modal with its children component rendered.
:loudspeaker: Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request
Table of Contents
Usage
This app uses our store builder with the blocks architecture. To know more about Store Builder click here.
To use this app or override the default CSS you need import it in your dependencies on manifest.json
file.
_10 "dependencies": {_10 "vtex.modal": "0.x"_10 }
Then, use the modal
block in your blocks.json
like:
_10"modal": {_10 "children": ["rich-text"],_10 "props": { _10 "centered": true,_10 "blockClass": "home-modal",_10 "buttonClass": "t-heading-5",_10 "showCloseIcon": false_10 }_10 }
Blocks API
When implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within modal and describes if they are required or optional.
_10{_10 "modal": {_10 "allowed": "*",_10 "component": "index",_10 "composition": "children"_10 }_10}
For now this block does not have any required or optional blocks. It allows you to render any block as its children.
Configuration
Through the Storefront, you can change the modal's behavior and interface. However, you also can make in your theme app, as Store theme does.
Prop name | Type | Description |
---|---|---|
centered | Boolean | Set to true if component should be centered on screen. Default: false |
closeOnEsc | Boolean | Set to true if modal should close when esc key is pressed. Default: true |
closeOnOverlayClick | Boolean | Set to true if modal should close when pressing on outside area. Default: true |
showCloseIcon | Boolean | Set to true if modal should display close icon. Default: true |
buttonLabel | String | Set the label displayed on button to open modal Default: "" |
buttonClass | String | Pass extra tachyon classes to button container. Default: null |
blockClass | String | Unique class name to be appended to block classes. Default: null |
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
styles
builder to yourmanifest.json
:
_10 "builders": {_10 "styles": "1.x"_10 }
- Create a file called
vtex.rich-text.css
inside thestyles/css
folder. Add your custom styles:
_10.container {_10 margin-top: 10px;_10}
CSS Namespaces
Below, we describe the namespaces that are defined in the modal.
Token name | Component | Description |
---|---|---|
container | index | The container that encloses the whole <Modal> component |
childrenContainer | index | It represents the view that encloses the children rendered inside the container |
button | index | It is inserted in the view that encloses the button used to open the modal |
Troubleshooting
You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.
Tests
To execute our tests go to react/
folder and run yarn test