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.

Référence

Signatures

ts
(_props: RectangleProps): KuitoNode

Paramètres

NomTypeRequisDescription
_propsRectanglePropsOui—

Retourne

KuitoNode

Props: RectangleProps

Props (props héritées incluses) 20

NomTypeRequisDescription
xnumberNon—
ynumberNon—
widthnumberOui—
heightnumberOui—
rxnumberNonCorner radii; each defaults to the other, as SVG's do.
rynumberNon—
fillstringNonA hex color, or none; black by default.
fillRuleFillRuleNon—
strokestringNonA hex color, or none, the default.
strokeWidthnumberNonIn user units; 1 by default.
strokeLinecapStrokeLinecapNon—
strokeLinejoinStrokeLinejoinNon—
strokeMiterlimitnumberNon—
strokeDasharrayreadonly number[]NonDash and gap lengths in user units, repeated.
strokeDashoffsetnumberNon—
opacitynumberNonMultiplies with its Groups' opacity.
translateXnumberNonIn user units, then rotate in degrees and scale, about the origin.
translateYnumberNon—
scalenumberNon—
rotatenumberNon—
Généré depuis les déclarations TypeScript publiques : signatures, props et valeurs par défaut viennent de la source vérifiée, les descriptions de sa JSDoc. Aucune valeur par défaut n'est inventée.