diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 0bb0a6d05..ec196ec8f 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -507,6 +507,7 @@
  • To Box cloud file storage
    • +
  • Mobile Toolbar
  • Toolbar Customization
  • Command Manager
  • Navigation
    • diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/ModernNavigation-mobile.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/ModernNavigation-mobile.png new file mode 100644 index 000000000..f295048e4 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/ModernNavigation-mobile.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/Redaction-MobileView.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/Redaction-MobileView.png new file mode 100644 index 000000000..0ba248381 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/Redaction-MobileView.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/editAnnotation.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/editAnnotation.png new file mode 100644 index 000000000..bc075ef66 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/editAnnotation.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/formDesigner.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/formDesigner.png new file mode 100644 index 000000000..97a9fa356 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/formDesigner.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/mobileToolbar.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/mobileToolbar.png new file mode 100644 index 000000000..39cb9de93 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/mobileToolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/moreOptions.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/moreOptions.png new file mode 100644 index 000000000..b9e93928b Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/moreOptions.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/images/searchOption.png b/Document-Processing/PDF/PDF-Viewer/blazor/images/searchOption.png new file mode 100644 index 000000000..ddcc92bf3 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/blazor/images/searchOption.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/blazor/mobile-toolbar.md new file mode 100644 index 000000000..d67c1971a --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/blazor/mobile-toolbar.md @@ -0,0 +1,151 @@ +--- +layout: post +title: Mobile toolbar in Blazor SfPdfViewer | Syncfusion +description: Learn how to use and customize the mobile toolbar, overflow menu, and navigation panel in the Syncfusion Blazor SfPdfViewer. +platform: document-processing +control: SfPdfViewer +documentation: ug +--- + +# Mobile toolbar interface in Blazor SfPdfViewer + +The mobile PDF Viewer provides features for viewing, searching, annotating, and managing PDF documents on phones and tablets. It includes search, download, bookmarks, annotations, form designer, and redaction. Desktop-style toolbar features can be enabled on mobile using the EnableDesktopMode API for a broader set of actions. + +## Mobile mode toolbar configuration +In mobile mode, the toolbar is optimized for small screens and exposes the most common actions. The mobile toolbar can be customized using MobileToolbarItems (for mobile) and ToolbarItems (for desktop). When both are set, MobileToolbarItems controls the mobile toolbar content. + +![Mobile toolbar with primary PDF interaction options](./images/mobileToolbar.png) + +### Main toolbar options + +- Open: Load a PDF document. +- Search: Open the search bar to find text within the document. + +![Search bar displayed for finding text within a PDF](./images/searchOption.png) + +- Undo/Redo: Undo or redo recent annotation actions. +- Edit annotations: Turn annotation editing on or off to add or modify annotations. + +![Annotation editing toolbar allowing users to add, edit, or delete annotations on a PDF](./images/editAnnotation.png) + +N> In mobile mode, the Annotation, Form Designer, and Redaction toolbars are displayed at the bottom of the viewer for easier reach. + +- Form designer: Add, edit, or delete form fields in the PDF. + +![Form designer toolbar for managing form fields in PDF](./images/formDesigner.png) + +- Redaction: Open the redaction toolbar to mark and remove sensitive content. + +![Redaction toolbar to redact sensitive content in PDF](./images/Redaction-MobileView.png) + +Use the following code snippet to add the redaction toolbar to the PDF Viewer. + +```cshtml +@page "/"; + + + + +@code { + SfPdfViewer2? SfPdfViewer2; + bool redactionToolbar; + private string DocumentPath { get; set; } = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; + public List? ToolbarItems { get; set; } + public List? MobileToolbarItems { get; set; } + protected override void OnInitialized() + { + ToolbarItems = new List() + { + ToolbarItem.OpenOption, + ToolbarItem.PageNavigationTool, + ToolbarItem.MagnificationTool, + ToolbarItem.SelectionTool, + ToolbarItem.PanTool, + ToolbarItem.UndoRedoTool, + ToolbarItem.CommentTool, + ToolbarItem.SubmitForm, + ToolbarItem.SearchOption, + ToolbarItem.AnnotationEditTool, + ToolbarItem.Redaction, + ToolbarItem.FormDesigner, + ToolbarItem.PrintOption, + ToolbarItem.DownloadOption + }; + MobileToolbarItems = new List() + { + MobileToolbarItem.Open, + MobileToolbarItem.UndoRedo, + MobileToolbarItem.EditAnnotation, + MobileToolbarItem.Redaction, + MobileToolbarItem.FormDesigner, + MobileToolbarItem.Search + }; + } +} +``` + +[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar) + +### More options menu +Open the overflow (three-dots) menu to access additional actions such as: + +- Download: Download the currently opened PDF document. +- Bookmark: View and navigate bookmarks within the document. + +![More options menu showing additional actions like download and bookmark](./images/moreOptions.png) + +## Enable desktop mode on mobile + +Enable the desktop toolbar on mobile devices with the EnableDesktopMode API. This replaces the mobile toolbar with the desktop layout and provides access to additional actions and controls. + +```cshtml +@using Syncfusion.Blazor.SfPdfViewer + + + +``` + +[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar) + +## Modern navigation panel in mobile view + +On mobile devices, the navigation toolbar collapses into a toggle menu to save space. Any custom items added appear at the beginning of this menu. + +![Modern navigation in mobile view](./images/ModernNavigation-mobile.png) + +Enable the modern navigation panel by setting EnableNavigationPanel to true. + +```cshtml +@using Syncfusion.Blazor.SfPdfViewer + + + +``` +[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar) + +## Enable scrolling in desktop mode with touch gestures + +For smooth scrolling of PDF documents on mobile while in desktop mode, disable text selection (set EnableTextSelection to false) to allow touch panning. + +```cshtml +@using Syncfusion.Blazor.SfPdfViewer + + + +``` +[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Toolbar) + +## Print option availability + +The Print option is not available in mobile mode by default. To use printing on mobile, enable the desktop toolbar with the EnableDesktopMode API. Availability and behavior may vary by mobile browser. + +## See also + +- [Annotations in mobile view](./annotation/annotations-in-mobile-view) +- [Form designer in mobile view](./form-designer/form-designer-in-mobile-view)