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.
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>
- ...
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.