Disclosure
yarn add @vtex/disclosure
Usage
Rendering one disclosure:
<DisclosureLayout>
<DisclosureTrigger>Trigger</DisclosureTrigger>
<DisclosureContent>Content</DisclosureContent>
</DisclosureLayout>
Rendering multiple disclosures:
<DisclosureLayoutGroup>
<DisclosureLayout>
<DisclosureTrigger>Trigger 1</DisclosureTrigger>
<DisclosureContent>Content 1</DisclosureContent>
</DisclosureLayout>
<DisclosureLayout>
<DisclosureTrigger>Trigger 2</DisclosureTrigger>
<DisclosureContent>Content 2</DisclosureContent>
</DisclosureLayout>
<DisclosureLayout>
<DisclosureTrigger>Trigger 3</DisclosureTrigger>
<DisclosureContent>Content 3</DisclosureContent>
</DisclosureLayout>
<DisclosureTriggerGroup>Trigger Group</DisclosureTriggerGroup>
</DisclosureLayoutGroup>
Run the project's Storybook for a full list of examples with yarn storybook
.
API
DisclosureTrigger
Prop Name |
Type |
Description |
Default value |
show |
ReactNode |
This prop will be rendered when prompt to show the content |
undefined |
hide |
ReactNode |
This prop will be rendered when prompt to hide the content |
undefined |
as |
any |
Use this to render a different HTML tag |
button |
htmlProps |
HTMLProps |
Use this to pass any props to the HTML element |
undefined |
children |
ReactNode |
This prop will be rendered if no show or hide is set |
undefined |
DisclosureContent
Prop Name |
Type |
Description |
Default value |
as |
any |
Use this to render a different HTML tag |
button |
htmlProps |
HTMLProps |
Use this to pass any props to the wrapping HTML element |
undefined |
children |
ReactNode |
This prop is the content of the disclosure |
undefined |
DisclosureLayout
Prop Name |
Type |
Description |
Default value |
initialVisibility |
enum |
visible to have it's content initially open, or hidden to be hidden. |
hidden |
animated |
boolean or number |
To perform animations, you must set this to true . It'll enable additional data-* attributes on it's content which you can use as selectors in CSS. It will also ensure that the element will only get hidden when the transition has ended. |
false |
DisclosureLayoutGroup
Prop Name |
Type |
Description |
Default value |
maxVisible |
enum |
Possible values one it will render only one DisclosureLayout content per group, or many multiple DisclosureLayout 's content can be rendered. |
one |
DisclosureTriggerGroup
Prop Name |
Type |
Description |
Default value |
show |
ReactNode |
This prop will be rendered when prompt to show the content |
undefined |
hide |
ReactNode |
This prop will be rendered when prompt to hide the content |
undefined |
as |
any |
Use this to render a different HTML tag |
button |
htmlProps |
HTMLProps |
Use this to pass any props to the HTML element |
undefined |
children |
ReactNode |
This prop will be rendered if no show or hide is set |
undefined |
DisclosureStateIndicator
Prop Name |
Type |
Description |
Default value |
show |
ReactNode |
This prop will be rendered when prompt to show the content |
undefined |
hide |
ReactNode |
This prop will be rendered when prompt to hide the content |
undefined |