Components
Collapsible
A single expand/collapse toggle, wrapping Morphos's Disclosure primitive.
Installation
npx kosmesis add collapsiblepnpm dlx kosmesis add collapsibleyarn dlx kosmesis add collapsiblebunx kosmesis add collapsibleInstall the following dependencies:
npm install @morphos/layoutpnpm add @morphos/layoutyarn add @morphos/layoutbun add @morphos/layoutCopy and paste the following code into your project.
import { Component } from "@praxisjs/decorators";import { Disclosure as MorphosCollapsible } from "@morphos/layout";// Extends (not wraps) `Disclosure` so `new Collapsible()` still has `.isOpen`/`.toggle()`.@Component()export class Collapsible extends MorphosCollapsible {}export { DisclosureContent as CollapsibleContent, DisclosureTrigger as CollapsibleTrigger, type DisclosureContentProps as CollapsibleContentProps, type DisclosureProps as CollapsibleProps, type DisclosureTriggerProps as CollapsibleTriggerProps,} from "@morphos/layout";Install the following dependencies:
npm install @morphos/layout @praxisjs/csspnpm add @morphos/layout @praxisjs/cssyarn add @morphos/layout @praxisjs/cssbun add @morphos/layout @praxisjs/cssCopy and paste the following code into your project.
import { Component } from "@praxisjs/decorators";import { Disclosure as MorphosCollapsible } from "@morphos/layout";// Extends (not wraps) `Disclosure` so `new Collapsible()` still has `.isOpen`/`.toggle()`.@Component()export class Collapsible extends MorphosCollapsible {}export { DisclosureContent as CollapsibleContent, DisclosureTrigger as CollapsibleTrigger, type DisclosureContentProps as CollapsibleContentProps, type DisclosureProps as CollapsibleProps, type DisclosureTriggerProps as CollapsibleTriggerProps,} from "@morphos/layout";Examples
Usage
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
@Component()
class Notes extends StatefulComponent {
@State() disclosure = new Collapsible();
render() {
return (
<Collapsible class="w-96">
<CollapsibleTrigger disclosure={this.disclosure}>Toggle notes</CollapsibleTrigger>
<CollapsibleContent disclosure={this.disclosure}>
<p>These are the hidden notes.</p>
</CollapsibleContent>
</Collapsible>
);
}
}Props
Collapsible
Subclasses Morphos's Disclosure — instantiate directly (@State() disclosure = new Collapsible()).
| Prop | Type | Default |
|---|---|---|
open | boolean | — controlled |
defaultOpen | boolean | false |
onOpenChange | (open: boolean) => void | — |
CollapsibleTrigger
| Prop | Type | Default |
|---|---|---|
disclosure | Disclosure | — required |
aria-label | string | — |
The prop is literally named disclosure, not collapsible, despite the class rename.
CollapsibleContent
| Prop | Type | Default |
|---|---|---|
disclosure | Disclosure | — required |