Shape Template
Use the following properties to create a shape template:
- The customShapeTemplate property defines a common template for all shapes in the UI component.
- The template property defines a template for an individual shape.
NOTE
If the textExpr option is specified, template content may overlap with text from the data source.
Since the textExpr option has the default value 'text'
, the widget will obtain node texts from the data source’s 'text' field. To prevent his behavior, set the option to an empty string: nodes: { textExpr: "", ...
.
App.vue
CustomShapeTemplate.vue
- <DxDiagram
- id="diagram"
- ref="diagram"
- custom-shape-template="CustomShapeTemplate"
- >
- <template #CustomShapeTemplate="{ data }">
- <CustomShapeTemplate
- :employee="data.dataItem"
- :edit-employee="editEmployee"
- :delete-employee="deleteEmployee"
- />
- </template>
- ...
- <template>
- <svg class="template">
- <text
- class="template-name"
- x="50%"
- y="20%"
- >
- {{ employeeName }}
- </text>
- <text
- class="template-title"
- x="50%"
- y="45%"
- >
- {{ employeeTitle }}
- </text>
- <text
- class="template-button"
- x="40%"
- y="85%"
- @click="editEmployeeFunc"
- >
- Edit
- </text>
- <text
- class="template-button"
- x="62%"
- y="85%"
- @click="deleteEmployeeFunc"
- >
- Delete
- </text>
- </svg>
- </template>
- ...
Toolbox Shape Template
Use the following properties to create a template for a shape in the toolbox:
- The customShapeToolboxTemplate property defines a common template for all shapes in the toolbox.
- The toolboxTemplate property defines a template for a shape in the toolbox.
App.vue
CustomShapeToolboxTemplate.vue
- <DxDiagram
- id="diagram"
- ref="diagram"
- custom-shape-toolbox-template="CustomShapeToolboxTemplate"
- >
- <template #CustomShapeToolboxTemplate="{ data }">
- <CustomShapeToolboxTemplate/>
- </template>
- ...
- <template>
- <svg class="template">
- <text
- class="template-name"
- x="50%"
- y="40%"
- >
- New
- </text>
- <text
- class="template-title"
- x="50%"
- y="70%"
- >
- Employee
- </text>
- </svg>
- </template>
- ...
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.