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.

Collapsible

An interactive component which expands/collapses a panel.

@peduarte starred 3 repositories

@radix-ui/primitives

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">&#64;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">&#64;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">&#64;radix-ui/colors</div>
				<div class="rounded-md border px-4 py-2 font-mono text-sm">&#64;stitches/react</div>
			</brn-collapsible-content>
		</brn-collapsible>
	`,
})
export class CollapsiblePreview {}

Installation

npx nx 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.

Combobox

Checkbox