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.