Disclosure Layout
📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.
Disclosure Layout
The Disclosure Layout is an app responsible for creating a layout structure based on disclosure indicators.
Configuration
Step 1 - Adding the Disclosure Layout app to your theme's dependencies
In your theme's manifest.json
file, add the Disclosure Layout app as a dependency:
"dependencies": {
+ "vtex.disclosure-layout": "1.x"
}
Now, you are able to use all the blocks exported by the disclosure-layout
app. Check out the full list below:
Block name | Description |
---|---|
disclosure-layout | disclosure-trigger , disclosure-content , and disclosure-state-indicator . |
disclosure-trigger | Declares the blocks that will be rendered as disclosure triggers i.e. the blocks that when clicked on will open or close the disclosure content (defined by the disclosure-content block). |
disclosure-content | Declares the blocks that are responsible for displaying the desired content when the disclosure trigger is clicked on. |
disclosure-state-indicator | Optional block responsible for rendering chevron or other UI elements that change when the disclosure is opened or closed. |
disclosure-layout-group | Wraps many disclosure-layouts blocks at once. You may use this block to control when each one of them should be displayed, making it possible to have only one disclosure-layout open at a time. |
disclosure-trigger-group | Wraps many disclosure-trigger blocks at once. You may use this block to control when and how the disclosure-layouts blocks declared inside the disclosure-layout-group should be displayed. |
Step 2 - Adding the Disclosure Layout' blocks to your theme's templates
According to your desire, copy one of the examples stated below and paste it in your theme's desired template, making the necessary changes. Remember to add the disclosure-layout
block to the template's block list if needed.
- Simple example:
{
"disclosure-layout#simple": {
"children": ["disclosure-trigger#simple", "disclosure-content#simple"]
},
"disclosure-trigger#simple": {
"children": ["rich-text#question"]
},
"disclosure-content#simple": {
"children": ["rich-text#answer"]
},
"rich-text#question": {
"props": {
"text": "How can I change my shipping address?"
}
},
"rich-text#answer": {
"props": {
"text": "Call us at the number (212) 1234-1234"
}
}
}
- Example using the
disclosure-layout-group
block:
{
"disclosure-layout-group#group": {
"children": ["disclosure-layout#first", "disclosure-layout#second"]
},
"disclosure-layout#first": {
"children": ["disclosure-trigger#first", "disclosure-content#first"]
},
"disclosure-trigger#first": {
"children": ["rich-text#question1"]
},
"disclosure-content#first": {
"children": ["rich-text#answer1"]
},
"rich-text#question1": {
"props": {
"text": "How can I change my shipping address?"
}
},
"rich-text#answer1": {
"props": {
"text": "Call us at the number (212) 1234-1234."
}
},
"disclosure-layout#second": {
"children": ["disclosure-trigger#first", "disclosure-content#first"]
},
"disclosure-trigger#second": {
"children": ["rich-text#question1"]
},
"disclosure-content#second": {
"children": ["rich-text#answer1"]
},
"rich-text#question2": {
"props": {
"text": "How can I track my order?"
}
},
"rich-text#answer2": {
"props": {
"text": "After logging into your account, you can find this info at the link Orders."
}
}
}
- Example using the
disclosure-state-indicator
block:
{
"disclosure-state-indicator": {
"props": {
"Show": "icon-angle--down",
"Hide": "icon-angle--up"
}
}
}
disclosure-layout
props
disclosure-layout
propsProp name | Type | Description | Default value |
---|---|---|---|
initialVisibility | enum | Defines the initial visibility of the layout content. Possible values are: visible (content initially open) or hidden (content is only displayed with user interaction). | hidden |
animated | boolean | Whether or not the layout content should have animations. When set as true , this prop will enable additional data-\* attributes on the content which you can use as selectors in CSS. It will also ensure that the element will get hidden once the transition has ended. | false |
disclosure-trigger
props
disclosure-trigger
propsProp Name | Type | Description | Default value |
---|---|---|---|
Show | block | Name of the block that will be rendered when prompt to show the content. | undefined |
Hide | block | Name of the block that will be rendered when prompt to hide the content. | undefined |
as | string | HTML tag to be applied to the component when it is rendered on the UI. | button |
children | block | Name of the block that will be rendered in case no blocks are declared in the Show or Hide props. | undefined |
blockClass | string | Block ID of your choosing to be used in CSS customization. | undefined |
disclosure-content
props
disclosure-content
propsProp Name | Type | Description | Default value |
---|---|---|---|
blockClass | string | Block ID of your choosing to be used in CSS customization. | undefined |
children | [block] | List of blocks that will render the desired disclosure content. | undefined |
disclosure-state-indicator
props
disclosure-state-indicator
propsProp Name | Type | Description | Default value |
---|---|---|---|
Show | block | Name of the block that will be rendered when prompt to show the content. | undefined |
Hide | block | Name of the block that will be rendered when prompt to hide the content. | undefined |
disclosure-layout-group
props
disclosure-layout-group
propsProp Name | Type | Description | Default value |
---|---|---|---|
maxVisible | enum | Defines how many disclosure-layout blocks should be displayed at time. Possible values are: one (only one disclosure-layout block should have its content displayed at time) or many (different disclosure-layout 's contents can be displayed at time). | one |
disclosure-trigger-group
props
disclosure-trigger-group
propsProp Name | Type | Description | Default value |
---|---|---|---|
Show | block | Name of the block that will be rendered when prompt to show the content. | undefined |
Hide | block | Name of the block that will be rendered when prompt to hide the content. | undefined |
as | string | HTML tag to be applied to the component when it is rendered on the UI. | button |
children | block | Name of the block that will be rendered in case no blocks are declared in the Show or Hide props. | undefined |
blockClass | string | Block ID of your choosing to be used in CSS customization. | undefined |
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 |
---|
content |
content--visible |
content--hidden |
trigger |
trigger--visible |
trigger--hidden |
triggerGroup |
triggerGroup--visible |
triggerGroup--hidden |
Contributors ✨
Thanks goes to these wonderful people:
This project follows the all-contributors specification. Contributions of any kind are welcome!
Updated over 1 year ago