Spartans get ready! v1 is coming!
We are very close to our first stable release. Expect more announcements in the coming weeks. v1 was made possible by our partner Zerops.
Getting Started
Stack
Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Dropdown Menu
- Empty
- Form Field
- Hover Card
- Icon
- Input
- Input Group
- Input OTP
- Kbd
- Label
- Menubar
- Pagination
- Popover
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner (Toast)
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
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 { HlmButtonImports } from '@spartan-ng/helm/button';
@Component({
selector: 'spartan-collapsible-preview',
imports: [BrnCollapsibleImports, HlmButtonImports, 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 { BrnCollapsibleImports } 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. |