Collapsible

An interactive component which expands/collapses a panel.

main.ts

styles.css

import { NgIf } from '@angular/common';
import { Component } from '@angular/core';
import {
    RdxCollapsibleContentDirective,
    RdxCollapsibleRootDirective,
    RdxCollapsibleTriggerDirective
} from '@radix-ng/primitives/collapsible';
import { LucideAngularModule, UnfoldVertical, X } from 'lucide-angular';

@Component({
    selector: 'collapsible-demo',
    standalone: true,
    imports: [
        RdxCollapsibleRootDirective,
        RdxCollapsibleTriggerDirective,
        RdxCollapsibleContentDirective,
        LucideAngularModule,
        NgIf
    ],
    template: `
        <div class="CollapsibleRoot" #collapsibleRoot="collapsibleRoot" [open]="true" rdxCollapsibleRoot>
            <div style="display: flex; align-items: center; justify-content: space-between; gap: 1em;">
                <span class="Text" style="color: white;">&#64;peduarte starred 3 repositories</span>
                <button class="IconButton" style="flex-shrink: 0;" rdxCollapsibleTrigger>
                    @if (collapsibleRoot.isOpen()) {
                        <lucide-angular [img]="XIcon" size="16" style="display: flex;" />
                    } @else {
                        <lucide-angular [img]="UnfoldVerticalIcon" size="16" style="display: flex;" />
                    }
                </button>
            </div>

            <div class="Repository">
                <span class="Text">&#64;radix-ui/primitives</span>
            </div>

            <div rdxCollapsibleContent>
                <div class="Repository">
                    <span class="Text">&#64;radix-ui/colors</span>
                </div>
                <div class="Repository">
                    <span class="Text">&#64;stitches/react</span>
                </div>
            </div>
        </div>
    `,
    styleUrl: 'collapsible-demo.css'
})
export class CollapsibleDemoComponent {
    readonly XIcon = X;
    readonly UnfoldVerticalIcon = UnfoldVertical;
}

:host {
    button {
        all: unset;
    }
}

.CollapsibleRoot {
    width: 100%;
    max-width: 295px;
}

.IconButton {
    font-family: inherit;
    border-radius: 100%;
    height: 25px;
    width: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--violet-11);
    box-shadow: 0 2px 10px var(--black-a7);
}

.IconButton[data-state='closed'] {
    background-color: white;
}

.IconButton[data-state='open'] {
    background-color: var(--violet-3);
}

.IconButton:hover {
    background-color: var(--violet-3);
}

.IconButton:focus {
    box-shadow: 0 0 0 2px black;
}

.Text {
    color: var(--violet-11);
    font-size: 15px;
    line-height: 25px;
}

.Repository {
    background-color: white;
    border-radius: 4px;
    margin: 10px 0;
    padding: 10px;
    box-shadow: 0 2px 10px var(--black-a7);
}

API Reference

Root

Contains all the parts of a collapsible.

Prop	Type	Default
`disabled`	`boolean`	`false`
`open`	`boolean`	-
`onOpenChange`	`EventEmitter`	`new EventEmitter<boolean>()`

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	`Present when disabled`

Trigger

The button that toggles the collapsible.

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	`Present when disabled`

Content

The component that contains the collapsible content.

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	`Present when disabled`

Accessibility

Adheres to the Disclosure WAI-ARIA design pattern.