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) Morphos's `Disclosure` so `new Collapsible()` still yields a real instance * with `.isOpen`/`.toggle()`. `CollapsibleTrigger`/`CollapsibleContent` add no default styling of * their own, so they're re-exported directly, renamed. */@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) Morphos's `Disclosure` so `new Collapsible()` still yields a real instance * with `.isOpen`/`.toggle()`. `CollapsibleTrigger`/`CollapsibleContent` add no default styling of * their own, so they're re-exported directly, renamed. No styling anywhere in this file, so it's * identical to the Tailwind version. */@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>
);
}
}