Vue Gantt - toolbar
items[]
Selector: DxItem
Type:
Accepted Values: 'separator' | 'undo' | 'redo' | 'expandAll' | 'collapseAll' | 'addTask' | 'deleteTask' | 'zoomIn' | 'zoomOut'
The Gantt UI component allows you to add default and create custom toolbar items.
App.vue
- <template>
- <DxGantt>
- <DxToolbar>
- <DxItem name="undo"/>
- <DxItem name="redo"/>
- <DxItem name="separator"/>
- <DxItem
- :options="aboutButtonOptions"
- widget="dxButton"
- />
- </DxToolbar>
- </DxGantt>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import 'devexpress-gantt/dist/dx-gantt.css';
- import {
- DxGantt, DxToolbar, DxItem
- // ...
- } from 'devextreme-vue/gantt';
- export default {
- components: {
- DxGantt, DxToolbar, DxItem
- }
- data() {
- return {
- aboutButtonOptions: {
- text: 'About',
- icon: 'info',
- stylingMode: 'text',
- onClick: () => {
- // ...
- }
- }
- };
- }
- };
- </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.