Brickslab.Toolsv2.1.1

@brickslab./ui-web

Static SVG grid lines with solid or dashed variants and optional radial mask

Grid

Props

PropTypeDéfautRequisDescription
contrastMode""custom" | "black-on-white" | "white-on-black"""custom"—Preset de contraste simple (noir/blanc inversable)
lineStyle""solid" | "dashed"""solid"—Style de trait recommandé (plein ou pointillé)
sizenumber40—Grid cell size in pixels
strokeWidthnumber1—Width of grid lines
dashedbooleanfalse—Use dashed lines instead of solid
colorstring"rgba(0, 0, 0, 0.1)"—Color of the grid lines
mask"none" | "radial""none"—Apply radial gradient mask
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  contrastMode="custom"
  lineStyle="solid"
  size={40}
  strokeWidth={1}
  dashed={false}
  color="rgba(0, 0, 0, 0.1)"
  mask="none"
/>
contrastModelineStylesizestrokeWidthdashedcolormask

Usage

tsx
import { GridPattern } from "@brickslab./ui-web";

export function MyComponent() {
  return (
    <div className="relative w-full h-screen bg-white">
      <GridPattern
        contrastMode="black-on-white"
        lineStyle="solid"
        size={40}
        strokeWidth={1}
      />
      <div className="absolute inset-0 flex items-center justify-center">
        <h1 className="text-4xl font-bold">Grid Pattern</h1>
      </div>
    </div>
  );
}

Variations

Noir sur Blanc (Pointillés)

Black / White dashed

Blanc sur Noir (Trait Plein)

White / Black solid

Blanc sur Noir (Pointillés)

White / Black dashed