LinkLabel
A simplified link label, text plus optional styling, that linkLabel
expands into the raw dia.Link.Label markup and attrs JointJS expects.
Properties​
backgroundBorderRadius?​
optional backgroundBorderRadius?: number;
Corner radius of the label background, in px. Applies to the 'rect' shape.
Default​
4
backgroundClassName?​
optional backgroundClassName?: string;
Extra CSS class added to the label background element.
Default​
''
backgroundColor?​
optional backgroundColor?: string;
Fill color of the label background. Empty inherits the theme default.
Default​
''
backgroundOpacity?​
optional backgroundOpacity?: number;
Opacity of the label background, from 0 (transparent) to 1 (opaque).
backgroundOutline?​
optional backgroundOutline?: string;
Outline (stroke) color of the label background. Empty for no outline.
Default​
''
backgroundOutlineWidth?​
optional backgroundOutlineWidth?: number;
Outline (stroke) width of the label background, in px.
Default​
''
backgroundPadding?​
optional backgroundPadding?:
| number
| {
horizontal?: number;
vertical?: number;
};
Padding between the text and the edge of its background. A number applies to both axes; an object sets each axis.
Default​
{ horizontal: 4, vertical: 2 }
backgroundShape?​
optional backgroundShape?: LiteralUnion<"rect" | "ellipse">;
Background outline shape: 'rect', 'ellipse', or a raw SVG path d string.
Default​
'rect'
className?​
optional className?: string;
Extra CSS class added to the label text element.
Default​
''
color?​
optional color?: string;
Text color. Empty inherits the theme default.
Default​
''
fontFamily?​
optional fontFamily?: string;
Font family of the label text. Empty inherits the theme default.
Default​
''
fontSize?​
optional fontSize?: number;
Font size of the label text, in px. Empty inherits the theme default.
Default​
''
offset?​
optional offset?:
| number
| {
x: number;
y: number;
};
Shift the label off the path. A number nudges it perpendicular to the line; { x, y } moves it freely.
position?​
optional position?: number;
Where the label sits along the link: 0–1 is a fraction of the path, values above 1 are an absolute distance in px.
Default​
0.5
text​
text: string;
The text shown on the link.