Merge pull request #12 from SyncfusionExamples/856503-icon

856503 : Customize existing toolbar in PDF Viewer component sample update

Author: SasidharanKaruppiah

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();
         }
-    }
+    },
   }
 }
 </script>