Glyphs
Glyphs is a grid of symbols or emoji to pick one from.
When to use
Use it in a picker, inside a panel or a popover. With row the symbols run in one line instead, for a toolbar. When the same symbol appears twice, pass selected to tell them apart by position. A choice of colors is a ColorGrid.
Props
| Prop | Default | Description |
|---|---|---|
items | required | The symbols, one per cell |
value | The selected symbol | |
onselect | required | Called with the symbol and its position |
label | (symbol, i) to the name of a cell (default: the symbol) | |
selected | (symbol, i) to whether a cell is selected | |
row | false | One line that scrolls sideways |
columns | 8 | The number of columns; in a row, a cell is as wide as one |
Contract
columns columns (eight by default) divide the width, at most a square, gap-2xs apart; a cell is as tall as a button and its symbol takes the size of the h1 role. In a row, a cell is as wide as a column of the grid, so that a band above a grid with the same columns and the same width lines up with it. A cell has the raise surface on hover; the selected cell has --kata-color-raise-2 and a line of --kata-color-blue-ink inside, and reports aria-pressed. The focus ring is drawn inside. The font of the symbols is --kata-glyph-font, set by the container (an emoji font, for example).