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 { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmCollapsibleImports } from '@spartan-ng/helm/collapsible';

@Component({
	selector: 'spartan-collapsible-preview',
	imports: [HlmCollapsibleImports, HlmButtonImports, NgIcon],
	providers: [provideIcons({ lucideChevronsUpDown })],
	template: `
		<hlm-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 hlmCollapsibleTrigger hlmBtn variant="ghost" size="icon" class="size-8">
					<ng-icon name="lucideChevronsUpDown" />
					<span class="sr-only">Toggle</span>
				</button>
			</div>
			<div class="rounded-md border px-4 py-2 font-mono text-sm">&#64;radix-ui/primitives</div>
			<hlm-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>
			</hlm-collapsible-content>
		</hlm-collapsible>
	`,
})
export class CollapsiblePreview {}

Installation

ng g @spartan-ng/cli:ui collapsible

Usage

import { HlmCollapsibleImports } from '@spartan-ng/helm/collapsible';

<hlm-collapsible>
  <button hlmCollapsibleTrigger>Can I use this in my project?</button>
  <hlm-collapsible-content> Yes. Free to use for personal and commercial projects. No attribution required. </hlm-collapsible-content>
</hlm-collapsible>

Examples

Animated

You can use the data-state and Tailwind classes to control the animation of the collapsible.

@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 { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmCollapsibleImports } from '@spartan-ng/helm/collapsible';

@Component({
	selector: 'spartan-collapsible-animated-example',
	imports: [HlmCollapsibleImports, HlmButtonImports, NgIcon],
	providers: [provideIcons({ lucideChevronsUpDown })],
	template: `
		<hlm-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 hlmCollapsibleTrigger hlmBtn variant="ghost" size="icon" class="size-8">
					<ng-icon name="lucideChevronsUpDown" />
					<span class="sr-only">Toggle</span>
				</button>
			</div>
			<div class="rounded-md border px-4 py-2 font-mono text-sm">&#64;radix-ui/primitives</div>
			<hlm-collapsible-content
				class="flex origin-top flex-col gap-2 transition-all ease-out data-[state=closed]:flex data-[state=closed]:-translate-y-1 data-[state=closed]:scale-80 data-[state=closed]:opacity-0"
			>
				<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>
			</hlm-collapsible-content>
		</hlm-collapsible>
	`,
})
export class CollapsibleAnimatedExample {}

Brain API

BrnCollapsibleContent

Selector: [brnCollapsibleContent],brn-collapsible-content

Inputs

Prop	Type	Default	Description
id	string \| null \| undefined	-	The id of the collapsible content element.

BrnCollapsibleTrigger

Selector: button[brnCollapsibleTrigger]

Inputs

Prop	Type	Default	Description
type	'button' \| 'submit' \| 'reset'	button	-

BrnCollapsible

Selector: [brnCollapsible],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.

Helm API

HlmCollapsibleContent

Selector: [hlmCollapsibleContent],hlm-collapsible-content

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmCollapsibleTrigger

Selector: button[hlmCollapsibleTrigger]

HlmCollapsible

Selector: [hlmCollapsible],hlm-collapsible

Combobox

Checkbox

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.