Utilities

Style Class

Shows, hides or toggles another element by classes from a button, with enter and leave animations — small menus, collapsible sections — without writing a component.

Part of @tectra-ng/utils (npm install @tectra-ng/utils, also included in tectra-ng).

Features2

API

Theming

<div class="anchor">  <button    txButton    label="Shortcuts"    icon="chevron-down"    iconPos="right"    severity="secondary"    txStyleClass    enterFromClass="is-hidden"    enterActiveClass="fade-in"    leaveActiveClass="fade-out"    leaveToClass="is-hidden"    hideOnOutsideClick    hideOnEscape  ></button>  <tx-card class="panel is-hidden">    <div class="shortcuts">      <span>Search</span><kbd>/</kbd> <span>Command palette</span><kbd>Ctrl K</kbd>      <span>New item</span><kbd>N</kbd>    </div>  </tx-card></div>

Toggle class

toggleClass just flips classes on a target found by a selector — here a compact mode of a list.

Invoices

Payments

Refunds

Payouts

17 lines

<div class="stack">  <div>    <button      txButton      label="Compact rows"      severity="secondary"      size="small"      txStyleClass=".style-class-list"      toggleClass="compact"    ></button>  </div>  <div class="style-class-list">    @for (item of items; track item) {      <div class="row">{{ item }}</div>    }  </div></div>