@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UIDashboard

    Dashboard host component.

    Lays out projected UIDashboardPanel children on a CSS grid. The grid column count is configurable via the columns input — either a fixed number or 'auto' for responsive auto-fill.

    Panels declare their own grid span via their config.placement property. The host is intentionally content-agnostic: it provides the grid shell and panel management (collapse, remove, restore) while consumers project whatever widgets they need.

    <ui-dashboard [columns]="3" [gap]="16">
      <ui-dashboard-panel [config]="{ id: 'kpi', title: 'KPI', placement: { colSpan: 2 } }">
        <my-kpi-widget />
      </ui-dashboard-panel>

      <ui-dashboard-panel [config]="{ id: 'chart', title: 'Revenue' }">
        <my-chart />
      </ui-dashboard-panel>

      <ui-dashboard-panel [config]="{ id: 'feed', title: 'Activity', placement: { colSpan: 3 } }">
        <my-activity-feed />
      </ui-dashboard-panel>
    </ui-dashboard>
    Index

    Constructors

    constructor

    Properties

    ariaLabel collapsedPanels columns defaultDockIcon dockMenuClicked dockMenuIcon dockMenuOpen dockPosition dockShowTitles gap gridGap gridTemplateColumns minColumnWidth panelRemoved panels removedPanelIds

    Methods

    closeDockMenu menuTogglePanel resolveIcon restoreAll restorePanel toggleDockMenu

    Constructors

    • Returns UIDashboard

    Properties

    ariaLabel: InputSignal<string> = ...

    Accessible label for the dashboard region.

    collapsedPanels: Signal<UIDashboardPanel[]> = ...

    Panels that are currently collapsed (shown in the dock).

    columns: InputSignal<DashboardColumns> = ...

    Number of grid columns.

    • A number (e.g. 3) creates a fixed column layout.
    • 'auto' uses responsive auto-fill with minmax(280px, 1fr).

    Defaults to 'auto'.

    defaultDockIcon: InputSignal<string> = ...

    Default SVG icon for panels that don't declare their own icon. Defaults to the Lucide LayoutDashboard icon.

    dockMenuClicked: OutputEmitterRef<void> = ...

    Emitted when the dock menu button is clicked.

    dockMenuIcon: InputSignal<string | undefined> = ...

    SVG icon for the optional dock menu button. When set, a menu button is rendered at the leading edge of the dock. When omitted (undefined), no menu button is shown.

    dockMenuOpen: WritableSignal<boolean> = ...

    Whether the dock panel-picker menu is open.

    dockPosition: InputSignal<DashboardDockPosition> = ...

    Where the collapsed-panel dock is rendered. Defaults to 'bottom'.

    dockShowTitles: InputSignal<boolean> = ...

    Whether dock chips show the panel title alongside the icon. Defaults to false (icon-only with title in tooltip).

    gap: InputSignal<number> = ...

    Gap between grid cells in pixels. Defaults to 16.

    gridGap: Signal<string> = ...

    CSS value for gap.

    gridTemplateColumns: Signal<string> = ...

    CSS value for grid-template-columns.

    minColumnWidth: InputSignal<number> = ...

    Minimum column width in pixels (only used when columns is 'auto'). Defaults to 280.

    panelRemoved: OutputEmitterRef<string> = ...

    Emitted when any panel is removed by the user.

    panels: Signal<readonly UIDashboardPanel[]> = ...

    All projected dashboard panels.

    removedPanelIds: Signal<string[]> = ...

    Panels that have been removed by the user.

    Methods

    • Close the dock panel-picker menu.

      Returns void

    • Toggle a panel's collapsed state from the menu. If removed, restore it first.

      Parameters

      Returns void

    • Resolve the icon SVG for a panel, falling back to the default.

      Parameters

      • panelIcon: string | undefined

        The panel's own icon, if any.

      Returns string

      SVG inner-content string.

    • Restore all removed panels.

      Returns void

    • Restore a previously removed panel by its id.

      Parameters

      • panelId: string

        The config.id of the panel to restore.

      Returns boolean

      true if the panel was found and restored.

    • Toggle the dock panel-picker menu.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods