CngxContextMenuItemRadio
projects/ui/context-menu/context-menu-item-radio.component.ts
Import#
import { CngxContextMenuItemRadio } from '@cngx/ui/context-menu'
Description#
A radio-style context-menu item (role="menuitemradio"). Thin shell over
CngxMenuItemRadio: the brain owns the role, the active-descendant
registration and the reactive aria-checked. Mutual exclusion is scoped to
the enclosing [cngxMenuGroup] - the group owns the selected value, the
item forwards its value.
<div cngxMenuGroup label="Density" [(selectedValue)]="density">
<cngx-context-menu-item-radio value="cozy">Cozy</cngx-context-menu-item-radio>
<cngx-context-menu-item-radio value="compact">Compact</cngx-context-menu-item-radio>
</div>Metadata#
Host#
Relationships
Index#
Inputs#
Leading glyph shorthand rendered in the icon slot (decorative,
aria-hidden). Suppressed when the consumer projects a richer
[cngxMenuItemIcon] marker. The checked-indicator gutter renders
independently of the icon, so a checked item stays visibly checked beside
a custom icon.
Instance Properties#
unknownA consumer-projected [cngxMenuItemIcon] marker, when present. Gates the
string [icon] shorthand off so the projected icon is the only one drawn.
contentChild(CngxMenuItemIcon)HostBindings#
| Binding | Expression |
|---|---|
[style.--cngx-context-menu-item-check-glyph] | checkGlyph |
Default visuals for CngxContextMenuItem and the checkbox / radio shells
that share this stylesheet. The item brains are host directives, so the
base [cngxMenuItem] attribute rules in cngx-menu.css never reach these
hosts - the row geometry (padding, gap, radius, cursor, tap-target floor)
is painted here, while the slot layout (.cngx-menu-item__label, __icon,
__kbd) and the highlighted / disabled state painting is adopted from the
base skin via the classes the brains stamp. The checked-indicator glyph is
likewise attribute-keyed in the base skin, so the organism re-draws it
keyed on the role the brain sets.
Inheritance
--cngx-context-menu-item-caret-color->--cngx-color-text-muted--cngx-context-menu-item-check-color->--cngx-color-primary
Pair with
@cngx/themes/material/context-menu-theme- Material 3 palette