Docs
Collapsible
Collapsible
An interactive component which expands/collapses a panel.
Loading...
Loading...
import { UbButtonDirective } from '@/components/ui/button'
import { UbCollapsible, UbCollapsibleContent, UbCollapsibleTrigger } from '@/components/ui/collapsible'
import { Component } from '@angular/core'
import { NgIconComponent, provideIcons } from '@ng-icons/core'
import { radixCaretSort } from '@ng-icons/radix-icons'
@Component({
standalone: true,
selector: 'collapsible-demo-new-york',
imports: [UbCollapsible, UbCollapsibleContent, UbCollapsibleTrigger, UbButtonDirective, NgIconComponent],
viewProviders: [provideIcons({ radixCaretSort })],
template: `
<div ubCollapsible class="w-[350px] space-y-2" [open]="false">
<div class="flex items-center justify-between space-x-4 px-4">
<h4 className="text-sm font-semibold">
{{'@'}}peduarte starred 3 repositories
</h4>
<button ubButton variant="ghost" size="sm" ubCollapsibleTrigger>
<ng-icon name="radix-caret-sort" class="h-4 w-4"></ng-icon>
<span class="sr-only">Toggle</span>
</button>
</div>
<div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
{{'@'}}radix-ng/primitives
</div>
<div ubCollapsibleContent>
<div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
{{'@'}}radix-ng/colors
</div>
<div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
{{'@'}}angular/core
</div>
</div>
</div>
`,
})
export class CollapSibleDemoNewYork { }import { UbButtonDirective } from '@/registry/new-york/ui/button'
import { UbCollapsible, UbCollapsibleContent, UbCollapsibleTrigger } from '@/registry/new-york/ui/collapsible'
import { Component } from '@angular/core'
import { NgIconComponent, provideIcons } from '@ng-icons/core'
import { radixCaretSort } from '@ng-icons/radix-icons'
@Component({
standalone: true,
selector: 'collapsible-demo-default',
imports: [UbCollapsible, UbCollapsibleContent, UbCollapsibleTrigger, UbButtonDirective, NgIconComponent],
viewProviders: [provideIcons({ radixCaretSort })],
template: `
<div ubCollapsible class="w-[350px] space-y-2" [open]="false">
<div class="flex items-center justify-between space-x-4 px-4">
<h4 className="text-sm font-semibold">
{{'@'}}peduarte starred 3 repositories
</h4>
<button ubButton variant="ghost" size="sm" ubCollapsibleTrigger>
<ng-icon name="radix-caret-sort" class="h-4 w-4"></ng-icon>
<span class="sr-only">Toggle</span>
</button>
</div>
<div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
{{'@'}}radix-ng/primitives
</div>
<div ubCollapsibleContent>
<div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
{{'@'}}radix-ng/colors
</div>
<div class="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
{{'@'}}angular/core
</div>
</div>
</div>
`,
})
export class CollapSibleDemoDefault { }Installation
npx shadcn-ng@latest add collapsible
npm
yarn
pnpm
bun
Install the following dependencies:
npm install @radix-ng/primitives
npm
yarn
pnpm
bun
Copy and paste the following code into your project.
import { Directive } from '@angular/core'
import {
RdxCollapsibleContentDirective,
RdxCollapsibleRootDirective,
RdxCollapsibleTriggerDirective,
} from '@radix-ng/primitives/collapsible'
@Directive({
standalone: true,
selector: 'ubCollapsible',
exportAs: 'ubCollapsible',
hostDirectives: [
{
directive: RdxCollapsibleRootDirective,
inputs: ['open: open', 'disabled: disabled'],
outputs: ['onOpenChange: onOpenChange'],
},
],
})
export class UbCollapsible { }
@Directive({
standalone: true,
selector: '[ubCollapsibleTrigger]',
hostDirectives: [RdxCollapsibleTriggerDirective],
})
export class UbCollapsibleTrigger { }
@Directive({
standalone: true,
selector: '[ubCollapsibleContent]',
hostDirectives: [RdxCollapsibleContentDirective],
})
export class UbCollapsibleContent { }import { Directive } from '@angular/core'
import {
RdxCollapsibleContentDirective,
RdxCollapsibleRootDirective,
RdxCollapsibleTriggerDirective,
} from '@radix-ng/primitives/collapsible'
@Directive({
standalone: true,
selector: 'ubCollapsible',
exportAs: 'ubCollapsible',
hostDirectives: [
{
directive: RdxCollapsibleRootDirective,
inputs: ['open: open', 'disabled: disabled'],
outputs: ['onOpenChange: onOpenChange'],
},
],
})
export class UbCollapsible { }
@Directive({
standalone: true,
selector: '[ubCollapsibleTrigger]',
hostDirectives: [RdxCollapsibleTriggerDirective],
})
export class UbCollapsibleTrigger { }
@Directive({
standalone: true,
selector: '[ubCollapsibleContent]',
hostDirectives: [RdxCollapsibleContentDirective],
})
export class UbCollapsibleContent { }Update the import paths to match your project setup.
Usage
import {
UbCollapsible,
UbCollapsibleContent,
UbCollapsibleTrigger
} from '@/components/ui/collapsible'<div ubCollapsible>
<button ubCollapsibleTrigger>Can I use this in my project?</button>
<div ubCollapsibleContent>
Yes. Free to use for personal and commercial projects. No attribution
required.
</div>
</div>