Vue Diagram - Default Shape and Connector Settings
The Diagram component allows you to specify default settings for its items in the following ways:
- Specify settings contained in the defaultItemProperties property.
- Specify data-binding expressions contained in the edges and nodes properties to define common settings for data-bound edges and nodes.
App.vue
- <template>
- <DxDiagram
- id="diagram"
- ref="diagram"
- >
- <DxDefaultItemProperties :connector-line-type="'straight'" :style="'stroke-width: 3px'" />
- <DxNodes
- ...
- :text-style-expr="textStyleExpr"
- />
- <DxEdges
- ...
- :style-expr="styleExpr"
- />
- </DxDiagram>
- </template>
- <script>
- import { DxDiagram, DxNodes, DxEdges, DxDefaultItemProperties} from 'devextreme-vue/diagram';
- export default {
- components: {
- DxDiagram, DxNodes, DxEdges, DxDefaultItemProperties
- },
- data() {...},
- methods: {
- textStyleExpr() {
- return 'fill: green';
- },
- styleExpr() {
- return 'stroke: red';
- },
- }
- };
- </script>
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.