Disclosure

An interactive component which expands/collapses a panel.

#
Documentation

#
Usage

Use the open and defaultOpen props to toggle between controlled and uncontrolled usage. And combine it with onOpenChange to listen for changes to the state.

import {
  Disclosure,
  DisclosureContent,
  DisclosureTrigger,
} from "@optiaxiom/react";
 
export function App() {
  return (
    <Disclosure maxW="sm" w="full">
      <DisclosureTrigger>Disclosure label</DisclosureTrigger>
      <DisclosureContent>
        Aenean neque dui, lobortis et sem quis, mattis varius nisl. Nulla turpis
        sapien, venenatis eu pharetra at, ullamcorper sed nibh.
      </DisclosureContent>
    </Disclosure>
  );
}

#
Description

Use the chevronPosition prop on DisclosureTrigger to control which side the chevron is placed.

Chevron position

import type { ComponentPropsWithRef } from "react";
 
import {
  Disclosure,
  DisclosureContent,
  DisclosureTrigger,
} from "@optiaxiom/react";
 
export function App({
  chevronPosition,
}: Pick<ComponentPropsWithRef<typeof DisclosureTrigger>, "chevronPosition">) {
  return (
    <Disclosure maxW="sm" w="full">
      <DisclosureTrigger chevronPosition={chevronPosition}>
        Disclosure label
      </DisclosureTrigger>
      <DisclosureContent>
        Aenean neque dui, lobortis et sem quis, mattis varius nisl. Nulla turpis
        sapien, venenatis eu pharetra at, ullamcorper sed nibh.
      </DisclosureContent>
    </Disclosure>
  );
}

#
Props

#
Disclosure

Supports all Box props in addition to its own. Renders a <div> element.

Prop
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string
defaultOpen The initial open state in uncontrolled mode. false \| true
disabled false \| true
onOpenChange Handler that is called when the open state changes. (open: boolean) => void
open The open state in controlled mode. false \| true

#
DisclosureTrigger

Supports all Button props in addition to its own. Renders a <button> element.

Prop
addonAfter ReactNode
addonBefore ReactNode
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
chevronPosition "end" \| "start" Default: start
className string

#
DisclosureContent

Supports all Box props in addition to its own. Renders a <div> element.

Prop
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string
forceMount Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. true

#
Changelog

#
0.1.0

Added component

Dialog Drawer