machines-ui
frame

Track

Horizontal track that spans the frame. Use for graphs that represent a range (meter, stack, bullet, rank) — pair with GraphTick so ticks flex edge to edge. Packed graphs (spark, bars, cells, uptime) should not use tracks.

Install

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { GraphTrack } from '@fractaldesign/machines-ui';

Preview

[ TRACK ]
<GraphTrack>
  {#each glyphs as glyph}
    <GraphTick>{glyph}</GraphTick>
  {/each}
</GraphTrack>

Props

PropTypeDefaultDescription
class string ''

API

  • snippet children Content rendered inside the component.
  • class forwarded to the outer element

Related

Used by

src/lib/components/frame/GraphTrack.svelte

machines-ui