diff --git a/components/pdfviewer/annotations.md b/components/pdfviewer/annotations.md new file mode 100644 index 0000000000..c3fbac09cc --- /dev/null +++ b/components/pdfviewer/annotations.md @@ -0,0 +1,53 @@ +--- +title: Annotations +page_title: PdfViewer - Annotations +description: Annotations in the PdfViewer for Blazor. How to add and configure annotations in the PdfViewer for Blazor +slug: pdfviewer-annotations +tags: telerik,blazor,pdf,pdfviewer,annotations +published: True +position: 15 +--- + +# PdfViewer Annotations + +The PdfViewer supports a set of annotation types to enhance PDF documents. For example, users can highlight important text areas or add notes as free text. + +The PdfViewer creates a dedicated layer for the annotations and includes them when downloading or printing the file. If the user opens a file with annotations, they can edit only the annotations that were added using the PdfViewer `Annotations` tool. The PdfViewer does not support editing annotations added in a different PDF editor. + +To add and manage the annotations, the user can click on the dedicated button in the [PdfViewer Toolbar]({%slug pdfviewer-toolbar%}). It opens an annotations bar with the available annotation types. + +## Supported Annotations + +The PdfViewer provides the following annotation types: + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Annotation Type | Description | +| --- | --- | +| **Text Highlight** | Allows highlighting the selected text in the document. Users can choose the desired highlight color. | +| **Free Text** | Allows creating an element with free text anywhere in the document. Provides option to select the desired text color and font size. | + +## Working with Annotations + +**To manage the annotations the user should:** + +1. Click on the `Annotations` tool in the [Toolbar]({%slug pdfviewer-toolbar%}) to open the Annotations bar with the available annotation types. +1. Click the desired annotation type to toggle it. You need to first "turn on" the annotation tool to add or edit annotations of the corresponding type. If none of the annotation tools are enabled, the PdfViewer will not allow interacting with the document to create or edit annotations. + +**From this point the user can:** + +1. **Create an annotation**—The user can select a non-annotated text to highlight it or they can click an area that does not have free text element to create an annotation. Once they create the annotation, a popup with the available customization options will appear. +1. **Edit an existing annotation**—The user can edit one or multiple annotations at a time but they all must be of the same type. To select multiple annotations, the user can hold `Ctrl` and click on all annotations they want to edit. + * To edit color and font size the user can click the annotation they want to edit to open the customization popup. + * To edit the text in the `Free Text` annotation element, the user can double-click the element to open the textbox for editing. + * To move the `Free Text` annotation element the user can click it to enable the drag tool and start dragging. +1. **Delete an existing annotation**—The user can click the annotation they want to delete to open the customization popup. Pressing the delete button in the customization popup will open a delete confirmation dialog where the user can confirm or cancel the annotation deletion. + +## Disabling Annotations + +The Annotations tool is included in the [Toolbar]({%slug pdfviewer-toolbar%}) by default. To prevent users from creating annotations, you can [configure the Toolbar and not include the `PdfViewerToolBarAnnotationsTool`]({%slug pdfviewer-toolbar%}#toolbar-configuration). + +## See Also + +* [PdfViewer Live Demo](https://demos.telerik.com/blazor-ui/pdfviewer/overview) +* [PdfViewer Toolbar]({%slug pdfviewer-toolbar%}) \ No newline at end of file diff --git a/components/pdfviewer/overview.md b/components/pdfviewer/overview.md index 75d667732e..ef9f74dd15 100644 --- a/components/pdfviewer/overview.md +++ b/components/pdfviewer/overview.md @@ -59,6 +59,9 @@ The [PdfViewer toolbar can render built-in and custom tools]({%slug pdfviewer-to * Search and select text * Print, download and open local PDF files +## Annotations + +The PdfViewer provides a built-in option for creating and editing annotations. Explore the [available annotation types and how to work with them]({%slug pdfviewer-annotations%}). ## Large File Support diff --git a/components/pdfviewer/toolbar.md b/components/pdfviewer/toolbar.md index 23604fa34f..1936f78494 100644 --- a/components/pdfviewer/toolbar.md +++ b/components/pdfviewer/toolbar.md @@ -17,20 +17,29 @@ The [Blazor PDF Viewer](https://demos.telerik.com/blazor-ui/pdfviewer/overview) By default, the [Blazor PDF Viewer](https://demos.telerik.com/blazor-ui/pdfviewer/overview) displays all its built-in tools in the order below. Use the *tool tag* if you need to define a tool explicitly in a [custom toolbar configuration](#toolbar-configuration). +### Command Tools + @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) | Tool Name | Tool Tag | Description | | --- | --- | --- | +| Open | `PdfViewerToolBarOpenTool` | An open command that shows in a submenu upon a hamburger menu click. Fires the [`OnOpen` event]({%slug pdfviewer-events%}#onopen). | +| Download | `PdfViewerToolBarDownloadTool` | A download command that shows in a submenu upon a hamburger menu click. Fires the [`OnDownload` event]({%slug pdfviewer-events%}#ondownload). | +| Print | `PdfViewerToolBarPrintTool` | A print command that shows in a submenu upon a hamburger menu click. The component also provides a [`Print` method]({%slug pdfviewer-overview%}#pdfviewer-reference-and-methods). Printing uses an additional browser window with only the PDF document inside. This window may require user confirmation or appropriate browser settings to display. | | Pager | `PdfViewerToolBarPagerTool` | A pager to navigate the PDF document via automatic scrolling. Paging requires the [`Height` parameter]({%slug pdfviewer-overview%}#pdfviewer-parameters) to be set, otherwise the component expands and doesn't have its own scrollbar. | | Zoom | `PdfViewerToolBarZoomTool` | Zoom in and zoom out buttons with an additional dropdown with common options (Fit to page, Fit to width, 100%, etc.) | | Selection | `PdfViewerToolBarSelectionTool` | Two toggle buttons that enable either text selection or panning. | | Search | `PdfViewerToolBarSearchTool` | A search button. It opens an additional search bar that contains a textbox and arrow buttons to navigate the search results. | -| Open | `PdfViewerToolBarOpenTool` | An open button. It fires the [`OnOpen` event]({%slug pdfviewer-events%}#onopen). | -| Download | `PdfViewerToolBarDownloadTool` | A download button. It fires the [`OnDownload` event]({%slug pdfviewer-events%}#ondownload). | -| Print | `PdfViewerToolBarPrintTool` | A print button. The component also provides a [`Print` method]({%slug pdfviewer-overview%}#pdfviewer-reference-and-methods). Printing uses an additional browser window with only the PDF document inside. This window may require user confirmation or appropriate browser settings to display. | +| Annotations | `PdfViewerToolBarAnnotationsTool` | A button that toggles the Annotations bar. Explore the [available annotation types and how to work with them]({%slug pdfviewer-annotations%}). | + +### Layout Tools -By default, the toolbar also includes separators (``) and spacers (``). Separators render as a vertical line. Spacers consume the available empty space and push the rest of the tools next to one another. +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) +| Tool Name | Tool Tag | Description | +| --- | --- | --- | +| Separator | `PdfViewerToolBarSeparator` | Renders a vertical line. This is not included in the Toolbar by default but you can use it to visually separate the desired tools. | +| Spacer | `PdfViewerToolBarSpacer` | Consumes the available empty space and pushes the rest of the tools next to one another. | ## Custom Tools diff --git a/upgrade/rendering-changes/3-4-0.md b/upgrade/rendering-changes/3-4-0.md index 102cd989ab..1758b74061 100644 --- a/upgrade/rendering-changes/3-4-0.md +++ b/upgrade/rendering-changes/3-4-0.md @@ -33,5 +33,5 @@ Previous to the 3.4.0 version we used `k-state-*` CSS classes to denote that the ## See also -* [Use best practives when overriding theme styles]({%slug themes-override%}#best-practices) +* [Use best practices when overriding theme styles]({%slug themes-override%}#best-practices) diff --git a/upgrade/rendering-changes/3-6-0.md b/upgrade/rendering-changes/3-6-0.md index 93ad258172..fda1229095 100644 --- a/upgrade/rendering-changes/3-6-0.md +++ b/upgrade/rendering-changes/3-6-0.md @@ -99,4 +99,4 @@ position: 995 ## See also -* [Use best practives when overriding theme styles]({%slug themes-override%}#best-practices) +* [Use best practices when overriding theme styles]({%slug themes-override%}#best-practices) diff --git a/upgrade/rendering-changes/4-0-0.md b/upgrade/rendering-changes/4-0-0.md index 745f3bdcd4..90bce320a2 100644 --- a/upgrade/rendering-changes/4-0-0.md +++ b/upgrade/rendering-changes/4-0-0.md @@ -241,4 +241,4 @@ The following changes are applicable when `AutoUpload = "false"`, so the **Clear ## See Also -* [Use best practives when overriding theme styles]({%slug themes-override%}#best-practices) +* [Use best practices when overriding theme styles]({%slug themes-override%}#best-practices) diff --git a/upgrade/rendering-changes/4-3-0.md b/upgrade/rendering-changes/4-3-0.md index c2f7fdd88c..653aa910a8 100644 --- a/upgrade/rendering-changes/4-3-0.md +++ b/upgrade/rendering-changes/4-3-0.md @@ -128,4 +128,4 @@ Such dialogs are any edit forms, filter menus, column menus, editor's tools, as ## See Also -* [Use best practives when overriding theme styles]({%slug themes-override%}#best-practices) +* [Use best practices when overriding theme styles]({%slug themes-override%}#best-practices) diff --git a/upgrade/rendering-changes/4-6-0.md b/upgrade/rendering-changes/4-6-0.md index 9caeaec8e7..8ffaab16cf 100644 --- a/upgrade/rendering-changes/4-6-0.md +++ b/upgrade/rendering-changes/4-6-0.md @@ -72,4 +72,4 @@ Removed the `k-filter-toolbar-item` CSS class from the `
` element, is now wrapped in a `
` element with class `k-prompt-view`. +3. The copy button in the output view is now styled as primary. + +## Gantt + +1. The `k-gantt-content` class is now applied to a `
` wrapper element that encloses the Gantt Splitter. +2. The Splitter component class (`k-splitter` element) is now changed from `k-grid-content` to `k-grid-splitter`. +3. The `
` element no longer includes the `k-user-select-none` class. +4. The `` element now also has a `k-grid-table` class. +5. The `` element in the toolbar no longer has the `k-toolbar-spacer` class. +6. The `
` button group / select element is now wrapped in a `
` with class `k-gantt-views-wrapper`. + +## Menu + +1. The menu item elements (``) no longer include the `k-in` class. +2. The `
    ` element no longer includes the `k-reset` and `k-group` classes. + +## PDFViewer + +The `Open`, `Download` and `Print` tools have been moved to a submenu toggled on click of a hamburger menu on the leftmost side of the Toolbar. + +## Signature + +1. When maximized, the Signature now renders a `k-signature-maximized` class. +2. The fill mode class is now applied based on the `FillMode` parameter (appearance settings). + +## TabStrip + +1. The active (currently selected) tabs now render only the `k-active` class. The `k-tab-on-top` class is no longer applied. +2. The inactive tabs no longer include the `k-state-default` class. +3. The scroll buttons (prev & next) now render the `k-tabstrip-prev` and `k-tabstrip-next` classes, respectively. +4. The `k-pos-relative` class is no longer applied to the `
    ` element. The component now receives an inline `position: relative` style instead. + +## TreeList + +1. The `k-cursor-pointer` class is removed from the `` element (toggle row icon). +2. The `
` element rendered in the `
` element now also has the `k-grid-header-table` class. +3. The `
` element rendered in the `
` element now also includes a size class (appearance settings). +4. The `k-filterable` class in the table header cells is now rendered only when the column is filterable and has either a filter menu or column menu. + +## See Also + +* [Use best practices when overriding theme styles]({%slug themes-override%}#best-practices)