No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Disclosure

The disclosure component is used to create regions of content that can expand/collapse with a simple animation.

usage
import { Disclosure, Content, DisclosureContext, useDisclosureContext } from "@sharegate/orbit-ui";
sources
Github

Guidelines

Accessibility

Usage

Default

A default disclosure using a button.

Editable example

Disclosure Context

A disclosure component can update his content based on the isOpen value of useDisclosureContext or access a close function.

Editable example

Disclosure arrow

You can use a disclosure arrow component to hint that activating the button will display additional content.

Editable example

Controlled

A disclosure component can handle open state in controlled mode.

Editable example

API

Disclosure

usage
import { Disclosure } from "@sharegate/orbit-ui";
NameDescriptionDefault
children*
React children.
string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal
-
defaultOpen
The initial value of open when uncontrolled.
falsetrue
-
onOpenChange
Called when the open state change.
(event: SyntheticEvent<Element, Event>, isOpen: boolean) => void
eventReact's original event.
isOpenWhether or not the content is visible.
-
open
A controlled open value.
falsetrue
-

Content

usage
import { Content } from "@sharegate/orbit-ui";
NameDescriptionDefault
children*
React children.
string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal
-
slot
Slot to render into.
string
-