|
1 | 1 | --- |
2 | 2 | layout: post |
3 | 3 | title: Annotations in Mobile View using SfPdfViewer Component | Syncfusion |
4 | | -description: Checkout and learn everything about annotations in the mobile view using the Syncfusion Blazor SfPdfViewer component and more. |
| 4 | +description: Learn how to add, edit, and manage annotations in the mobile view of the Syncfusion Blazor SfPdfViewer component |
5 | 5 | platform: document-processing |
6 | 6 | control: SfPdfViewer |
7 | 7 | documentation: ug |
8 | 8 | --- |
9 | 9 |
|
10 | | -# To open the annotation toolbar |
| 10 | +# Annotations in mobile view |
11 | 11 |
|
12 | | -To Open the annotation toolbar, click on the **Edit Annotation** option in the mobile primary toolbar. The mobile annotation toolbar will open at bottom of the viewer. |
| 12 | +This article explains how to work with annotations in the mobile view of the Blazor SfPdfViewer. It covers opening the annotation toolbar, adding each annotation type, adjusting properties, deleting annotations, and using the comments panel. |
| 13 | + |
| 14 | +## To open the annotation toolbar |
| 15 | + |
| 16 | +To open the annotation toolbar, tap the **Edit Annotation** option in the mobile primary toolbar. The annotation toolbar appears at the bottom of the viewer. |
13 | 17 |
|
14 | 18 |  |
15 | 19 |
|
16 | 20 | ## To add sticky notes annotation |
17 | 21 |
|
18 | | -Click the **Sticky Note Annotation** icon and then click anywhere in the viewer to add the sticky notes. |
| 22 | +Tap the **Sticky Note Annotation** icon, then tap anywhere in the viewer to place the note. |
19 | 23 |
|
20 | | - |
| 24 | + |
21 | 25 |
|
22 | | -This action will open the comment panel, allowing you to add the required comment for the added sticky notes. |
| 26 | +The comments panel opens so the comment for the sticky note can be entered. |
23 | 27 |
|
24 | | - |
| 28 | + |
25 | 29 |
|
26 | 30 | ## To add text markup annotation |
27 | 31 |
|
28 | | -Long-press to select any text in the PDF, then click on any **Text Markup Annotation** in the annotation toolbar. |
| 32 | +Long-press to select text in the PDF, then tap a **Text Markup Annotation** in the toolbar (for example, highlight, underline, strikethrough, or squiggly). |
29 | 33 |
|
30 | | - |
| 34 | + |
31 | 35 |
|
32 | | -This action will display the required properties for this annotation in the toolbar. |
| 36 | +The toolbar then shows the available properties for the chosen annotation (such as color and opacity). |
33 | 37 |
|
34 | | - |
| 38 | + |
35 | 39 |
|
36 | 40 | ## To add shape annotation |
37 | 41 |
|
38 | | -Click the **Shape Annotation** icon in the toolbar. It will display the supported shape annotations. |
| 42 | +Tap the **Shape Annotation** icon in the toolbar to view the available shapes. |
39 | 43 |
|
40 | | - |
| 44 | + |
41 | 45 |
|
42 | | -Choose any annotation type from the list, then click and drag anywhere in the viewer to add the annotation. |
| 46 | +Choose a shape, then tap and drag in the viewer to draw it. |
43 | 47 |
|
44 | | - |
| 48 | + |
45 | 49 |
|
46 | | -The toolbar will also switch to display the properties that is required for the added annotation. |
| 50 | +After placement, the toolbar switches to the properties toolbar for the added annotation, where options such as fill color, stroke color, thickness, and opacity can be adjusted. |
47 | 51 |
|
48 | | - |
| 52 | + |
49 | 53 |
|
50 | 54 | ## To add measure annotation |
51 | 55 |
|
52 | | -Click the **Measure Annotation** icon in the toolbar. It will display the supported measure annotations. |
| 56 | +Tap the **Measure Annotation** icon in the toolbar to view supported measurement types. |
53 | 57 |
|
54 | | - |
| 58 | + |
55 | 59 |
|
56 | | -Choose any annotation type from the list, then click and drag anywhere in the viewer to add the annotation. |
| 60 | +Select a measurement type, then tap and drag in the viewer to add it. |
57 | 61 |
|
58 | | - |
| 62 | + |
59 | 63 |
|
60 | | -The toolbar will also switch to display the properties that is required for the added annotation. |
| 64 | +After placement, the properties toolbar appears with options relevant to the measurement annotation (for example, stroke color, thickness, and opacity). |
61 | 65 |
|
62 | | - |
| 66 | + |
63 | 67 |
|
64 | 68 | ## To add free text annotation |
65 | 69 |
|
66 | | -Click the **Free Text Annotation** icon in the toolbar. Which will display the properties that is required for free text. |
| 70 | +Tap the **Free Text Annotation** icon in the toolbar. The properties toolbar appears with options for text formatting (such as font size, color, and opacity). |
67 | 71 |
|
68 | | - |
| 72 | + |
69 | 73 |
|
70 | | -Click anyWhere in the viewer to add the free text annotation. |
| 74 | +Tap anywhere in the viewer to insert the free text annotation. |
71 | 75 |
|
72 | | - |
| 76 | + |
73 | 77 |
|
74 | 78 | ## To add stamp annotation |
75 | 79 |
|
76 | | -Click on the **Stamp Annotation** icon and choose the desired stamp from the various types listed in the menu. |
| 80 | +Tap the **Stamp Annotation** icon, then choose a stamp from the available list. |
77 | 81 |
|
78 | | - |
| 82 | + |
79 | 83 |
|
80 | | -Afterward, click anywhere in the viewer to add the stamp. The toolbar will then switch to display the properties required for the stamp annotation. |
| 84 | +Tap anywhere in the viewer to place the stamp. The properties toolbar then appears for additional adjustments where applicable. |
81 | 85 |
|
82 | | - |
| 86 | + |
83 | 87 |
|
84 | 88 | ## To add signature |
85 | 89 |
|
86 | | -Click the **Handwritten Signature** icon to open the signature dialog box. |
| 90 | +Tap the **Handwritten Signature** icon to open the signature dialog. |
87 | 91 |
|
88 | | - |
| 92 | + |
89 | 93 |
|
90 | | -Draw your signature in the signature dialog canvas, then click the ‘Create’ button to add the signature into the viewer. |
| 94 | +Draw the signature in the dialog’s canvas, then tap Create to add it to the viewer. |
91 | 95 |
|
92 | | - |
| 96 | + |
93 | 97 |
|
94 | | -Click anywhere in the viewer to place the signature. The toolbar will then switch to display the properties required for the signature. |
| 98 | +Tap anywhere in the viewer to place the signature. The properties toolbar then appears for further adjustments. |
95 | 99 |
|
96 | | - |
| 100 | + |
97 | 101 |
|
98 | 102 | ## To add ink annotation |
99 | 103 |
|
100 | | -Click the **Ink Annotation** icon and draw anywhere in the viewer. |
| 104 | +Tap the **Ink Annotation** icon, then draw directly in the viewer. |
101 | 105 |
|
102 | | - |
| 106 | + |
103 | 107 |
|
104 | | -Once you’ve finished drawing, click the ink annotation displayed in the toolbar to stop the ink annotation drawing. The toolbar will then switch to display the properties required for the ink annotation. |
| 108 | +When finished, tap the Ink Annotation icon again to exit drawing mode. The properties toolbar then appears with options for ink color, thickness, and opacity. |
105 | 109 |
|
106 | | - |
| 110 | + |
107 | 111 |
|
108 | | -## Change annotation properties (Before adding) |
| 112 | +## Change annotation properties before adding |
109 | 113 |
|
110 | | -You can modify annotations properties before adding them. Click the rectangle shape annotation, which will display the toolbar with corresponding properties. You can be able to adjust these properties and then add the annotation by clicking and dragging it. The annotation will be added with the modified property. |
| 114 | +Annotation properties can be configured before placement. For example, tap the rectangle shape to show its properties toolbar, adjust the settings, and then tap and drag to place the annotation. The annotation is added using the modified properties. |
111 | 115 |
|
112 | | - |
| 116 | + |
113 | 117 |
|
114 | | -## Change annotation properties (After adding) |
| 118 | +## Change annotation properties after adding |
115 | 119 |
|
116 | | -After adding the annotation, you can modify its properties. Select the added annotation, and it will display the corresponding properties. Change the necessary property, and it will reflect in the added annotation. |
| 120 | +After placement, select the annotation to display its properties toolbar. Adjust the required properties; the changes are applied immediately to the selected annotation. |
117 | 121 |
|
118 | | - |
| 122 | + |
119 | 123 |
|
120 | 124 | ## Delete Annotation |
121 | 125 |
|
122 | | -To delete an annotation, first, select the annotation you want to remove. The delete icon will appear in the property toolbar. Clicking on the delete icon will remove the annotation from the PDF along with its associated comment. |
| 126 | +Select the annotation to delete. In the properties toolbar, tap the Delete icon. The annotation is removed from the PDF, and any associated comment is also deleted. |
123 | 127 |
|
124 | | - |
| 128 | + |
125 | 129 |
|
126 | 130 | ## Open and Close Comment Panel |
127 | 131 |
|
128 | | -You can open the comments through the **more option** located at the right end of the mobile primary toolbar. |
| 132 | +Open the comments panel from the **more option** menu at the right end of the mobile primary toolbar. |
| 133 | + |
| 134 | + |
| 135 | + |
| 136 | +To close the comments panel, tap the Close icon within the panel. |
129 | 137 |
|
130 | | - |
| 138 | + |
131 | 139 |
|
132 | | -To close the comment panel, click the close icon located within the comment panel. |
| 140 | +## See Also |
133 | 141 |
|
134 | | - |
| 142 | +* [Annotation Toolbar in Mobile mode](../toolbar-customization/mobile-toolbar) |
0 commit comments