DimensionRuler

The Dimension Ruler is used to display the real world length of the design area. It is meant to be positioned next to the design area.

name	type	required	comment
length	number	yes	Length of the ruler in pixels.
orientation	"horizontal" | "vertical"	yes	Controls whether the ruler is displayed horizontally or vertically.
ariaLabel	string	no
className	string	no
label	string	no	Text to be shown within the ruler.
role	AriaRole	no
style	CSSProperties	no

Result

Loading...

Live Editor

function DimensionRulerDemo() { return <DimensionRuler length={300} orientation="horizontal" label="50mm" />; }

function DimensionRulerDemo() {
    return <DimensionRuler length={300} orientation="horizontal" label="50mm" />;
}