ng tailng

Overview

tng-expansion-panel is a headless collapsible panel with a clickable header and optional animated content. Use open / openChange for controlled state, disabled and padded. Project title with tngExpansionTitle and content with tngExpansionContent. Optional custom icons via tngExpansionIconOpen / tngExpansionIconClose. Use the slot input for micro-styling: container (root), header, title, iconWrapper, chevron, contentOuter, contentClip, contentBody, contentPadding.

Quick example

Basic
HTMLTSCSS

<tng-expansion-panel>
  <div tngExpansionTitle>What is TailNG?</div>
  <div tngExpansionContent>
    TailNG is a minimal Angular + Tailwind UI kit with slot-based styling for theming.
  </div>
</tng-expansion-panel>
TailNG is a minimal Angular + Tailwind UI kit with slot-based styling for theming.

Features

Controlled / uncontrolled

Use open and openChange for controlled mode, or leave unset for internal state. toggle() for programmatic open/close.

Content slots

Project title with tngExpansionTitle, body with tngExpansionContent. Optional tngExpansionIconOpen and tngExpansionIconClose for custom expand/collapse icons.

Class hooks

slot keys: container, header, title, iconWrapper, chevron, contentOuter, contentClip, contentBody, contentPadding.