Collapsible

Anatomy

<Collapsible>
  <CollapsibleTrigger />
  <CollapsibleContent />
</Collapsible>

Usage

Import <Collapsible>, <CollapsibleTrigger>, and <CollapsibleContent> and compose them together.

import { Button } from "stylus-ui/Button";
import { Card } from "stylus-ui/Card";
import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "stylus-ui/Collapsible";
import { faAnglesUpDown } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <Collapsible className="flex flex-col items-center gap-2">
    <CollapsibleTrigger asChild>
      <Button variant="secondary" icon={faAnglesUpDown} aria-label="Toggle" />
    </CollapsibleTrigger>
    <CollapsibleContent>
      <Card>Peekaboo</Card>
    </CollapsibleContent>
  </Collapsible>
);

API Reference

Collapsible

A section that can be collapsed and expanded.

asChild

boolean

---

defaultOpen

boolean

---

disabled

boolean

---

onOpenChange

(open: boolean) => void

---

open

boolean

---

CollapsibleTrigger

A button that toggles the collapsed state of a Collapsible.

asChild

boolean

---

CollapsibleContent

The content of a Collapsible.

asChild

boolean

---

forceMount

true

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

---