Structural slot for the per-row body inside the More popover
CngxTabOverflowItem
Directivev0.1.0WCAG AA
projects/common/tabs/overflow/tab-overflow-item.directive.ts
Import#
import { CngxTabOverflowItem } from '@cngx/common/tabs'
Description#
Structural slot for the per-row body inside the More popover.
3-stage cascade: per-instance directive >
CNGX_TABS_CONFIG.templates.overflowItem > built-in label text.
<cngx-tab-overflow>
<ng-template cngxTabOverflowItem let-tab let-disabled="disabled">
<my-icon [name]="tab.id" />
<span class="row-label" [class.is-muted]="disabled">
{{ tab.label() }}
</span>
</ng-template>
</cngx-tab-overflow>Metadata#
CngxTabOverflowItem
The slot replaces only the visible body of each overflow popover row. The row shell, role, and selection stay library-owned, so an override cannot break the menu pattern.
- Role and state are library-owned. Each row is a
role="menuitem"inside the popoverrole="menu";aria-disabledreflects the pre-resolveddisabledflag. The template never sets these. - Selection is commit-aware. Picking a row runs through the
pick()callback, which routesselectByIdthrough the commit lifecycle (optimistic/pessimistic, rollback on failure). Use it; do not wire your own click handler. - Keyboard and focus are library-owned. The active row is steered by
aria-activedescendanton the trigger; the slot manages neither focus nor keys. - Keep the template presentational. The shell is already a menuitem, so do not nest interactive elements (a
<button>,<a>, orrouterLink) inside it. Icons and text only.