<rect>

<rect> draws a rectangle. It is what backdrops, dividers and dimmers are made of.

src/hud.ts2

<rect w="fill" h="fill" color={0x1a1712} fill />

Reference

<rect>

Props

<rect> accepts all common props, plus:

• color: A number, as 0xRRGGBB.
• fill: A boolean. true fills the rectangle; omitted, only the outline is drawn.
• lineWidth: A number. Thickness of the outline when fill is not set.
• transparency: A number from 0 to 255, where 0 is opaque and 255 is invisible.
• transparencyBottom: A number. When set, transparency is graduated from transparency at the top to this at the bottom.
• blendColor: A number, as 0xRRGGBB. When set, the fill is graduated between color and this.
• fillMode: A number. Selects the client’s fill mode.
• deferred: A boolean. Leave the definition’s value for this rect’s state-reading props until the state first moves — see common props.

Caveats

• transparency runs the opposite way to an “opacity” value: 0 is fully visible, 255 is fully invisible.
• A <rect> cannot have children. Put it inside a <layer> and place the contents as siblings after it, so they draw on top.

Usage

Filling a panel background

src/chrome.ts2

export const SunkenBox = ({ children }: { children?: Children }): Component => (
  <layer w="fill" h="fill">
    <rect w="fill" h="fill" color={Colors.WELL} fill transparency={80} />
    <rect w="fill" h="fill" color={Colors.BLACK} />
    <rect x="center" y="center" w={{ fill: 2 }} h={{ fill: 2 }} color={0x474745} />
    <layer w="fill" h="fill">{children}</layer>
  </layer>
);

Drawing a bar from a value

src/hud.ts2

<rect x={1} y={1} w={TRACK_W * value / max} h={{ fill: 2 }} color={color} fill />

Dimming what is behind

src/chrome.ts2

<rect x="center" y="center" w={{ fill: 2 }} h={{ fill: 2 }}
      color={0x30201c} fill transparency={200} />

Graduating a fill

src/hud.ts2

<rect x={1} y={1} w={TRACK_W * value / max} h={7} color={0xffffff} fill
      transparency={190} transparencyBottom={255} />

Outlining without filling

src/hud.ts2

<rect w="fill" h="fill" color={0x1a1712} fill />
<rect w="fill" h="fill" color={0x000000} />

Lighting a plate under the pointer

src/menu.ts2

<rect w="fill" h="fill" color={0x2a2218} fill
      hover={{ color: 0x5a4a2a, releaseAfterMs: 400 }} />

Troubleshooting

My rectangle is invisible

Check fill. Without it only the outline is drawn, and a one-pixel outline in the backdrop’s own colour does not show. Then check transparency — 255 is fully invisible, not fully visible.