Collapsible

An interactive component which expands/collapses a content area.

Default

The standard collapsible component.

@peduarte starred 3 repositories

@spartan-ng/brain
@spartan-ng/helm
@angular/core

Animated

Use Tailwind CSS transitions to animate the expansion and collapse.

@peduarte starred 3 repositories

@spartan-ng/brain
@spartan-ng/colors
@stitches/react

Custom Styles & Icons

Theme the collapsible using Tailwind utility classes and custom toggle icons.

Blue Theme Collapsible

This collapsible uses custom Tailwind CSS classes for a themed look.

Success Theme with Custom Icons

You can easily toggle icons based on the [data-state] attribute.

Installation & Usage

Installation

Imports

Basic Skeleton

API Reference

Brain API

The brain directives provide the functional logic and state management for the collapsible.

DirectiveSelectorInputs / Outputs
BrnCollapsible[brnCollapsible], brn-collapsible
  • expanded: boolean (Model)
  • disabled: boolean
  • expandedChange: EventEmitter<boolean>
BrnCollapsibleTriggerbutton[brnCollapsibleTrigger]Functional trigger for toggling the collapsible state.
BrnCollapsibleContent[brnCollapsibleContent]Container for the collapsible content.

Helm API

The helm components provide the default spartan/ui styling.

Component / DirectiveSelectorDescription
HlmCollapsiblehlm-collapsible, [hlmCollapsible]Main styling container.
HlmCollapsibleTriggerbutton[hlmCollapsibleTrigger]Styled trigger button.
HlmCollapsibleContenthlm-collapsible-content, [hlmCollapsibleContent]Styled content area. Handles [data-state].