Chip
A small unfilled chip, nol-chip: a count, a count of added or removed items in the added or removed text color, or a key. Content projected into it replaces the text it composes, which is how a key chip shows its key. It never grows wider than its container: text too long for it ends with an ellipsis, and a tooltip shows the whole text while it is cut, on hover and while the control holding the chip has keyboard focus.
Examples
Loading…
States
Loading…
API
Selector nol-chip
Import from @noldova/ui.components.angular
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
kind | ChipKind | ChipKind.Count | What the chip shows; a count when not bound. |
count | number | 0 | The number a count, added or removed chip shows; 0 when not bound. A key chip ignores it. |
Accessibility
It takes no keys of its own.
A chip has no role of its own and is read as its text, such as 99+ for a count above 99, or −4 for four removed lines, so the text around it says what it counts.
An on chip's dot is hidden from assistive technology; its text says what the setting is on for.
A chip too long for its container ends with an ellipsis and keeps its whole text in a tooltip, shown only while it is cut.
Specification
Loading…