ToggleButton
A button that stays pressed — a form control for a boolean.
1 lines
<tx-toggle-button [onLabel]="'On'" [offLabel]="'Off'" />15 lines
<div class="flex"> <tx-toggle-button [onLabel]="'Locked'" [offLabel]="'Unlocked'" [onIcon]="'check'" [offIcon]="'times'" /> <tx-toggle-button [onLabel]="'Subscribed'" [offLabel]="'Subscribe'" [onIcon]="'bell'" [offIcon]="'bell'" [iconPos]="'right'" /></div>Form
A form control with a (changed) event.
9 lines
<div class="stack"> <tx-toggle-button [formControl]="notify" [onLabel]="'Email on'" [offLabel]="'Email off'" (changed)="clicks.update((n) => n + 1)" /> <span class="hint">Value: {{ notify.value }} · changed {{ clicks() }} times</span></div>5 lines
<div class="flex"> <tx-toggle-button [size]="'small'" [onLabel]="'Small'" [offLabel]="'Small'" /> <tx-toggle-button [onLabel]="'Medium'" [offLabel]="'Medium'" /> <tx-toggle-button [size]="'large'" [onLabel]="'Large'" [offLabel]="'Large'" /></div>4 lines
<div class="flex"> <tx-toggle-button [disabled]="true" [onLabel]="'On'" [offLabel]="'Off'" /> <tx-toggle-button [invalid]="true" [onLabel]="'Accept'" [offLabel]="'Accept terms'" /></div>