VTEX Developer Portal

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Disclosure Layout

All ContributorsAll Contributors

The Disclosure Layout is an app responsible for creating a layout structure based on disclosure indicators.

Disclosure ExampleDisclosure Example
Check example

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 nameDescription
disclosure-layouthttps://img.shields.io/badge/-Mandatory-redhttps://img.shields.io/badge/-Mandatory-red Parent block that enables you to build the disclosure layout using its 3 children blocks: disclosure-trigger, disclosure-content, and disclosure-state-indicator.
disclosure-triggerDeclares 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-contentDeclares the blocks that are responsible for displaying the desired content when the disclosure trigger is clicked on.
disclosure-state-indicatorOptional block responsible for rendering chevron or other UI elements that change when the disclosure is opened or closed.
disclosure-layout-groupWraps 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-groupWraps 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-layoutblock 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

Prop nameTypeDescriptionDefault value
initialVisibilityenumDefines the initial visibility of the layout content. Possible values are: visible (content initially open) or hidden (content is only displayed with user interaction).hidden
animatedbooleanWhether 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

Prop NameTypeDescriptionDefault value
ShowblockName of the block that will be rendered when prompt to show the content.undefined
HideblockName of the block that will be rendered when prompt to hide the content.undefined
asstringHTML tag to be applied to the component when it is rendered on the UI.button
childrenblockName of the block that will be rendered in case no blocks are declared in the Show or Hide props.undefined
blockClassstringBlock ID of your choosing to be used in CSS customization.undefined

disclosure-content props

Prop NameTypeDescriptionDefault value
blockClassstringBlock 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

Prop NameTypeDescriptionDefault value
ShowblockName of the block that will be rendered when prompt to show the content.undefined
HideblockName of the block that will be rendered when prompt to hide the content.undefined

disclosure-layout-group props

Prop NameTypeDescriptionDefault value
maxVisibleenumDefines 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

Prop NameTypeDescriptionDefault value
ShowblockName of the block that will be rendered when prompt to show the content.undefined
HideblockName of the block that will be rendered when prompt to hide the content.undefined
asstringHTML tag to be applied to the component when it is rendered on the UI.button
childrenblockName of the block that will be rendered in case no blocks are declared in the Show or Hide props.undefined
blockClassstringBlock 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 about a year ago


Disclosure Layout


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.