Hotbar
Horizontal strip of SlotTiles for inventory / abilities.
ui hud
Preview
Installation
npx slintcn@latest add hotbarUsage
import { Hotbar, HotbarSlot } from "slintcn/components/hotbar.slint";
import { SlotTileTone } from "slintcn/components/slot-tile.slint";
Hotbar {
slots: [
{ tone: SlotTileTone.stone, label: "1" },
{ tone: SlotTileTone.accent, label: "2" },
{ tone: SlotTileTone.empty, label: "3" },
{ tone: SlotTileTone.stone, label: "4" },
];
active <=> slot;
selected(i) => { /* equip slot i */ }
}Properties
slots
in
[HotbarSlot]
Slot data left-to-right. Each `tone` drives the tile's surface, `label` is shown beneath each tile.
active
in-out
int
Two-way; index of the active slot (highlight + state: selected).
tile-size
in
length
Pixel side length of each square slot.
selected
callback
(int)
Fired with the slot index when a tile is clicked.
API
Accessibility
focusablenoDependencies
Installed automatically as transitive dependencies of slintcn add hotbar.