General settings content...
Advanced settings content...
"use client"
import {
Disclosure,
DisclosureGroup,
DisclosurePanel,
DisclosureTrigger,
} from "@/components/ui/preskok-ui/disclosure"
export function DisclosurePreskokDemo() {
return (
<DisclosureGroup defaultExpandedKeys={["general"]}>
<Disclosure id="general">
<DisclosureTrigger>General</DisclosureTrigger>
<DisclosurePanel>
<div className="p-3">General settings content...</div>
</DisclosurePanel>
</Disclosure>
<Disclosure id="advanced">
<DisclosureTrigger>Advanced</DisclosureTrigger>
<DisclosurePanel>
<div className="p-3">Advanced settings content...</div>
</DisclosurePanel>
</Disclosure>
</DisclosureGroup>
)
}
Installation
pnpmnpmyarnbunpnpm dlx @preskok-org/ui@latest add disclosure
Usage
import {
Disclosure,
DisclosureGroup,
DisclosurePanel,
DisclosureTrigger,
} from "@/registry/preskok/ui/preskok-ui/disclosure"
export function Example() {
return (
<DisclosureGroup>
<Disclosure>
<DisclosureTrigger>Section</DisclosureTrigger>
<DisclosurePanel>Content</DisclosurePanel>
</Disclosure>
</DisclosureGroup>
)
}Components
- DisclosureGroup, Disclosure, DisclosureTrigger, DisclosurePanel