Dashboard Grid

An auto-fill grid of dashboard tiles: as many columns as fit, tiles spanning columns or the full row. KPI tiles from props, anything else in the slot.

Usage

SDashboardGrid({ title: 'Overview', minTileWidth: 200 }) {
  SDashboardTile({ title: 'Total Revenue', icon: 'dollar-sign', value: '$45,231.89',
    delta: '+20.1% from last month', trend: 'up' })
  ...
  SDashboardTile({ title: 'Sales', span: 2 }) { Chart() }   // 2 columns when there are 2+
  SDashboardTile({ full: true }) { RecentOrders() }          // always the whole row
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SDashboardGrid

Dashboard section: optional heading + an auto-fill grid of tiles (repeat(auto-fill, minmax(minTileWidth, 1fr))) — 1 column on a phone, 2–4+ on tablets and desktops, no breakpoints. Tiles span columns with span (clamped to the current column count) or the whole row with full.

Heading-row actions go in actionsBuilder: wrapBuilder(rangePicker) (a global @Builder), so the tiles keep the trailing closure.

Prop	Type	Default	Description
title	ResourceStr | undefined	undefined
description	ResourceStr | undefined	undefined
minTileWidth	number	240	minimum tile width (vp)
gap	number	16
maxColumns	number	0	upper bound on columns (0 = unlimited)
actionsBuilder	WrappedBuilder<[]> | undefined	undefined	Trailing content of the heading row (filters, a date range, actions); needs a title. A region, not a slot: actionsBuilder: wrapBuilder(myActions) of a global @Builder (no this: render a component).

Slots: children (trailing closure)

SDashboardTile

A dashboard card. Quick props render a KPI tile (title + icon, big value, delta with trend icon); the slot adds anything else (charts, tables, lists) below.

Prop	Type	Default	Description
title	ResourceStr | undefined	undefined
icon	string | undefined	undefined
value	ResourceStr | undefined	undefined
delta	ResourceStr | undefined	undefined
trend	DashboardTrend DashboardTrend = 'up' | 'down' | 'none'	'none'
span	number	1	columns spanned (clamped to the current column count)
variant	CardVariant CardVariant = 'default' | 'outline' | 'elevated' | 'ghost' | 'filled'	'default'	card variant of the tile (the theme's --card-* tokens apply as to any SCard)
tokens	CardTokens	{}	per-instance card tokens (ADR D13), e.g. { background: 'transparent', shadow: 'none' }
full	boolean	false	span the whole row

Slots: children (trailing closure)