ng tailng
GitHub

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. Class hooks: rootKlass, headerKlass, titleKlass, iconWrapperKlass, chevronKlass, contentOuterKlass, contentClipKlass, contentBodyKlass, contentPaddingKlass.

Quick example

Basic
HTMLTSCSS

<tng-expansion-panel>
  <div tngExpansionTitle>What is TailNG?</div>
  <div tngExpansionContent>
    TailNG is a minimal Angular + Tailwind UI kit with klass hooks for theming.
  </div>
</tng-expansion-panel>
TailNG is a minimal Angular + Tailwind UI kit with klass hooks 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

rootKlass, headerKlass, titleKlass, iconWrapperKlass, chevronKlass, contentOuterKlass, contentClipKlass, contentBodyKlass, contentPaddingKlass.