<line>

<line> draws a straight line across its own bounds, corner to corner.

src/hud.ts2

<line x={0} y={BAR_H * 2 + 12} w="fill" h={1} color={0x594f43} />

Reference

<line>

Props

<line> accepts all common props, plus:

• color: A number, as 0xRRGGBB.
• lineWidth: A number. Thickness in pixels.
• lineDirection: A boolean. Which diagonal of the component’s box the line follows — top-left to bottom-right, or bottom-left to top-right.
• deferred: A boolean. Leave the definition’s value for this line’s state-reading props until the state first moves — see common props.

Caveats

• The component’s width and height are the line’s extent, not a bounding box it is drawn inside. A horizontal rule is a <line> with h={1}.
• For a plain horizontal or vertical rule a filled <rect> does the same and can carry a gradient; the line is for a diagonal.

Usage

A horizontal rule

src/hud.ts2

<line x={0} y={BAR_H * 2 + 12} w="fill" h={1} color={0x594f43} />

A diagonal

src/hud.ts2

<layer x="right" y="bottom" w={22} h={22}>
  <line w="fill" h="fill" color={0x6f6252} lineWidth={1} />
  <line w="fill" h="fill" color={0x6f6252} lineWidth={1} lineDirection />
</layer>

Troubleshooting

My line is horizontal when I wanted a diagonal

A line runs corner to corner of its own box. A box with h={1} has only one diagonal to run along; give it the height of the diagonal you want.