Layout

Panel

A titled section with an icon, header actions, content and a footer; it can collapse.

Features7

API

Theming

Basic

title and subtitle. With a title the panel is a named region.

Your name and photo are shown on comments and in the member list.

Icon and actions

icon adds a tinted square before the title; [txPanelActions] puts buttons on the right of the header.

4 members

6 lines

<tx-panel title="Members" subtitle="People who can open this project" icon="users">  <button txPanelActions txButton size="small" icon="plus" (click)="count.set(count() + 1)">    Invite  </button>  <p class="text">{{ count() }} members</p></tx-panel>

Variants

card is a bordered box, inset a tinted block inside a card, plain has no box — for sections inside another panel.

Daily summary at 9:00.

Mentions and replies only.

10 lines

<tx-panel title="Notifications" subtitle="variant card" icon="bell">  <div class="panels">    <tx-panel variant="inset" title="Email" subtitle="variant inset" icon="envelope">      Daily summary at 9:00.    </tx-panel>    <tx-panel variant="plain" title="Push" subtitle="variant plain" icon="mobile">      Mentions and replies only.    </tx-panel>  </div></tx-panel>

Align

align sets how the title and the actions line up when they differ in height.

13 lines

<div class="panels">  @for (align of aligns; track align) {    <tx-panel      variant="inset"      [title]="'align ' + align"      subtitle="A second line under the title"      icon="sliders-h"      [align]="align"    >      <button txPanelActions txButton size="small" variant="outlined">Edit</button>    </tx-panel>  }</div>

Toggleable

toggleable adds a button that collapses the content with an animation; [(collapsed)] holds the state. The button has aria-expanded and aria-controls.

Cache lifetime, request limits and webhooks.

Collapsed

10 lines

<tx-panel  title="Advanced settings"  subtitle="Change only if you know what they do"  icon="cog"  [toggleable]="true"  [(collapsed)]="collapsed">  <p class="text">Cache lifetime, request limits and webhooks.</p></tx-panel><p class="status">{{ collapsed() ? 'Collapsed' : 'Expanded' }}</p>

Header and footer

[txPanelHeader] adds content under the title; [txPanelFooter] holds actions at the bottom.

Address

25 lines

<tx-panel title="Domain" icon="globe">  <div txPanelHeader class="pills">    <tx-pill tone="success" size="small" icon="check">Verified</tx-pill>    <tx-pill size="small">HTTPS</tx-pill>  </div>  <tx-field label="Address">    <input      txInput      [fluid]="true"      [value]="domain()"      (input)="domain.set($any($event.target).value)"    />  </tx-field>  <div txPanelFooter class="actions">    <button      txButton      severity="secondary"      variant="text"      (click)="domain.set('docs.example.com')"    >      Reset    </button>    <button txButton (click)="save()">Save</button>  </div></tx-panel>

Design tokens

dt changes one panel — here the icon colours and the radius.

Visa ending in 4242.

14 lines

<tx-panel  title="Billing"  subtitle="Next invoice on Dec 1"  icon="credit-card"  [dt]="{    root: {      borderRadius: '8px',      iconColor: 'var(--tx-green-700)',      iconBackground: 'var(--tx-green-100)',    },  }">  Visa ending in 4242.</tx-panel>