diff --git a/How to/Customize existing toolbar/src/App.vue b/How to/Customize existing toolbar/src/App.vue index aed2a5c..23ab7a6 100644 --- a/How to/Customize existing toolbar/src/App.vue +++ b/How to/Customize existing toolbar/src/App.vue @@ -16,25 +16,48 @@ import Vue from 'vue'; import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-vue-pdfviewer'; +import { ComboBox } from "@syncfusion/ej2-dropdowns"; +import { TextBox } from "@syncfusion/ej2-inputs"; Vue.use(PdfViewerPlugin); var viewer; export default { name: 'app', data () { // Move the toolItem declaration inside the data function - var toolItem = { + var toolItem1 = { prefixIcon: 'e-icons e-paste', id: 'print', tooltipText: 'Custom toolbar item', align: 'left' }; - + var toolItem2 = { + id: 'download', + text: 'Save', + tooltipText: 'Custom toolbar item', + align: 'right' + }; + var LanguageList = ['Typescript', 'Javascript', 'Angular', 'C#', 'C', 'Python']; + var toolItem3 = { + type: 'Input', + tooltipText: 'Language List', + cssClass: 'percentage', + align: 'Left', + id: 'dropdown', + template: new ComboBox({ width: 100, value: 'TypeScript', dataSource: LanguageList, popupWidth: 85, showClearButton: false, readonly: false }) + }; + var toolItem4 = { + type: 'Input', + tooltipText: 'Text', + align: 'Right', + cssClass: 'find', + id: 'textbox', + template: new TextBox({ width: 125, placeholder: 'Type Here'}) + } return { documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf", resourceUrl: "https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib", - toolItem: toolItem, toolbarSettings: { - toolbarItems: [toolItem, 'OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] + toolbarItems: [toolItem1, toolItem2, 'OpenOption', 'PageNavigationTool', 'MagnificationTool', toolItem3, 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', toolItem4, 'CommentTool', 'SubmitForm'] } }; }, @@ -55,7 +78,7 @@ export default { else if (args.item && args.item.id === 'download') { viewer.download(); } - } + }, } }