A zone is an id, a label, a key, and whatever you want it to look like. Click any tile below to rename it, recolour
it, give it an icon or change its key — then switch layouts and watch the regions follow. Nothing here is a
special case: it is the same zones array and the same layout option you would pass.
Click a tile on the stage, or a row here, to edit it.
Ten or sixteen is where the radial menu grows its second and third ring — each one longer than the last, so it holds proportionally more.
A half or a quarter is not decoration: it is what lets the menu sit against an edge, or beside a thumb, without wedges pointing off the screen.
The default tile is a Finder-style folder: a chip filled with the zone's colour, or its emoji, or its image; a
two-line label; the key at the foot. renderZone replaces it entirely — you get the zone and an
empty element, and whatever you put in it is the tile.
new Deck(el, {
zones,
layout: 'radial',
renderZone: (zone, el) => {
// zone: { id, label, key, color, icon, image, index, empty, angle, pos, cell }
el.style.setProperty('--tr-seg', zone.color); // drives the region behind it too
el.innerHTML = `
<span class="tr-glyph">${zone.icon ?? ''}</span>
<span class="tr-label">${zone.label}</span>
<kbd>${zone.key}</kbd>`;
},
});
The class names are the library's own, so you inherit its states for free —
.tr-near, .tr-armed, .tr-suggest, .tr-picked land on the
element you filled. Or ignore them and style your own. See
rendering cards and zones.