disclosure.md

Disclosure

Disclosure component that controls visibility of a section of content. It follows the WAI-ARIA Disclosure Pattern for it's keyboard interaction & accessibility properties.

Table of Contents

• Usage
  • Horizontal Disclosure
  • Vertical Disclosure
• Composition
• Props
  • DisclosureCollapsibleContentOptions

Usage

Horizontal Disclosure

import * as React from "react";
import { Disclosure, useDisclosureState } from "ariakit";

import { DisclosureCollapsibleContent } from "@adaptui/react";

export const DisclosureHorizontalCollapseBasic = props => {
  const state = useDisclosureState(props);

  return (
    <div style={{ display: "flex", height: "100%" }}>
      <Disclosure state={state}>Show More</Disclosure>
      <DisclosureCollapsibleContent
        style={{
          display: "flex",
          flexDirection: "row",
        }}
        direction="horizontal"
        state={state}
      >
        <span style={{ flexShrink: 0 }}>Item 1</span>
        <span style={{ flexShrink: 0 }}>Item 2</span>
        <span style={{ flexShrink: 0 }}>Item 3</span>
        <span style={{ flexShrink: 0 }}>Item 4</span>
        <span style={{ flexShrink: 0 }}>Item 5</span>
        <span style={{ flexShrink: 0 }}>Item 6</span>
      </DisclosureCollapsibleContent>
    </div>
  );
};

export default DisclosureHorizontalCollapseBasic;

Vertical Disclosure

import * as React from "react";
import { Disclosure, useDisclosureState } from "ariakit";

import { DisclosureCollapsibleContent } from "@adaptui/react";

export const DisclosureVerticalCollapseBasic = props => {
  const state = useDisclosureState(props);

  return (
    <div>
      <Disclosure state={state}>Show More</Disclosure>
      <DisclosureCollapsibleContent
        style={{
          display: "flex",
          flexDirection: "column",
        }}
        direction="vertical"
        state={state}
      >
        <span>Item 1</span>
        <span>Item 2</span>
        <span>Item 3</span>
        <span>Item 4</span>
        <span>Item 5</span>
        <span>Item 6</span>
      </DisclosureCollapsibleContent>
    </div>
  );
};

export default DisclosureVerticalCollapseBasic;

Composition

• DisclosureCollapsibleContent uses Role

Props

DisclosureCollapsibleContentOptions

Name	Type	Description
state	DisclosureState	Object returned by the useDisclosureState hook.
direction	"vertical" | "horizontal" | undefined	Direction of the transition.
contentSize	number | undefined	Size of the content.
easing	string | undefined	Transition Easing.
duration	number | undefined	Duration of the transition.By default the duration is calculated based on the size of change.
onExpandStart	(() => void) | undefined	Callback called before the expand transition starts.
onExpandEnd	(() => void) | undefined	Callback called after the expand transition ends.
onCollapseStart	(() => void) | undefined	Callback called before the collapse transition starts.
onCollapseEnd	(() => void) | undefined	Callback called after the collapse transition ends..