Draw a rectangle or rounded rectangle. Use it for chart bars and diagram blocks.

Draw a vector rectangle

tsx
import { Drawing, Rectangle } from 'kuito';

export function Example() {
  return (
    <Drawing viewBox={[0, 0, 100, 100]} width={120} height={120} label="Vector example">
      <Rectangle x={10} y={20} width={80} height={60} rx={8} fill="#2563eb" />
    </Drawing>
  );
}

Behavior

Place this shape inside Drawing. Coordinates use its viewBox, not screen points. Fill and stroke control paint. Shapes are drawing instructions rather than independently accessible native views.

Continue

Read Drawing for a complete workflow. See the complete prop reference for types and documented defaults.

Referência

Assinaturas

ts
(_props: RectangleProps): KuitoNode

Parâmetros

NomeTipoObrigatórioDescrição
_propsRectanglePropsSim—

Devolve

KuitoNode

Props: RectangleProps

Props (incluindo props herdadas) 20

NomeTipoObrigatórioDescrição
xnumberNão—
ynumberNão—
widthnumberSim—
heightnumberSim—
rxnumberNãoCorner radii; each defaults to the other, as SVG's do.
rynumberNão—
fillstringNãoA hex color, or none; black by default.
fillRuleFillRuleNão—
strokestringNãoA hex color, or none, the default.
strokeWidthnumberNãoIn user units; 1 by default.
strokeLinecapStrokeLinecapNão—
strokeLinejoinStrokeLinejoinNão—
strokeMiterlimitnumberNão—
strokeDasharrayreadonly number[]NãoDash and gap lengths in user units, repeated.
strokeDashoffsetnumberNão—
opacitynumberNãoMultiplies with its Groups' opacity.
translateXnumberNãoIn user units, then rotate in degrees and scale, about the origin.
translateYnumberNão—
scalenumberNão—
rotatenumberNão—
Gerado a partir das declarações TypeScript públicas: assinaturas, props e predefinições vêm da fonte verificada, as descrições da sua JSDoc. Nenhuma predefinição é inventada.