GitHub

Pack

Dashboard pack

Numbers to watch: amounts in a range, charts, devices and their status.

Added with

npx prongs add dashboard

Profile

UI

Intents

6

Domains

layout.*
View as Markdown

Adding it

Terminal
npx prongs add dashboard

Copies the 6 intents below into your registry, skipping any it already has, and regenerates PRONGS.md. A “not for” line that points at an intent your registry does not have is left out.

Intents

layout.* Layout

layout.meter<div>

An amount within a known range: battery, storage used, a quota. Give it aria-label, aria-valuenow, aria-valuemin and aria-valuemax, and one layout.meter.fill inside

layout.meter.fill<div>

The filled part of a layout.meter. Set its width to the amount with style={{ width: "62%" }}; data-tone="warning" or "danger" when the amount is a problem

layout.chart<figure>

A chart: a trend over time, a breakdown. Renders <figure>; put the chart's svg or canvas inside with a height, and a text.caption that says what it shows

layout.blocks<div>

An amount shown as a row of blocks, like a battery: the more blocks filled, the more of it. Each block is a layout.blocks.cell, with data-on on the filled ones; data-tone="success", "warning" or "danger" on the row colours them by level. Give it aria-valuenow, aria-valuemin and aria-valuemax

layout.blocks.cell<div>

One block of a layout.blocks; data-on when it is filled

layout.badged<div>

An icon or avatar with a status dot on its corner: a device and whether it is online. Put the icon first and a text.indicator last

Next to the starter

The starter intents this pack’s intents are told apart from. Each pack intent’s page says when to use which.

  • layout.loading

    Stands in for content that is still loading: a full-width line of text unless you give it the shape of what will appear

    <div>
  • text.stat

    A number that stands out on its own: a metric, a result, a price, an order total

    <p>
  • text.indicator

    Marks something as new or unread, or shows a status, with no word or number. Give it an aria-label, like "Unread" or "Charging"; data-tone="success", "info", "warning", "danger" or "muted" colours a status; data-busy shows it is in progress

    <span>
  • layout.labelled

    An icon, avatar or logo beside its text: a person’s photo and name, an icon and its label. The text shrinks and wraps; the icon keeps its size

    <div>

For registry authors

Pack intent. prongs add dashboard puts the dashboard pack’s intents in your registry. They are then yours like the starter intents: rename, restyle and add to them, and see them with prongs add gallery.