Make a second label #1749
-
i would like to create a another label in header in joint.shapes.standard.HeaderedRecord like this |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
You can extend predefined shapes in JointJS or create custom elements. For the standard.HeaderedRecord, you could create some custom markup like the following: markup: [{
tagName: 'rect',
selector: 'body'
}, {
tagName: 'rect',
selector: 'header',
}, {
tagName: 'text',
selector: 'headerText',
className: 'headerLabel'
}, {
tagName: 'text',
selector: 'headerSubText',
className: 'headerSubLabel'
}, {
tagName: 'text',
selector: 'bodyText',
className: 'bodyLabel'
}] Then you can style the sub label how you want in the shape attributes: attrs: {
// other attributes
headerSubText: {
text: 'headerSubLabel',
fill: 'black',
fontFamily: 'Roboto Condensed',
fontWeight: 'Normal',
fontSize: 11,
y: 20,
x: 10
}
} |
Beta Was this translation helpful? Give feedback.
You can extend predefined shapes in JointJS or create custom elements.
https://resources.jointjs.com/tutorial/custom-elements
https://resources.jointjs.com/tutorial/ts-shape
For the standard.HeaderedRecord, you could create some custom markup like the following:
https://resources.jointjs.com/docs/jointjs/v3.5/joint.html#dia.Cell.markup