AngularLynx

    Collapsible

    One section whose content shows and hides when its trigger is tapped.

    ui-collapsiblesrc/app/app.ts

    Installation

    npx @blotch/dolan add collapsible
    import {
  UiCollapsible,
  UiCollapsibleContent,
  UiCollapsibleTrigger,
} from '../components/ui/collapsible';

    Usage

    src/app/app.ts
    import { Component, signal } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
import {
  UiCollapsible,
  UiCollapsibleContent,
  UiCollapsibleTrigger,
} from '../components/ui/collapsible';

@Component({
  selector: 'app-root',
  imports: [
    LYNX_ELEMENTS,
    UiCollapsible,
    UiCollapsibleTrigger,
    UiCollapsibleContent,
  ],
  template: `
    <ui-collapsible [(open)]="open" class="rounded-lg border border-border">
      <ui-collapsible-trigger class="justify-between p-4">
        <text class="text-sm font-medium text-foreground">
          3 tagged versions
        </text>
        <text class="text-xs text-muted-foreground">
          {{ open() ? 'Hide' : 'Show' }}
        </text>
      </ui-collapsible-trigger>
      <ui-collapsible-content>
        <view class="px-4 pb-4">
          <text class="text-sm text-foreground">v1.0.0, v1.1.0, v2.0.0</text>
        </view>
      </ui-collapsible-content>
    </ui-collapsible>
  `,
})
export class App {
  protected readonly open = signal(false);
}
    • [(open)] keeps your signal and the collapsible in step. Leave it out if you don't need the state.
    • The trigger is a row (flex-row items-center) and doesn't wrap its content, so put your own <text> elements inside.
    • Content shows only while open. It slides and fades in as it opens.

    Open from code

    <ui-collapsible [(open)]="open">…</ui-collapsible>

    Set the bound signal, for example this.open.set(true), and the content opens. UiCollapsible also has a public toggle() method, which does nothing while disabled.

    Disabled

    <ui-collapsible [disabled]="true">…</ui-collapsible>

    The trigger dims and ignores taps. Setting open from code still works.

    API

    UiCollapsible

    InputTypeDefaultDescription
    openbooleanfalseWhether the content shows. Supports [(open)].
    disabledbooleanfalseDims the trigger and ignores taps.
    classstring''Extra Tailwind classes for the container.
    OutputTypeDescription
    openChangebooleanEmits the new state when the trigger is tapped.

    All sub-components (UiCollapsibleTrigger, UiCollapsibleContent) accept class.