Collapsible
An interactive component which expands/collapses a panel.
@peduarte starred 3 repositories
@radix-ui/primitives
@radix-ui/colors
@stitches/react
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideChevronsUpDown } from '@ng-icons/lucide';
import { BrnCollapsibleImports } from '@spartan-ng/brain/collapsible';
import { HlmButton } from '@spartan-ng/helm/button';
@Component({
selector: 'spartan-collapsible-preview',
imports: [BrnCollapsibleImports, HlmButton, NgIcon],
providers: [provideIcons({ lucideChevronsUpDown })],
template: `
<brn-collapsible class="flex w-[350px] flex-col gap-2">
<div class="flex items-center justify-between gap-4 px-4">
<h4 class="text-sm font-semibold">@peduarte starred 3 repositories</h4>
<button brnCollapsibleTrigger hlmBtn variant="ghost" size="icon" class="size-8">
<ng-icon name="lucideChevronsUpDown" />
</button>
</div>
<div class="rounded-md border px-4 py-2 font-mono text-sm">@radix-ui/primitives</div>
<brn-collapsible-content class="flex flex-col gap-2">
<div class="rounded-md border px-4 py-2 font-mono text-sm">@radix-ui/colors</div>
<div class="rounded-md border px-4 py-2 font-mono text-sm">@stitches/react</div>
</brn-collapsible-content>
</brn-collapsible>
`,
})
export class CollapsiblePreview {}Installation
npx nx g @spartan-ng/cli:ui collapsible
ng g @spartan-ng/cli:ui collapsible
Usage
import {
BrnCollapsible
BrnCollapsibleContent
BrnCollapsibleTrigger
} from '@spartan-ng/brain/collapsible';<brn-collapsible>
<button brnCollapsibleTrigger>Can I use this in my project?</button>
<brn-collapsible-content>
Yes. Free to use for personal and commercial projects. No attribution
required.
</brn-collapsible-content>
</brn-collapsible>Brain API
BrnCollapsibleContent
Selector: brn-collapsible-content
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | null | undefined | - | The id of the collapsible content element. |
BrnCollapsibleTrigger
Selector: button[brnCollapsibleTrigger]
BrnCollapsible
Selector: brn-collapsible
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | false | The disabled state of the collapsible component. |
| expanded | boolean | false | The expanded or collapsed state of the collapsible component. |
Outputs
| Prop | Type | Default | Description |
|---|---|---|---|
| expandedChanged | boolean | false | The expanded or collapsed state of the collapsible component. |