Copy-tab

One-attribute clipboard: a trigger with data-copy-tab="panelId" copies the structured text of the target panel. Part of the delegated behaviors in ng_aux.js.

The text is built from the panel's <h4> headings (sections) and .ng-list-item rows — perfect for cheatsheets and command palettes. On success the trigger dispatches ng:aux:copy (here we listen and show a snackbar), on failure ng:aux:copy-error.

Live demo

Click Copy panel, then paste anywhere: you get the sections and rows as plain text.

Snackbar usage

ng.snackbar.show('Hello', { type: 'info' });
ng.snackbar.show('Saved', { type: 'success' });

State

ng.state.set('app:user', { id: 42 });
ng.state.get('app:user');

copy-tab.html

<div id="cheat-panel" class="ng-card">
    <div class="ng-card-body">
        <h4 class="fs-sm fw-700 mb-8">Snackbar usage</h4>
        <ul class="ng-list divided">
            <li class="ng-list-item">ng.snackbar.show('Hello', { type: 'info' });</li>
            <li class="ng-list-item">ng.snackbar.show('Saved', { type: 'success' });</li>
        </ul>
        <h4 class="fs-sm fw-700 mt-16 mb-8">State</h4>
        <ul class="ng-list divided">
            <li class="ng-list-item">ng.state.set('app:user', { id: 42 });</li>
            <li class="ng-list-item">ng.state.get('app:user');</li>
        </ul>
    </div>
</div>

<button type="button" class="ng-btn ng-btn-primary mt-16" data-copy-tab="cheat-panel">
    <i class="ph ph-copy"></i>&nbsp; Copy panel
</button>

Anatomy

data-copy-tab="panelId" h4 (sections) ng-list-item (rows)

Events

ng:aux:copy ng:aux:copy-error

Also in ng_aux.js (delegated)

Alert dismiss	`.ng-alert.dismissible .ng-alert-close` removes the alert.
Chip remove	`.ng-chip.removable .ng-chip-close` removes the chip.
List select	`.ng-list.selectable .ng-list-item` single-selects the row.