Meter

A measurement within its range, coloured by how near it sits to the best value.

scheme

Battery

Storage used

forSlots(MeterSlots)(Recipes.Meter({}))

Usage

The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.

export const MeterStyle = forSlots(MeterSlots)(Recipes.Meter({}))

export const meter = <Message>(style: NamedStyle<typeof MeterSlots>, h: HtmlBuilder<Message>): Html =>
  h.div(
    [h.Style({ display: 'grid', gap: '1.25rem' })],
    [
      Meter.view(
        { id: 'preview-battery', label: 'Battery', value: 64, low: 20, high: 80, optimum: 100, style },
        h,
      ),
      Meter.view(
        {
          id: 'preview-storage',
          label: 'Storage used',
          value: 91,
          low: 20,
          high: 80,
          optimum: 0,
          valueText: (value, max) => `${value} of ${max} GB`,
          style,
        },
        h,
      ),
    ],
  )

The recipe ↗This code ↗