Hudini Dock Component

Bottom-navigation style bar (daisyUI's dock) — a row of clickable icon+label items with a controlled active state.

Dock Component

A daisyUI-style bottom-navigation bar. Receives a list of items (icon + label) and fires onSelect(id, index) when one is clicked. The Dock is stateless — it renders whichever item you mark as active. The client decides what to do with the click and whether to move the active marker (via setActiveItem(id)).

Features

  • đŸŽ¯ Icon + label per item: Font Awesome icon above a text label
  • 🖱ī¸ Callback API: onSelect(id, index) — you decide what happens
  • 🎨 Active/inactive tint: distinct colors, controlled from outside
  • 🧱 Optional background: backgroundColor + borderRadius for a bar-shaped surface
  • 📐 Composes: Dock is a Container, use it anywhere (bottom of screen, side panel, etc)

Props

  • items - DockItem[] where each item has id, icon and an optional label (icon-only if omitted)
  • active - Initial active item id (optional)
  • onSelect - (id, index) => void callback fired on click
  • activeColor / inactiveColor - Icon/label colors per state
  • iconSize / labelSize - Type sizing (FontSizeKey or px)
  • gap - Space between items (default 24px)
  • padding, backgroundColor, borderRadius - Optional bar background

Methods

  • setActiveItem(id) - Update the visual active state (no callback fired)
  • getActiveItem() - Read the currently active id

Live Example

Loading game...

Usage Example

import Phaser from 'phaser';
import {
    createTheme,
    HUDINI_KEY,
    HudiniPlugin,
    withHudini,
    Dock,
} from 'hudini';

const theme = createTheme({});
type Theme = typeof theme;

class DockDemoScene extends Phaser.Scene {
    create(): void {
        const hudini = withHudini<Theme>(this);
        const { pw } = hudini;

        const dock = new Dock({
            scene: this,
            x: this.cameras.main.centerX,
            y: this.cameras.main.height - 60,
            active: 'home',
            backgroundColor: 'slate-800',
            borderRadius: 'xl',
            padding: '3',
            items: [
                { id: 'home',    icon: 'house',            label: 'Home' },
                { id: 'search',  icon: 'magnifying-glass', label: 'Search' },
                { id: 'profile', icon: 'user',             label: 'Profile' },
                { id: 'settings', icon: 'gear',            label: 'Settings' },
            ],
            onSelect: (id, index) => {
                // Client decides what to do — update visual state:
                dock.setActiveItem(id);
                console.log('Selected', id, 'at index', index);
            },
        });

        this.add.existing(dock);
    }
}