@vtex/disclosure NPM

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`

reakit

@infinitebrahmanuniverse/nolb-_vt @everything-registry/sub-chunk-993

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago