compare

Two to four options side by side with one row per attribute, marking the best value in each row: plans, products or choices to weigh up. Use compare-row children.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the propspick

Props

"text"textA title above the comparison.optional

itemsexpressionThe options, a list of records, e.g. items=plans. Two to four.required

namenameThe field holding each option's name, shown at the top of its column (default name).name

pickstringThe name of the option to recommend: its column is highlighted and marked Recommended.—

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

Children: compare-row

For your model

The exact guide entry a model gets for compare, generated from the same definition.

  compare "<text>"  — Two to four options side by side with one row per attribute, marking the best value in each row: plans, products or choices to weigh up. Use compare-row children.
    "<text>"  A title above the comparison.
    items=<expression, required>  The options, a list of records, e.g. items=plans. Two to four.
    name=<name>  The field holding each option's name, shown at the top of its column (default name).
    pick=<string>  The name of the option to recommend: its column is highlighted and marked Recommended.
    children: compare-row
    example:
      state plans=[{name: "Basic", price: 9, storage: 50, support: "Email"}, {name: "Pro", price: 19, storage: 500, support: "Chat"}, {name: "Team", price: 49, storage: 2000, support: "Phone"}]
      compare items=plans pick="Pro"
        compare-row "Price a month" field=price format=money best=low
        compare-row "Storage (GB)" field=storage format=number best=high
        compare-row "Support" field=support

  compare-row "<text>"  — One row of a comparison: an attribute and the field each option's value comes from.
    "<text>"  The attribute's name. Defaults to the field name.
    field=<name, required>  The field of each option to show, e.g. field=price. true and false show as a check and a dash.
    format=<text|number|money>  text, number (1,200.5) or money ($1,200.00).
    best=<low|high>  low or high: mark the lowest or highest number in the row as the best. Leave out when neither is better.
    only inside: compare
    example:
      compare-row "Price a month" field=price format=money best=low

More data

stat rating chart chart-line chart-rule chart-note meter table table-column compare-row details detail schedule board tree flow map pin

All data elements on one page →