mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Ivan Vasilov
02cf09212e
This PR removes all `paths` in `tsconfig.json` for all apps and packages. They were added previosly because some of the components had a `_Shadcn` suffix because of an ongoing migration. How that the migration is done, the paths can be removed. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Standardized shared UI component, utility, and icon imports across design-system examples and application screens. * Simplified shared component access and project configuration. * Added shared access to anchor-link helpers and animation styles. * **Compatibility** * Updated component exports and imports without changing existing behavior. * No changes to user-facing workflows, screens, or functionality. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
48 lines
1.4 KiB
Plaintext
48 lines
1.4 KiB
Plaintext
---
|
|
title: Collapsible
|
|
description: An expandable content region using the shadcn Collapsible primitive.
|
|
component: true
|
|
---
|
|
|
|
Collapsible is a low-level primitive for revealing and hiding related content. Use it when a component needs custom trigger or content composition.
|
|
|
|
Use Collapsible for generic disclosure behaviour: rows, sections, menus, tool details, and custom layouts. Use [Collapsible Alert](../fragments/collapsible-alert) instead when the disclosure is an alert-styled callout that should keep standard alert padding, variants, trigger styling, and toggle treatment.
|
|
|
|
<ComponentPreview name="collapsible-demo" peekCode wide />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from 'ui'
|
|
```
|
|
|
|
```tsx
|
|
<Collapsible>
|
|
<CollapsibleTrigger>Toggle</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<p>Content revealed when expanded.</p>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
```
|
|
|
|
### Default open
|
|
|
|
```tsx
|
|
<Collapsible defaultOpen>
|
|
<CollapsibleTrigger>Details</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<p>This section is expanded by default.</p>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
```
|
|
|
|
### Animation
|
|
|
|
Add animation classes to `CollapsibleContent` when animated open and close transitions are needed.
|
|
|
|
```tsx
|
|
<CollapsibleContent className="data-closed:animate-collapsible-up data-open:animate-collapsible-down">
|
|
<p>Content revealed when expanded.</p>
|
|
</CollapsibleContent>
|
|
```
|