Grid and responsive style

Place marks on explicit grid tracks and apply a local width rule.

APIs demonstrated

Grid from @pibbl/core
GridProps from @pibbl/core
GridStyle from @pibbl/core
GridTrack from @pibbl/core
GridItemStyle from @pibbl/core
PibblResponsiveStyle from @pibbl/core
PibblSizeQuery from @pibbl/core
PibblStyleRule from @pibbl/core

Complete example

Plain source. Run as a browser module after the document body exists. TSX uses jsx: "react-jsx" and jsxImportSource: "@pibbl/core".

import {
  Grid,
  Rectangle,
  pibbl,
  signal,
  type PibblResponsiveStyle,
  type PibblSizeQuery,
  type PibblStyleRule,
  type GridItemStyle,
  type GridProps,
  type GridStyle,
  type GridTrack,
  type RectStyle,
} from "@pibbl/core";

const columns: readonly GridTrack[] = ["1fr", "2fr"];
const row: GridItemStyle = {
  gridColumnStart: 1,
  gridColumnSpan: 2,
  gridRowStart: 1,
};
const query: PibblSizeQuery = { maxWidth: 280 };
const narrowRule: PibblStyleRule<RectStyle> = {
  query,
  style: { fill: "#f97316" },
};
const responsive: PibblResponsiveStyle<RectStyle> = {
  width: "100%",
  height: "100%",
  fill: "#0f766e",
  when: [narrowRule],
};
const gridStyle: GridStyle = {
  width: 320,
  height: 220,
  gridTemplateColumns: columns,
  gridTemplateRows: [90, 90],
  gap: 8,
  padding: 10,
};
const gridWidth = signal(320);
const gridProps: GridProps = {
  children: (
    <>
      <Rectangle style={{ ...responsive, ...row }} />
      <Rectangle
        style={{
          gridColumnStart: 1,
          gridRowStart: 2,
          width: "100%",
          height: "100%",
          fill: "#7c3aed",
        }}
      />
      <Rectangle
        style={{
          gridColumnStart: 2,
          gridRowStart: 2,
          width: "100%",
          height: "100%",
          fill: "#e11d48",
        }}
      />
    </>
  ),
};
const canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 220;
document.body.append(canvas);
const button = document.createElement("button");
button.textContent = "Narrow";
document.body.append(button);
button.addEventListener("click", () => {
  const narrow = gridWidth.get() === 320;
  gridWidth.set(narrow ? 260 : 320);
  button.textContent = narrow ? "Wide" : "Narrow";
});
const app = pibbl(
  canvas,
  <Grid {...gridProps} style={{ ...gridStyle, width: gridWidth }} />,
);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

Usage notes

Use Narrow/Wide to cross the local width query and change the top mark’s color.

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 380919b. ALPHA — NOT FOR PRODUCTION USE.