diff --git a/blazor/appearance/theme-studio.md b/blazor/appearance/theme-studio.md
index 6f315f72..4f63cafb 100644
--- a/blazor/appearance/theme-studio.md
+++ b/blazor/appearance/theme-studio.md
@@ -101,6 +101,224 @@ If you need to change your application theme and UI design in the future, do not
The following list of common variables is used in the Syncfusion Blazor library themes for all UI components. You can change these variables to customize the corresponding theme.
+### Syncfusion Blazor Bootstrap 5 Theme
+
+
+
+
+
+ Name |
+ Value (Default Theme) |
+ Value (Dark Theme) |
+
+
+
+
+ $black |
+
+ #000
+ |
+
+ #000
+ |
+
+
+ $white |
+
+ #fff
+ |
+
+ #fff
+ |
+
+
+ $gray-100 |
+
+ #f8f9fa
+ |
+
+ #f8f9fa
+ |
+
+
+ $gray-200 |
+
+ #e9ecef
+ |
+
+ #e9ecef
+ |
+
+
+ $gray-300 |
+
+ #dee2e6
+ |
+
+ #dee2e6
+ |
+
+
+ $gray-400 |
+
+ #ced4da
+ |
+
+ #ced4da
+ |
+
+
+ $gray-500 |
+
+ #adb5bd
+ |
+
+ #adb5bd
+ |
+
+
+ $gray-600 |
+
+ #6c757d
+ |
+
+ #6c757d
+ |
+
+
+ $gray-700 |
+
+ #495057
+ |
+
+ #495057
+ |
+
+
+ $gray-800 |
+
+ #343a40
+ |
+
+ #343a40
+ |
+
+
+ $gray-900 |
+
+ #212529
+ |
+
+ #212529
+ |
+
+
+ $blue |
+
+ #0d6efd
+ |
+
+ #0d6efd
+ |
+
+
+ $indigo |
+
+ #6610f2
+ |
+
+ #6610f2
+ |
+
+
+ $purple |
+
+ #6f42c1
+ |
+
+ #6f42c1
+ |
+
+
+ $pink |
+
+ #d63384
+ |
+
+ #d63384
+ |
+
+
+ $red |
+
+ #dc3545
+ |
+
+ #dc3545
+ |
+
+
+ $orange |
+
+ #fd7e14
+ |
+
+ #fd7e14
+ |
+
+
+ $yellow |
+
+ #ffc107
+ |
+
+ #ffc107
+ |
+
+
+ $green |
+
+ #198754
+ |
+
+ #198754
+ |
+
+
+ $teal |
+
+ #20c997
+ |
+
+ #20c997
+ |
+
+
+ $cyan |
+
+ #0dcaf0
+ |
+
+ #0dcaf0
+ |
+
+
+
+
### Syncfusion Blazor Bootstrap 4 Theme
@@ -1663,7 +1881,6 @@ The following list of common variables is used in the Syncfusion Blazor library
-
### Syncfusion Blazor Tailwind CSS Theme
@@ -2106,4 +2323,3 @@ The following list of common variables is used in the Syncfusion Blazor library
-
diff --git a/blazor/common/how-to/version-compatibility.md b/blazor/common/how-to/version-compatibility.md
index 7be63e65..e2f9da2a 100644
--- a/blazor/common/how-to/version-compatibility.md
+++ b/blazor/common/how-to/version-compatibility.md
@@ -1,7 +1,7 @@
---
layout: post
title: Version Compatibility in Blazor - Syncfusion
-description: Check out the documentation for Version Compatibility in Blazor
+description: Check out here the documentation for Version Compatibility support in Syncfusion Blazor NuGet packages
platform: Blazor
component: Common
documentation: ug
@@ -11,10 +11,10 @@ documentation: ug
## Version Information
-Syncfusion Blazor component follows sequence-based identifiers to process software releases based on the **Major.Minor.Build.Revision** format to track all the release changes. It helps other developers to keep track of our changes in every release. For example, if we release a package version as `18.4.0.43`, the version numbers will be indicated like below.
+Syncfusion Blazor component follows sequence-based identifiers to process software releases based on the **Major.Minor.Build.Revision** format to track all the release changes. It helps other developers to keep track of our changes in every release. For example, if we release a package version as `19.3.0.43`, the version numbers will be indicated like below.
- > * **18** as `Major release` – Which changes every year.
- > * **4** as `Volume release` – We release a new Volume once every three months, and this is the fourth release for this year.
+ > * **19** as `Major release` – Which changes every year.
+ > * **3** as `Volume release` – We release a new Volume once every three months, and this is the fourth release for this year.
> * **0** as `Build Number` - Particular Build Number is mentioned and it will always be marked as zero.
> * **43** as `Patch Number` - Particular Service Pack release or Patch release number, it increases every release.
@@ -24,95 +24,17 @@ The following table describes the version compatibility of .NET Core SDK and Syn
| .NET Core SDK Version | Syncfusion.Blazor NuGet version |
| ------------- | ------------- |
-| [.NET Core 5.0](https://devblogs.microsoft.com/aspnet/announcing-asp-net-core-in-net-5/) | 18.4.0.39 |
-| [.NET Core 5.0](https://devblogs.microsoft.com/aspnet/announcing-asp-net-core-in-net-5/) | 18.4.0.35 |
-| [.NET Core 5.0](https://devblogs.microsoft.com/aspnet/announcing-asp-net-core-in-net-5/) | 18.4.0.34 |
-| [.NET Core 5.0](https://devblogs.microsoft.com/aspnet/announcing-asp-net-core-in-net-5/) | 18.4.0.33 |
-| [.NET Core 5.0](https://devblogs.microsoft.com/aspnet/announcing-asp-net-core-in-net-5/) | 18.4.0.32 |
-| [.NET Core 5.0](https://devblogs.microsoft.com/aspnet/announcing-asp-net-core-in-net-5/) | 18.4.0.31 |
-| [.NET Core 5.0](https://devblogs.microsoft.com/aspnet/announcing-asp-net-core-in-net-5/) | 18.4.0.30 |
-| [.NET Core 5.0 - RC2](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-2/) | 18.3.0.53 |
-| [.NET Core 5.0 - RC2](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-2/) | 18.3.0.52 |
-| [.NET Core 5.0 - RC2](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-2/) | 18.3.0.51 |
-| [.NET Core 5.0 - RC2](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-2/) | 18.3.0.50 |
-| [.NET Core 5.0 - RC2](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-2/) | 18.3.0.48 |
-| [.NET Core 5.0 - RC2](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-2/) | 18.3.0.47 |
-| [.NET Core 5.0 - RC1](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-1/) | 18.3.0.42 |
-| [.NET Core 5.0 - RC1](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-1/) | 18.3.0.41 |
-| [.NET Core 5.0 - RC1](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-1/) | 18.3.0.40 |
-| [.NET Core 5.0 - RC1](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-1/) | 18.3.0.38 |
-| [.NET Core 5.0 - RC1](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-1/) | 18.3.0.35 |
-| [.NET Core 5.0 Preview 8](https://devblogs.microsoft.com/dotnet/announcing-net-5-0-preview-8/) | 18.2.0.59 |
-| [.NET Core 5.0 Preview 8](https://devblogs.microsoft.com/dotnet/announcing-net-5-0-preview-8/) | 18.2.0.58 |
-| [.NET Core 5.0 Preview 8](https://devblogs.microsoft.com/dotnet/announcing-net-5-0-preview-8/) | 18.2.0.57 |
-| [.NET Core 5.0 Preview 8](https://devblogs.microsoft.com/dotnet/announcing-net-5-0-preview-8/) | 18.2.0.56 |
-| [.NET Core 5.0 Preview 7](https://devblogs.microsoft.com/dotnet/announcing-net-5-0-preview-7/) | 18.2.0.55 |
-| [.NET Core 5.0 Preview 7](https://devblogs.microsoft.com/dotnet/announcing-net-5-0-preview-7/) | 18.2.0.54 |
-| [.NET Core 5.0 Preview 6](https://devblogs.microsoft.com/dotnet/announcing-net-5-0-preview-6/) | 18.2.0.48 |
-| [.NET Core 5.0 Preview 6](https://devblogs.microsoft.com/dotnet/announcing-net-5-0-preview-6/) | 18.2.0.47 |
-| [.NET Core 5.0 Preview 6](https://devblogs.microsoft.com/dotnet/announcing-net-5-0-preview-6/) | 18.2.0.46 |
-| [.NET Core 5.0 Preview 6](https://devblogs.microsoft.com/dotnet/announcing-net-5-0-preview-6/) | 18.2.0.45 |
-| [.NET Core 5.0 Preview 6](https://devblogs.microsoft.com/dotnet/announcing-net-5-0-preview-6/) | 18.2.0.44 |
-| [.NET Core 3.1.4](https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-now-available/) | 18.1.0.59 |
-| [.NET Core 3.1.4](https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-now-available/) | 18.1.0.58 |
-| [.NET Core 3.1.4](https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-now-available/) | 18.1.0.57 |
-| [.NET Core 3.1.4](https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-now-available/) | 18.1.0.56 |
-| [.NET Core 3.1.4](https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-now-available/) | 18.1.0.55 |
-| [.NET Core 3.1.4](https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-now-available/) | 18.1.0.54 |
-| [.NET Core 3.1.3](https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-release-candidate-now-available/) | 18.1.0.53 |
+| [.NET 6.0 - RC1](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-6-rc-1/) | 19.3.0.43 |
+| [.NET 5.0](https://devblogs.microsoft.com/aspnet/announcing-asp-net-core-in-net-5/) | 19.2.0.55 |
+| [.NET 5.0](https://devblogs.microsoft.com/aspnet/announcing-asp-net-core-in-net-5/) | 19.2.0.44 |
+| [.NET 5.0](https://devblogs.microsoft.com/aspnet/announcing-asp-net-core-in-net-5/) | 19.1.0.63 |
+| [.NET 5.0](https://devblogs.microsoft.com/aspnet/announcing-asp-net-core-in-net-5/) | 19.1.0.54 |
+| [.NET 5.0](https://devblogs.microsoft.com/aspnet/announcing-asp-net-core-in-net-5/) | 18.4.0.39 |
+| [.NET 5.0](https://devblogs.microsoft.com/aspnet/announcing-asp-net-core-in-net-5/) | 18.4.0.30 |
+| [.NET 5.0 - RC2](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-2/) | 18.3.0.47 |
+| [.NET 5.0 - RC1](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-1/) | 18.3.0.35 |
+| [.NET 5.0 Preview 6](https://devblogs.microsoft.com/dotnet/announcing-net-5-0-preview-6/) | 18.2.0.44 |
| [.NET Core 3.1.3](https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-release-candidate-now-available/) | 18.1.0.52 |
-| [.NET Core 3.1.3](https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-release-candidate-now-available/) | 18.1.0.48 |
-| [.NET Core 3.1.3](https://devblogs.microsoft.com/dotnet/net-core-march-2020/) | 18.1.0.46 |
-| [.NET Core 3.1.3](https://devblogs.microsoft.com/dotnet/net-core-march-2020/) | 18.1.0.45 |
-| [.NET Core 3.1.3](https://devblogs.microsoft.com/dotnet/net-core-march-2020/) | 18.1.0.44 |
-| [.NET Core 3.1.3](https://devblogs.microsoft.com/dotnet/net-core-march-2020/) | 18.1.0.43 |
| [.NET Core 3.1.2](https://devblogs.microsoft.com/dotnet/net-core-february-2020/) | 18.1.0.42 |
-| [.NET Core 3.1.2](https://devblogs.microsoft.com/dotnet/net-core-february-2020/) | 18.1.0.36 |
-| [.NET Core 3.1.2](https://devblogs.microsoft.com/dotnet/net-core-february-2020/) | 17.4.0.55 |
-| [.NET Core 3.1.2](https://devblogs.microsoft.com/dotnet/net-core-february-2020/) | 17.4.0.54 |
-| [.NET Core 3.1.2](https://devblogs.microsoft.com/dotnet/net-core-february-2020/) | 17.4.0.53 |
-| [.NET Core 3.1.1](https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-preview-1-release-now-available/) | 17.4.0.51 |
-| [.NET Core 3.1.1](https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-preview-1-release-now-available/) | 17.4.0.50 |
-| [.NET Core 3.1.1](https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-preview-1-release-now-available/) | 17.4.0.49 |
-| [.NET Core 3.1.1](https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-preview-1-release-now-available/) | 17.4.0.47 |
| [.NET Core 3.1.1](https://devblogs.microsoft.com/dotnet/net-core-january-2020/) | 17.4.0.46 |
-| [.NET Core 3.1](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-core-3-1/) | 17.4.0.44 |
-| [.NET Core 3.1](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-core-3-1/) | 17.4.0.43 |
-| [.NET Core 3.1](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-core-3-1/) | 17.4.0.42 |
-| [.NET Core 3.1](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-core-3-1/) | 17.4.0.41 |
-| [.NET Core 3.1](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-core-3-1/) | 17.4.0.40 |
| [.NET Core 3.1](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-core-3-1/) | 17.4.0.39 |
-| [.NET Core 3.1 Preview 3](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-core-3-1-preview-3/) | 17.3.0.28-beta |
-| [.NET Core 3.1 Preview 2](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-core-3-1-preview-2/) | 17.3.0.27-beta |
-| [.NET Core 3.1 Preview 1](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-core-3-1-preview-1/) | 17.3.0.26-beta |
-| [.NET Core 3.1 Preview 1](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-core-3-1-preview-1/) | 17.3.0.21-beta |
-| [.NET Core 3.1 Preview 1](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-core-3-1-preview-1/) | 17.3.0.19-beta |
-| [.NET Core 3.0](https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0/) | 17.3.0.18-beta |
-| [.NET Core 3.0](https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0/) | 17.3.0.17-beta |
-| [.NET Core 3.0](https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0/) | 17.3.0.11-beta |
-| [.NET Core 3.0](https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0/) | 17.3.0.10-beta |
-| [.NET Core 3.0 RC1](https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-release-candidate-1/) | 17.2.0.52-beta |
-| [.NET Core 3.0 Preview 9](https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-9/) | 17.2.0.50-beta |
-| [.NET Core 3.0 Preview 8](https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-8/) | 17.2.0.49-beta |
-| [.NET Core 3.0 Preview 8](https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-8/) | 17.2.0.47-beta |
-| [.NET Core 3.0 Preview 8](https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-8/) | 17.2.0.46-beta |
-| [.NET Core 3.0 Preview 7](https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-7/) | 17.2.0.40-beta |
-| [.NET Core 3.0 Preview 7](https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-7/) | 17.2.0.39-beta |
-| [.NET Core 3.0 Preview 6](https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-6/) | 17.2.0.35-beta |
-| [.NET Core 3.0 Preview 6](https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-6/) | 17.2.0.34-beta |
-| [.NET Core 3.0 Preview 6](https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-6/) | 17.2.0.30-beta |
-| [.NET Core 3.0 Preview 6](https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-6/) | 17.2.0.29-beta |
-| [.NET Core 3.0 Preview 6](https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-6/) | 17.2.0.28-beta |
-| [.NET Core 3.0 Preview 6](https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-6/) | 17.1.0.53-beta |
-| [.NET Core 3.0 Preview 6](https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-6/) | 17.1.0.52-beta |
-| .NET Core 3.0 Preview 5 | 17.1.0.51-beta |
-| .NET Core 3.0 Preview 5 | 17.1.0.50-beta |
-| .NET Core 3.0 Preview 5 | 17.1.0.49-beta |
-| .NET Core 3.0 Preview 5 | 17.1.0.48-beta |
-| .NET Core 3.0 Preview 5 | 17.1.0.47-beta |
-| .NET Core 3.0 Preview 4 | 17.1.0.44-beta |
-| .NET Core 3.0 Preview 4 | 17.1.0.43-beta |
-| .NET Core 3.0 Preview 3 | 17.1.0.42 |
-| .NET Core 3.0 Preview 3 | 17.1.0.38-beta |
-| .NET Core 3.0 Preview 3 | 17.1.0.34-beta |
-| .NET Core 3.0 Preview | 17.1.0.32-beta |
\ No newline at end of file
diff --git a/blazor/document-editor/getting-started/client-side-application.md b/blazor/document-editor/getting-started/client-side-application.md
index 91e5770f..b29dea7b 100644
--- a/blazor/document-editor/getting-started/client-side-application.md
+++ b/blazor/document-editor/getting-started/client-side-application.md
@@ -21,24 +21,24 @@ Steps to get started with Word processor component for Blazor:
2. Select **Create a new project** from the Visual Studio dashboard.
- ![new project in blazor](../images/new-project.png)
+ ![Creating New Project in Blazor](../images/blazor-create-new-project.png)
3. Select **Blazor App** from the template and click the **Next** button.
- ![Blazor app](../images/blazor-template.png)
+ ![Creating Blazor Application](../images/blazor-template.png)
4. In the project configuration window, click the **Create** button to create a new project with the default project configuration.
- ![Blazor project configuration](../images/project-configuration.png)
+ ![Blazor Project Configuration](../images/blazor-project-configuration.png)
5. Select **Blazor WebAssembly App** from the dashboard and click **Create** button to create a new Blazor client-side application. Make sure that **.NET Core** and **ASP.NET Core 3.1** are selected at the top.
- ![select framework](../images/blazor-client-template.png)
+ ![Selecting Blazor WebAssembly Framework](../images/blazor-client-template.png)
6. Install the [Syncfusion.Blazor.WordProcessor](https://www.nuget.org/packages/Syncfusion.Blazor.WordProcessor/) NuGet package from NuGet.org to the newly created application by using the **NuGet Package Manager**. Right-click the project and select Manage NuGet Packages.
7. Search **Syncfusion.Blazor.WordProcessor** keyword in the Browse tab and install [Syncfusion.Blazor.WordProcessor](https://www.nuget.org/packages/Syncfusion.Blazor.WordProcessor/) NuGet package in the application.
- ![select nuget](../images/select-nuget.png)
+ ![Searching Blazor DocumentEditor NuGet Package](../images/blazor-document-editor-nuget.png)
8. Open the **~/_Imports.razor** file and import the ``Syncfusion.Blazor.DocumentEditor``.
@@ -85,6 +85,6 @@ Steps to get started with Word processor component for Blazor:
12. Run the application. The Word processor component will be rendered in the web browser.
- ![DocumentEditor Sample](../images/browser-output.png)
+ ![Blazor DocumentEditor](../images/blazor-document-editor.png)
You can also explore our [Blazor Word Processor](https://blazor.syncfusion.com/demos/document-editor/default-functionalities) example to know how to render and configure the document editor.
diff --git a/blazor/document-editor/getting-started/server-side-application.md b/blazor/document-editor/getting-started/server-side-application.md
index 2f213ee0..6c4a56d1 100644
--- a/blazor/document-editor/getting-started/server-side-application.md
+++ b/blazor/document-editor/getting-started/server-side-application.md
@@ -15,25 +15,25 @@ Steps to get started with Word processor component for Blazor:
1. Select **Create a new project** from the Visual Studio dashboard.
- ![new project in blazor](../images/new-project.png)
+ ![Creating New Project in Blazor](../images/blazor-create-new-project.png)
2. Select **Blazor App** from the template and click the **Next** button.
- ![Blazor app](../images/blazor-template.png)
+ ![Creating Blazor Application](../images/blazor-template.png)
3. In the project configuration window, click the **Create** button to create a new project with the default project configuration.
- ![asp.net core project configuration](../images/project-configuration.png)
+ ![Blazor Project Configuration](../images/blazor-project-configuration.png)
4. Select **Blazor Server App** from the dashboard and click the **Create** button to create a new Blazor Server application. Make sure that **.NET Core** and **ASP.NET Core 3.1** are selected at the top.
- ![select framework](../images/blazor-server-template.png)
+ ![Select Blazor Server Application Framework](../images/blazor-server-template.png)
5. Install the [Syncfusion.Blazor.WordProcessor](https://www.nuget.org/packages/Syncfusion.Blazor.WordProcessor/) NuGet package to the newly created application by using the **NuGet Package Manager**. Right-click the project and select Manage NuGet Packages.
6. Search **Syncfusion.Blazor.WordProcessor** keyword in the Browse tab and install [Syncfusion.Blazor.WordProcessor](https://www.nuget.org/packages/Syncfusion.Blazor.WordProcessor/) NuGet package in the application.
- ![select nuget](../images/select-nuget.png)
+ ![Searching Blazor DocumentEditor NuGet Package](../images/blazor-document-editor-nuget.png)
7. Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor.DocumentEditor`.
@@ -69,7 +69,7 @@ Steps to get started with Word processor component for Blazor:
11. Run the application. The Word processor component will be rendered in the web browser.
- ![DocumentEditor Sample](../images/browser-output.png)
+ ![Blazor DocumentEditor](../images/blazor-document-editor.png)
12. To load an existing document during control initialization, use the following code example, which opens a Word document. Convert it to SFDT and load in the editor.
@@ -105,4 +105,4 @@ Steps to get started with Word processor component for Blazor:
> As per the discussion thread [#30064](https://github.com/dotnet/aspnetcore/issues/30064), please null out the reference of streams and other instances when they are no longer required. Using this approach you'll observe the memory go down and become stable.
-![DocumentEditor Sample](../images/browser-output-open-document.png)
\ No newline at end of file
+![Blazor DocumentEditor](../images/blazor-document-editor-component.png)
\ No newline at end of file
diff --git a/blazor/document-editor/image.md b/blazor/document-editor/image.md
index cf1e75ac..3b0c9b23 100644
--- a/blazor/document-editor/image.md
+++ b/blazor/document-editor/image.md
@@ -21,7 +21,7 @@ Image files will be internally converted to base64 string. Whereas, online image
Document editor provides built-in image resizer that can be injected into your application based on the requirements. This allows you to resize the image by dragging the resizing points using mouse or touch interactions. This resizer appears as follows.
-![Image](images/image.jpeg)
+![Image Resizing in Blazor DocumentEditor](images/blazor-document-editor-image-resizing.jpeg)
## Changing size
diff --git a/blazor/document-editor/images/blazor-create-new-project.png b/blazor/document-editor/images/blazor-create-new-project.png
new file mode 100644
index 00000000..1a901e14
Binary files /dev/null and b/blazor/document-editor/images/blazor-create-new-project.png differ
diff --git a/blazor/document-editor/images/blazor-document-editor-component.png b/blazor/document-editor/images/blazor-document-editor-component.png
new file mode 100644
index 00000000..4fee85ba
Binary files /dev/null and b/blazor/document-editor/images/blazor-document-editor-component.png differ
diff --git a/blazor/document-editor/images/blazor-document-editor-disable-edit-restriction.png b/blazor/document-editor/images/blazor-document-editor-disable-edit-restriction.png
new file mode 100644
index 00000000..bb34f887
Binary files /dev/null and b/blazor/document-editor/images/blazor-document-editor-disable-edit-restriction.png differ
diff --git a/blazor/document-editor/images/blazor-document-editor-enable-edit-restriction.png b/blazor/document-editor/images/blazor-document-editor-enable-edit-restriction.png
new file mode 100644
index 00000000..e2983069
Binary files /dev/null and b/blazor/document-editor/images/blazor-document-editor-enable-edit-restriction.png differ
diff --git a/blazor/document-editor/images/blazor-document-editor-image-resizing.jpeg b/blazor/document-editor/images/blazor-document-editor-image-resizing.jpeg
new file mode 100644
index 00000000..8ab35785
Binary files /dev/null and b/blazor/document-editor/images/blazor-document-editor-image-resizing.jpeg differ
diff --git a/blazor/document-editor/images/blazor-document-editor-list.jpeg b/blazor/document-editor/images/blazor-document-editor-list.jpeg
new file mode 100644
index 00000000..77764971
Binary files /dev/null and b/blazor/document-editor/images/blazor-document-editor-list.jpeg differ
diff --git a/blazor/document-editor/images/blazor-document-editor-nuget.png b/blazor/document-editor/images/blazor-document-editor-nuget.png
new file mode 100644
index 00000000..c2f43132
Binary files /dev/null and b/blazor/document-editor/images/blazor-document-editor-nuget.png differ
diff --git a/blazor/document-editor/images/blazor-document-editor.png b/blazor/document-editor/images/blazor-document-editor.png
new file mode 100644
index 00000000..044ff05a
Binary files /dev/null and b/blazor/document-editor/images/blazor-document-editor.png differ
diff --git a/blazor/document-editor/images/blazor-documenteditor-table-contents.jpeg b/blazor/document-editor/images/blazor-documenteditor-table-contents.jpeg
new file mode 100644
index 00000000..a85ed5a2
Binary files /dev/null and b/blazor/document-editor/images/blazor-documenteditor-table-contents.jpeg differ
diff --git a/blazor/document-editor/images/blazor-project-configuration.png b/blazor/document-editor/images/blazor-project-configuration.png
new file mode 100644
index 00000000..a5b02bdb
Binary files /dev/null and b/blazor/document-editor/images/blazor-project-configuration.png differ
diff --git a/blazor/document-editor/list-format.md b/blazor/document-editor/list-format.md
index 7e380ccd..7573c5fb 100644
--- a/blazor/document-editor/list-format.md
+++ b/blazor/document-editor/list-format.md
@@ -53,4 +53,4 @@ documentEditor.Editor.ClearList();
Document editor restarts the numbering or continue numbering for a numbered list. These options are found in the built-in context menu, if the list value is selected. Refer to the following screenshot.
-![Image](images/list.jpeg)
\ No newline at end of file
+![Blazor DocumentEditor with List](images/blazor-document-editor-list.jpeg)
\ No newline at end of file
diff --git a/blazor/document-editor/restrict-editing.md b/blazor/document-editor/restrict-editing.md
index 2ac01524..fc8222cc 100644
--- a/blazor/document-editor/restrict-editing.md
+++ b/blazor/document-editor/restrict-editing.md
@@ -37,8 +37,8 @@ The following code example shows how to restrict or protect editing for the enti
Also, at some situations, you might need to allow changes for a certain portion of the document alone. Microsoft Word allows you to [make changes to parts of a Word document](https://support.office.com/en-gb/article/allow-changes-to-parts-of-a-protected-document-187ed01c-8795-43e1-9fd0-c9fca419dadf). Likewise, the document editor control allows the users to make changes to certain parts of a document using similar user interface.
-![Restrict Editing](./images/protection-enforced.png)
+![Disabling Restrict Editing in Blazor DocumentEditor](./images/blazor-document-editor-disable-edit-restriction.png)
-![Restrict Editing Enabled](./images/protection-not-enforced.png)
+![Enabling Restrict Editing in Blazor DocumentEditor](./images/blazor-document-editor-enable-edit-restriction.png)
You can also explore our [Blazor Word Processor](https://blazor.syncfusion.com/demos/document-editor/default-functionalities) example to know how to render and configure the document editor.
diff --git a/blazor/document-editor/table-of-contents.md b/blazor/document-editor/table-of-contents.md
index 9c03974a..e43c7994 100644
--- a/blazor/document-editor/table-of-contents.md
+++ b/blazor/document-editor/table-of-contents.md
@@ -63,7 +63,7 @@ documentEditor.Editor.InsertTableOfContents(tableOfContentsSettings);
You can update or edit the table of contents using the built-in context menu shown up by right-clicking it. Refer to the following screenshot.
-![Table of Contents](images/table-of-contents.jpeg)
+![Updating Table Contents in Blazor DocumentEditor](images/blazor-documenteditor-table-contents.jpeg)
* **Update Field**: Updates the headings in table of contents with same settings by searching the entire document.
* **Edit Field**: Opens the built-in table of contents dialog and allows you to modify its settings.
diff --git a/blazor/maps/how-to/add-different-types-of-markers.md b/blazor/maps/how-to/add-different-types-of-markers.md
index 99261313..f9d83c4c 100644
--- a/blazor/maps/how-to/add-different-types-of-markers.md
+++ b/blazor/maps/how-to/add-different-types-of-markers.md
@@ -47,7 +47,7 @@ Initialize the Maps component with marker settings. Here, a marker is added with
}
```
-![Markers with circle shape](../images/SingleMarker.PNG)
+![Blazor Maps Marker with Circle Shape](../images/blazor-maps-marker-with-circle.PNG)
Step 2
@@ -94,7 +94,7 @@ Customize the above option for n number of markers as demonstrated in the follow
}
```
-![Maps with multiple marker](../images/MultipleMarker.PNG)
+![Blazor Maps with Multiple Marker](../images/blazor-maps-multiple-marker.PNG)
## Tooltip for marker
@@ -132,4 +132,4 @@ Tooltip is used to display more information about marker on mouse over or touch-
}
```
-![Maps with marker Tooltip](../images/MarkerTooltip.png)
\ No newline at end of file
+![Blazor Maps with Marker Tooltip](../images/blazor-maps-marker-tooltip.png)
\ No newline at end of file
diff --git a/blazor/maps/how-to/change-center-position-on-zooming.md b/blazor/maps/how-to/change-center-position-on-zooming.md
index 72a7f983..75a525db 100644
--- a/blazor/maps/how-to/change-center-position-on-zooming.md
+++ b/blazor/maps/how-to/change-center-position-on-zooming.md
@@ -24,4 +24,4 @@ Blazor Maps component provides support to change the center position of the Maps
```
-![Maps with zoom Factor](../images/ZoomFactor.PNG)
\ No newline at end of file
+![Blazor Maps with Zooming Factor](../images/blazor-maps-zooming.PNG)
\ No newline at end of file
diff --git a/blazor/maps/how-to/display-geometry-shapes-in-bing-maps.md b/blazor/maps/how-to/display-geometry-shapes-in-bing-maps.md
index 50467cb3..9332fc71 100644
--- a/blazor/maps/how-to/display-geometry-shapes-in-bing-maps.md
+++ b/blazor/maps/how-to/display-geometry-shapes-in-bing-maps.md
@@ -35,7 +35,7 @@ To render Bing Maps in the Maps component, set the `UrlTemplate` property with
> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing Maps key.
-![Bing Maps](../images/bingmap.PNG)
+![Blazor Bing Maps](../images/blazor-bing-map.PNG)
Step 2
@@ -68,4 +68,4 @@ Add geometry shape in the Bing Maps using sublayer concept. To add geometry shap
The above code renders Africa continent as sublayer in the Bing Maps.
-![Bing Map with Sublayer](../images/BingMapSublayer.PNG)
\ No newline at end of file
+![Blazor Bing Maps with Sublayer](../images/blazor-bing-map-sublayer.PNG)
\ No newline at end of file
diff --git a/blazor/maps/images/Internationalization/blazor-maps-globalization.png b/blazor/maps/images/Internationalization/blazor-maps-globalization.png
new file mode 100644
index 00000000..768908e5
Binary files /dev/null and b/blazor/maps/images/Internationalization/blazor-maps-globalization.png differ
diff --git a/blazor/maps/images/Internationalization/blazor-maps-numeric-format.png b/blazor/maps/images/Internationalization/blazor-maps-numeric-format.png
new file mode 100644
index 00000000..69ac64e0
Binary files /dev/null and b/blazor/maps/images/Internationalization/blazor-maps-numeric-format.png differ
diff --git a/blazor/maps/images/Localization/blazor-maps-localization.png b/blazor/maps/images/Localization/blazor-maps-localization.png
new file mode 100644
index 00000000..aa96452e
Binary files /dev/null and b/blazor/maps/images/Localization/blazor-maps-localization.png differ
diff --git a/blazor/maps/images/Marker/blazor-maps-initial-shape-selection.PNG b/blazor/maps/images/Marker/blazor-maps-initial-shape-selection.PNG
new file mode 100644
index 00000000..ffc840b5
Binary files /dev/null and b/blazor/maps/images/Marker/blazor-maps-initial-shape-selection.PNG differ
diff --git a/blazor/maps/images/Marker/blazor-maps-marker-cluster.PNG b/blazor/maps/images/Marker/blazor-maps-marker-cluster.PNG
new file mode 100644
index 00000000..a8690a38
Binary files /dev/null and b/blazor/maps/images/Marker/blazor-maps-marker-cluster.PNG differ
diff --git a/blazor/maps/images/Print/blazor-maps-exporting.png b/blazor/maps/images/Print/blazor-maps-exporting.png
new file mode 100644
index 00000000..0260e0c4
Binary files /dev/null and b/blazor/maps/images/Print/blazor-maps-exporting.png differ
diff --git a/blazor/maps/images/Print/blazor-maps-osm-export.png b/blazor/maps/images/Print/blazor-maps-osm-export.png
new file mode 100644
index 00000000..85d5efe1
Binary files /dev/null and b/blazor/maps/images/Print/blazor-maps-osm-export.png differ
diff --git a/blazor/maps/images/Print/blazor-maps-printing.png b/blazor/maps/images/Print/blazor-maps-printing.png
new file mode 100644
index 00000000..81fcf95c
Binary files /dev/null and b/blazor/maps/images/Print/blazor-maps-printing.png differ
diff --git a/blazor/maps/images/UserInteraction/blazor-maps-bubble-selection.PNG b/blazor/maps/images/UserInteraction/blazor-maps-bubble-selection.PNG
new file mode 100644
index 00000000..67249c30
Binary files /dev/null and b/blazor/maps/images/UserInteraction/blazor-maps-bubble-selection.PNG differ
diff --git a/blazor/maps/images/UserInteraction/blazor-maps-custom-tooltip-in-zoom-toolbar.png b/blazor/maps/images/UserInteraction/blazor-maps-custom-tooltip-in-zoom-toolbar.png
new file mode 100644
index 00000000..05911ea8
Binary files /dev/null and b/blazor/maps/images/UserInteraction/blazor-maps-custom-tooltip-in-zoom-toolbar.png differ
diff --git a/blazor/maps/images/UserInteraction/blazor-maps-custom-tooltip.PNG b/blazor/maps/images/UserInteraction/blazor-maps-custom-tooltip.PNG
new file mode 100644
index 00000000..88c39309
Binary files /dev/null and b/blazor/maps/images/UserInteraction/blazor-maps-custom-tooltip.PNG differ
diff --git a/blazor/maps/images/UserInteraction/blazor-maps-custom-zoom-toolbar-buttons.png b/blazor/maps/images/UserInteraction/blazor-maps-custom-zoom-toolbar-buttons.png
new file mode 100644
index 00000000..2c08a763
Binary files /dev/null and b/blazor/maps/images/UserInteraction/blazor-maps-custom-zoom-toolbar-buttons.png differ
diff --git a/blazor/maps/images/UserInteraction/blazor-maps-custom-zooming-toolbar.png b/blazor/maps/images/UserInteraction/blazor-maps-custom-zooming-toolbar.png
new file mode 100644
index 00000000..2238f4ed
Binary files /dev/null and b/blazor/maps/images/UserInteraction/blazor-maps-custom-zooming-toolbar.png differ
diff --git a/blazor/maps/images/UserInteraction/blazor-maps-highlight-shape.png b/blazor/maps/images/UserInteraction/blazor-maps-highlight-shape.png
new file mode 100644
index 00000000..4d158dbc
Binary files /dev/null and b/blazor/maps/images/UserInteraction/blazor-maps-highlight-shape.png differ
diff --git a/blazor/maps/images/UserInteraction/blazor-maps-marker-selection.PNG b/blazor/maps/images/UserInteraction/blazor-maps-marker-selection.PNG
new file mode 100644
index 00000000..0eca95e7
Binary files /dev/null and b/blazor/maps/images/UserInteraction/blazor-maps-marker-selection.PNG differ
diff --git a/blazor/maps/images/UserInteraction/blazor-maps-shape-selection-using-legend.png b/blazor/maps/images/UserInteraction/blazor-maps-shape-selection-using-legend.png
new file mode 100644
index 00000000..06152425
Binary files /dev/null and b/blazor/maps/images/UserInteraction/blazor-maps-shape-selection-using-legend.png differ
diff --git a/blazor/maps/images/UserInteraction/blazor-maps-shape-selection.png b/blazor/maps/images/UserInteraction/blazor-maps-shape-selection.png
new file mode 100644
index 00000000..4d158dbc
Binary files /dev/null and b/blazor/maps/images/UserInteraction/blazor-maps-shape-selection.png differ
diff --git a/blazor/maps/images/UserInteraction/blazor-maps-tooltip-template.PNG b/blazor/maps/images/UserInteraction/blazor-maps-tooltip-template.PNG
new file mode 100644
index 00000000..13f5c76e
Binary files /dev/null and b/blazor/maps/images/UserInteraction/blazor-maps-tooltip-template.PNG differ
diff --git a/blazor/maps/images/UserInteraction/blazor-maps-tooltip.png b/blazor/maps/images/UserInteraction/blazor-maps-tooltip.png
new file mode 100644
index 00000000..0a9c24b4
Binary files /dev/null and b/blazor/maps/images/UserInteraction/blazor-maps-tooltip.png differ
diff --git a/blazor/maps/images/UserInteraction/blazor-maps-zooming.png b/blazor/maps/images/UserInteraction/blazor-maps-zooming.png
new file mode 100644
index 00000000..bb1a0203
Binary files /dev/null and b/blazor/maps/images/UserInteraction/blazor-maps-zooming.png differ
diff --git a/blazor/maps/images/blazor-bing-map-sublayer.PNG b/blazor/maps/images/blazor-bing-map-sublayer.PNG
new file mode 100644
index 00000000..733e4b9b
Binary files /dev/null and b/blazor/maps/images/blazor-bing-map-sublayer.PNG differ
diff --git a/blazor/maps/images/blazor-bing-map.PNG b/blazor/maps/images/blazor-bing-map.PNG
new file mode 100644
index 00000000..220cdc9d
Binary files /dev/null and b/blazor/maps/images/blazor-bing-map.PNG differ
diff --git a/blazor/maps/images/blazor-maps-marker-with-circle.PNG b/blazor/maps/images/blazor-maps-marker-with-circle.PNG
new file mode 100644
index 00000000..96abd7d4
Binary files /dev/null and b/blazor/maps/images/blazor-maps-marker-with-circle.PNG differ
diff --git a/blazor/maps/images/blazor-maps-multiple-marker.PNG b/blazor/maps/images/blazor-maps-multiple-marker.PNG
new file mode 100644
index 00000000..13cca427
Binary files /dev/null and b/blazor/maps/images/blazor-maps-multiple-marker.PNG differ
diff --git a/blazor/maps/images/blazor-maps-zooming.PNG b/blazor/maps/images/blazor-maps-zooming.PNG
new file mode 100644
index 00000000..c0209a75
Binary files /dev/null and b/blazor/maps/images/blazor-maps-zooming.PNG differ
diff --git a/blazor/maps/internationalization.md b/blazor/maps/internationalization.md
index 6b722ac3..da7f12c4 100644
--- a/blazor/maps/internationalization.md
+++ b/blazor/maps/internationalization.md
@@ -55,7 +55,7 @@ Maps component using [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.B
}
```
-![Maps Sample](./images/Internationalization/International.PNG)
+![Blazor Maps with Gloabalization](./images/Internationalization/blazor-maps-globalization.PNG)
## Numeric Format
@@ -97,7 +97,7 @@ The numeric formats such as currency, percentage and so on can be displayed in t
}
```
-![Maps Sample](./images/Internationalization/Internationalization.png)
+![Blazor Maps with Numeric Format](./images/Internationalization/blazor-maps-numeric-format.png)
## See also
diff --git a/blazor/maps/localization.md b/blazor/maps/localization.md
index fcf64e4e..fff62b7e 100644
--- a/blazor/maps/localization.md
+++ b/blazor/maps/localization.md
@@ -95,7 +95,7 @@ The following is the list of properties that is available in the **.resx** file
}
```
-![Maps with localization](./images/Localization/Localization.png)
+![Blazor Maps with Localization](./images/Localization/blazor-maps-localization.png)
## See also
diff --git a/blazor/maps/print-and-export.md b/blazor/maps/print-and-export.md
index 3542fa6e..8cf9e862 100644
--- a/blazor/maps/print-and-export.md
+++ b/blazor/maps/print-and-export.md
@@ -36,7 +36,7 @@ The rendered Maps can be printed directly from the browser by calling the [Print
}
```
-![Maps with print option](./images/Print/print.png)
+![Printing in Blazor Maps](./images/Print/blazor-maps-printing.png)
## Export
@@ -68,7 +68,7 @@ To use the image export functionality, set the [AllowImageExport](https://help.s
}
```
-![Maps with export option](./images/Print/export.png)
+![Exporting in Blazor Maps](./images/Print/blazor-maps-exporting.png)
### PDF Export
@@ -94,7 +94,7 @@ To use the PDF export functionality, set the [AllowPdfExport](https://help.syncf
}
```
-![Maps with export option](./images/Print/export.png)
+![Blazor Maps with PDF Export](./images/Print/blazor-maps-exporting.png)
### Exporting Maps as base64 string of the file
@@ -153,4 +153,4 @@ The rendered Maps with providers such as OSM, Bing and other map providers can b
}
```
-![Maps with export option](./images/Print/osm-export.png)
\ No newline at end of file
+![Blazor Maps with OSM Export](./images/Print/blazor-maps-osm-export.png)
\ No newline at end of file
diff --git a/blazor/maps/user-interactions.md b/blazor/maps/user-interactions.md
index a2e0363f..2dfa3731 100644
--- a/blazor/maps/user-interactions.md
+++ b/blazor/maps/user-interactions.md
@@ -29,7 +29,7 @@ Zooming of Maps is enabled by setting the [Enable](https://help.syncfusion.com/c
```
-![Maps with zoom toolbar](./images/UserInteraction/Zoom.png)
+![Blazor Maps with Zooming](./images/UserInteraction/blazor-maps-zooming.png)
Enable panning
@@ -105,7 +105,7 @@ The [MapsZoomToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.B
```
-![Maps with custom zoom toolbar](./images/UserInteraction/custom-toolbar.png)
+![Blazor Maps with Custom Zooming Toolbar](./images/UserInteraction/blazor-maps-custom-zooming-toolbar.png)
The [MapsZoomToolbarButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html) class can be used to customize the buttons in the zooming toolbar. The `MapsZoomToolbarButton` class has the following properties.
@@ -139,7 +139,7 @@ The [MapsZoomToolbarButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla
```
-![Maps with custom zoom toolbar buttons](./images/UserInteraction/custom-toolbar-buttons.png)
+![Blazor Maps with Custom Zoom Toolbar Buttons](./images/UserInteraction/blazor-maps-custom-zoom-toolbar-buttons.png)
The [MapsZoomToolbarTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html) class can be used to customize the tooltip in the zooming toolbar. The `MapsZoomToolbarTooltipSettings` class has the following properties.
@@ -174,7 +174,7 @@ The [MapsZoomToolbarTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncf
```
-![Maps with custom tooltip in zoom toolbar](./images/UserInteraction/custom-tooltip.png)
+![Blazor Maps with Custom Tooltip in Zoom Toolbar](./images/UserInteraction/blazor-maps-custom-tooltip-in-zoom-toolbar.png)
#### Pinch zooming
@@ -315,7 +315,7 @@ The following properties and class are available to customize the selection of M
```
-![Maps with shape selection](./images/UserInteraction/Selection.png)
+![Blazor Maps with Shape Selection](./images/UserInteraction/blazor-maps-shape-selection.png)
By tapping on the specific legend, the shapes which are bounded to the selected legend is also selected and vice versa.
@@ -357,7 +357,7 @@ By tapping on the specific legend, the shapes which are bounded to the selected
}
```
-![Maps with shape selection using legend](./images/UserInteraction/highlight-with-legend.png)
+![Blazor Maps with Shape Selection using Legend](./images/UserInteraction/blazor-maps-shape-selection-using-legend.png)
### Enable selection for bubbles
@@ -405,7 +405,7 @@ To enable the selection for bubbles in Maps, set the [MapsBubbleSelectionSetting
}
```
-![Enable selection for bubble](./images/UserInteraction/selection-bubble.PNG)
+![Enabling Bubble Selection in Blazor Maps](./images/UserInteraction/blazor-maps-bubble-selection.PNG)
### Enable selection for markers
@@ -450,7 +450,7 @@ To enable the selection for markers in Maps, set the [MapsMarkerSelectionSetting
}
```
-![Enable selection for marker](./images/UserInteraction/selection-marker.PNG)
+![Enabling Marker Selection in Blazor Maps](./images/UserInteraction/blazor-maps-marker-selection.PNG)
### Public method for the shape selection
@@ -482,7 +482,7 @@ The [ShapeSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Map
}
```
-![Markers with cluster](./images/Marker/public-method.PNG)
+![Blazor Maps Marker with Cluster](./images/Marker/blazor-maps-marker-cluster.PNG)
### Initial shape selection
@@ -504,7 +504,7 @@ The shape is initially selected using the [MapsInitialShapeSelection](https://he
```
-![initial with selection](./images/Marker/initial-selection.PNG)
+![Blazor Maps with Initial Shape Selection](./images/Marker/blazor-maps-initial-shape-selection.PNG)
### Initial marker selection
@@ -544,7 +544,7 @@ Using the [InitialMarkerSelection](https://help.syncfusion.com/cr/blazor/Syncfus
}
```
-![Enable initial marker selection](./images/UserInteraction/selection-marker.PNG)
+![Blazor Maps with Initial Marker Selection](./images/UserInteraction/blazor-maps-marker-selection.PNG)
## Highlight
@@ -572,7 +572,7 @@ The following properties and classes are available to customize the highlight of
```
-![Maps with highlighting shape](./images/UserInteraction/Highlight.png)
+![Highlighting Blazor Maps Shape](./images/UserInteraction/blazor-maps-highlight-shape.png)
Hovering on the specific legend, the shapes which are bounded to the selected legend is also highlighted and vice versa.
@@ -614,7 +614,7 @@ Hovering on the specific legend, the shapes which are bounded to the selected le
}
```
-![Maps with highlighting shape using legend](./images/UserInteraction/highlight-with-legend.png)
+![Highlighting Blazor Maps Shape with Legend](./images/UserInteraction/blazor-maps-shape-selection-using-legend.png)
### Enable highlight for bubbles
@@ -664,7 +664,7 @@ To enable the highlight for bubbles in Maps, set the [MapsBubbleHighlightSetting
}
```
-![Enable highlight for bubbles](./images/UserInteraction/selection-bubble.PNG)
+![Enabling Bubble Selection in Blazor Maps](./images/UserInteraction/blazor-maps-bubble-selection.PNG)
### Enable highlight for markers
@@ -701,7 +701,7 @@ To enable the highlight for markers in Maps, set the [MapsMarkerHighlightSetting
}
```
-![Enable highlight for markers](./images/UserInteraction/selection-marker.PNG)
+![Highlighting Marker Selection in Blazor Maps](./images/UserInteraction/blazor-maps-marker-selection.PNG)
## Tooltip
@@ -724,7 +724,7 @@ On mouse over or touch end event, the tooltip is used to get more information ab
```
-![Maps with tooltip](./images/UserInteraction/tooltip.PNG)
+![Blazor Maps with Tooltip](./images/UserInteraction/blazor-maps-tooltip.PNG)
### Customization
@@ -782,7 +782,7 @@ The following properties are available to customize the tooltip of the Maps comp
}
```
-![Maps with tooltip](./images/UserInteraction/tooltip-customization.png)
+![Blazor Maps with Custom Tooltip](./images/UserInteraction/blazor-maps-custom-tooltip.png)
### Tooltip template
@@ -886,7 +886,7 @@ The HTML element can be rendered in the tooltip of the Maps using the [TooltipTe
```
-![Maps with tooltip template](./images/UserInteraction/tooltip-template.PNG)
+![Blazor Maps with Tooltip Template](./images/UserInteraction/blazor-maps-tooltip-template.PNG)
## See also
diff --git a/blazor/pdfviewer/annotation/comments.md b/blazor/pdfviewer/annotation/comments.md
index 59ad7de6..2e2748ee 100644
--- a/blazor/pdfviewer/annotation/comments.md
+++ b/blazor/pdfviewer/annotation/comments.md
@@ -18,7 +18,7 @@ The PDF Viewer control provides options to add, edit, and delete the comments to
* Text markup annotation
* Free text annotation
-![Comments](../../pdfviewer/images/commentannot.png)
+![Comments in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-comments.png)
## Adding a comment to the annotation
@@ -50,7 +50,7 @@ If the comment panel is already in open state, you can select the annotations an
* Selected annotation comment container is highlighted in the comment panel.
* Now, you can add comment and comment replies using comment panel.
-![AddingComments](../../pdfviewer/images/stickycomment.png)
+![Adding Comments in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-add-new-comment.png)
### Adding Comment Replies
@@ -64,7 +64,7 @@ If the comment panel is already in open state, you can select the annotations an
* Select Set Status option in the context menu that appears.
* Select the status of the annotation comment in the context menu that appears.
-![CommentStatus](../../pdfviewer/images/commentstatus.png)
+![Blazor PDFViewer with Comment Status](../../pdfviewer/images/blazor-pdfviewer-comment-status.png)
### Editing the comments and comments replies of the annotations
@@ -95,7 +95,7 @@ The annotation comment and comment replies can be edited by the following ways:
* Select the status of the annotation comment in the context menu that appears.
* Status ‘None’ is the default state. If status set to ‘None’, the comments or reply does not appear.
-![CommentEdit](../../pdfviewer/images/commentsedit.png)
+![Editing Comment in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-comment-editing.png)
### Delete Comment or Comment Replies
@@ -103,7 +103,7 @@ The annotation comment and comment replies can be edited by the following ways:
* Click the more options button shown in Comments or reply container.
* Select Delete option in the context menu that appears.
-![CommentEdit](../../pdfviewer/images/commentsdelete.png)
+![Deleting Comment in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-delete-comments.png)
> The annotation will be deleted on deleting the comment using comment panel.
diff --git a/blazor/pdfviewer/annotation/free-text-annotation.md b/blazor/pdfviewer/annotation/free-text-annotation.md
index 61ed526b..694d3c47 100644
--- a/blazor/pdfviewer/annotation/free-text-annotation.md
+++ b/blazor/pdfviewer/annotation/free-text-annotation.md
@@ -21,7 +21,7 @@ The Free text annotations can be added to the PDF document using the annotation
In the pan mode, if the free text annotation mode is entered, the PDF Viewer control will switch to text select mode.
-![FreeTextAnnotation](../../pdfviewer/images/freetext_tool.png)
+![Free Text Annotation in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-free-text-annotation.png)
Refer to the following code snippet to switch to Free Text annotation mode.
@@ -53,55 +53,55 @@ The font family, font size, font styles, font color, text alignment, fill color,
The font family of the annotation can be edited by selecting the desired font in the Font Family tool.
-![FontFamily](../../pdfviewer/images/fontfamily.png)
+![Editing Font Family of Blazor PDFViewer Text](../../pdfviewer/images/blazor-pdfviewer-edit-font-family.png)
### Editing font size
The font size of the annotation can be edited by selecting the desired size in the Font Size tool.
-![FontSize](../../pdfviewer/images/fontsize.png)
+![Editing Font Size of Blazor PDFViewer Text](../../pdfviewer/images/blazor-pdfviewer-edit-font-size.png)
### Editing font color
The font color of the annotation can be edited using the color palette provided in the Font Color tool.
-![FontColor](../../pdfviewer/images/fontcolor.png)
+![Editing Font Color of Blazor PDFViewer Text](../../pdfviewer/images/fontcolor.png)
### Editing the text alignment
The text in the annotation can be aligned by selecting the desired styles in the dropdown pop-up in the Text Align tool.
-![FreeTextAnnotation](../../pdfviewer/images/textalign.png)
+![Editing Free Text Annotation in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-text-alignment.png)
### Editing text styles
The style of the text in the annotation can be by edited by selecting the desired styles in the dropdown pop-up in the Font Style tool.
-![FontStyle](../../pdfviewer/images/fontstyle.png)
+![Editing Font Style in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-edit-font-style.png)
### Editing fill color
The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
-![FillColor](../../pdfviewer/images/fillcolor.png)
+![Editing Fill Color in Blazor PDFViewer Text](../../pdfviewer/images/blazor-pdfviewer-text-fill-color.png)
### Editing stroke color
The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
-![StrokeColor](../../pdfviewer/images/fontstroke.png)
+![Editing Stroke Color of Blazor PDFViewer Text](../../pdfviewer/images/blazor-pdfviewer-font-stroke.png)
### Editing thickness
The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
-![FontThickness](../../pdfviewer/images/fontthickness.png)
+![Editing Font Border Thickness of Blazor PDFViewer Text](../../pdfviewer/images/blazor-pdfviewer-font-border-thickness.png)
### Editing opacity
The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-![FontOpacity](../../pdfviewer/images/fontopacity.png)
+![Editing Font Opacity in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-font-opacity.png)
## Setting default properties during control initialization
diff --git a/blazor/pdfviewer/annotation/measurement-annotation.md b/blazor/pdfviewer/annotation/measurement-annotation.md
index a7268cbe..aa8bb086 100644
--- a/blazor/pdfviewer/annotation/measurement-annotation.md
+++ b/blazor/pdfviewer/annotation/measurement-annotation.md
@@ -17,7 +17,7 @@ The PDF Viewer provides the options to add measurement annotations. You can meas
* Radius
* Volume
-![CalibrateAnnotation](../../pdfviewer/images/calibrate_annotatio.png)
+![Calibrate Annotation in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-calibrate-annotation.png)
## Adding measurement annotations to the PDF document
@@ -30,7 +30,7 @@ The measurement annotations can be added to the PDF document using the annotatio
In the pan mode, if the measurement annotation mode is entered, the PDF Viewer control will switch to text select mode.
-![CalibrateTool](../../pdfviewer/images/calibrate_tool.png)
+![Adding Calibrate in Blazor PDFViewer Toolbar](../../pdfviewer/images/blazor-pdfviewer-add-calibrate-in-toolbar.png)
Refer to the following code snippet to switch to distance annotation mode.
@@ -62,31 +62,31 @@ The fill color, stroke color, thickness, and opacity of the measurement annotati
The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
-![CalibrateFillColor](../../pdfviewer/images/calibrate_fillcolor.png)
+![Editing Calibrate FillColor in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-calibrate-fillcolor.png)
### Editing stroke color
The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
-![CalibrateStrokeColor](../../pdfviewer/images/calibrate_stroke.png)
+![Editing Calibrate StrokeColor in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-calibrate-stroke-color.png)
### Editing thickness
The thickness of the border of the annotation can be edited using the range slider provided in the Edit thickness tool.
-![CalibrateThickness](../../pdfviewer/images/calibrate_thickness.png)
+![Editing Calibrate Thickness in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-calibrate-thickness.png)
### Editing opacity
The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-![CalibrateOpacity](../../pdfviewer/images/calibarte_opacity.png)
+![Editing Calibrate Opacity in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-calibrate-opacity.png)
### Editing the line properties
The properties of the line shapes such as distance and perimeter annotations can be edited using the Line properties window. It can be opened by selecting the Properties option in the context menu that appears on right-clicking the distance and perimeter annotations.
-![CalibrateProperty](../../pdfviewer/images/calibrate_lineprop.png)
+![Editing Calibrate Property in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-calibrate-property.png)
## Setting default properties during control initialization
@@ -113,7 +113,7 @@ Refer to the following code snippet to set the default annotation settings.
The scale ratio and unit of measurement can be modified using the scale ratio option provided in the context menu of the PDF Viewer control.
-![CalibrateScaleRatio](../../pdfviewer/images/calibrate_scaleratio.png)
+![Editing Calibrate Scale Ratio in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-calibrate-scaleratio.png)
The Units of measurements support for the measurement annotations in the PDF Viewer are
@@ -124,7 +124,7 @@ The Units of measurements support for the measurement annotations in the PDF Vie
* Pica
* Feet
-![CalibrateScaleDialog](../../pdfviewer/images/calibrate_scaledialog.png)
+![Calibrate Scale Dialog in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-calibrate-scale-dialog.png)
## Setting default scale ratio settings during control initialization
diff --git a/blazor/pdfviewer/annotation/shape-annotation.md b/blazor/pdfviewer/annotation/shape-annotation.md
index 604a2274..e5878be2 100644
--- a/blazor/pdfviewer/annotation/shape-annotation.md
+++ b/blazor/pdfviewer/annotation/shape-annotation.md
@@ -17,7 +17,7 @@ The PDF Viewer control provides the options to add, edit and delete the shape an
* Circle
* Polygon
-![ShapeAnnotation](../../pdfviewer/images/shape_annot.png)
+![Shape Annotation in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-shape-annotation.png)
## Adding a shape annotation to the PDF document
@@ -30,7 +30,7 @@ Shape annotations can be added to the PDF document using the annotation toolbar.
In the pan mode, if the shape annotation mode is entered, the PDF Viewer control will switch to text select mode.
-![ShapeTool](../../pdfviewer/images/shape_toolbar.png)
+![Adding Shapes in Blazor PDFViewer Toolbar](../../pdfviewer/images/blazor-pdfviewer-add-shape-in-toolbar.png)
Refer to the following code snippet to switch to circle annotation mode.
@@ -62,25 +62,25 @@ The fill color, stroke color, thickness and opacity of the shape annotation can
The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
-![ShapeFillColor](../../pdfviewer/images/shape_fillColor.png)
+![Editing Fill Color in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-edit-fill-color.png)
### Editing stroke color
The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
-![ShapeStrokeColor](../../pdfviewer/images/shape_strokecolor.png)
+![Editing Shape Stroke Color in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-edit-shape-stroke-color.png)
### Editing thickness
The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
-![ShapeThickness](../../pdfviewer/images/shape_thickness.png)
+![Editing Shape Thickness in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-shape-thickness.png)
### Editing opacity
The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-![ShapeOpacity](../../pdfviewer/images/shape_opacity.png)
+![Editing Shape Opacity in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-shape-opacity.png)
### Editing the line properties
@@ -88,7 +88,7 @@ The properties of the line shapes such as line and arrow annotations can be edit
Refer to the following code snippet to set the default annotation settings.
-![ShapeProperty](../../pdfviewer/images/shape_lineprty.png)
+![Editing Line Property in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-edit-line-property.png)
## Setting default properties during control initialization
diff --git a/blazor/pdfviewer/annotation/stamp-annotation.md b/blazor/pdfviewer/annotation/stamp-annotation.md
index dea67837..ce589799 100644
--- a/blazor/pdfviewer/annotation/stamp-annotation.md
+++ b/blazor/pdfviewer/annotation/stamp-annotation.md
@@ -16,7 +16,7 @@ The PDF Viewer control provides options to add, edit, delete and rotate the foll
* Standard Business
* Custom Stamp
-![StampAnnotation](../../pdfviewer/images/stamp_annot.png)
+![Stamp Annotation in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-stamp-annotation.png)
## Adding stamp annotations to the PDF document
@@ -25,11 +25,11 @@ The stamp annotations can be added to the PDF document using the annotation tool
* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
* Click the **Stamp Annotation** dropdown button. A dropdown pop-up will appear and shows the stamp annotations to be added.
-![StampTool](../../pdfviewer/images/stamp_tool.png)
+![Adding Stamp in Blazor PDFViewer Toolbar](../../pdfviewer/images/blazor-pdfviewer-add-stamp-in-toolbar.png)
* Select the annotation type to be added to the page in the pop-up.
-![StampPopup](../../pdfviewer/images/selectstamp_annot.png)
+![Selecting Annotation from Stamp Popup in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-select-stamp-annotation.png)
* You can add the annotation over the pages of the PDF document.
@@ -41,7 +41,7 @@ In the pan mode, if the stamp annotation mode is entered, the PDF Viewer control
* Click the **Stamp Annotation** dropdown button. A dropdown pop-up will appear and shows the stamp annotations to be added.
* Click the Custom Stamp button.
-![CustomStamp](../../pdfviewer/images/customstamp.png)
+![Custom Stamp in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-custom-stamp.png)
* The file explorer dialog will appear, choose the image and then add the image in the PDF page.
diff --git a/blazor/pdfviewer/annotation/sticky-notes-annotation.md b/blazor/pdfviewer/annotation/sticky-notes-annotation.md
index 0da78301..f9b71355 100644
--- a/blazor/pdfviewer/annotation/sticky-notes-annotation.md
+++ b/blazor/pdfviewer/annotation/sticky-notes-annotation.md
@@ -11,7 +11,7 @@ documentation: ug
The PDF Viewer control provides the options to add, edit, and delete the sticky note annotations in the PDF document.
-![StickyNotesAnnotation](../../pdfviewer/images/stickynotes_annotation.png)
+![StickyNotes Annotation in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-stickynotes-annotation.png)
## Adding a sticky note annotation to the PDF document
@@ -21,7 +21,7 @@ Sticky note annotations can be added to the PDF document using the annotation to
* Click the position, where you want to add sticky note annotation in the PDF document.
* Sticky note annotation will be added in the clicked positions.
-![StickyNotesTool](../../pdfviewer/images/stickynotes_tool.png)
+![Adding StickyNotes in Blazor PDFViewer Toolbar](../../pdfviewer/images/blazor-pdfviewer-add-stickynotes-in-toolbar.png)
Annotation comments can be added to the PDF document using the comment panel.
@@ -30,7 +30,7 @@ Annotation comments can be added to the PDF document using the comment panel.
* Now, you can add Comments, Reply, and Status using Comment Panel.
* Now, you can add Comments, Reply, and Status using Comment Panel
-![StickyNotesComment](../../pdfviewer/images/stickynotes_comment.png)
+![Blazor PDFViewer with StickyNotes Comment](../../pdfviewer/images/blazor-pdfviewer-stickynotes-comment.png)
## Editing the properties of the sticky note annotation
@@ -38,7 +38,7 @@ Annotation comments can be added to the PDF document using the comment panel.
The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-![StickyNotesOpacity](../../pdfviewer/images/sticky_opacity.png)
+![StickyNotes Opacity in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-stickynotes-opacity.png)
### Editing comments
@@ -46,11 +46,11 @@ The comment, comment reply, and comment status of the annotation can be edited u
* Open the comment panel using the Comment Panel button showing in the annotation toolbar.
-![StickyNotesComment](../../pdfviewer/images/commentPanel.png)
+![Editing StickyNotes Comment in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-edit-sticknotes-comment.png)
You can modify or delete the comments or comments replay and it’s status using the menu option provided in the comment panel.
-![StickyNotesEdit](../../pdfviewer/images/sticky_editbtn.png)
+![StickyNotes Editing in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-editing-stickynotes.png)
## Setting default properties during control initialization
diff --git a/blazor/pdfviewer/annotation/text-markup-annotation.md b/blazor/pdfviewer/annotation/text-markup-annotation.md
index 68c29777..76d28465 100644
--- a/blazor/pdfviewer/annotation/text-markup-annotation.md
+++ b/blazor/pdfviewer/annotation/text-markup-annotation.md
@@ -11,7 +11,7 @@ documentation: ug
The PDF Viewer control provides the options to add, edit, and delete text markup annotations such as highlight, underline, and strikethrough annotations in the PDF document.
-![TextMarkupAnnotation](../../pdfviewer/images/text_markup_annotation.png)
+![Blazor PDFViewer with Text Markup Annotation](../../pdfviewer/images/blazor-pdfviewer-text-markup-annotation.png)
## Adding text markup annotation to the PDF Document
@@ -25,7 +25,7 @@ There are two ways to highlight a text in the PDF document.
* Select a text in the PDF document and right-click it
* Select **Highlight** option in the context menu that appears
-![HighlightContext](../../pdfviewer/images/highlight_context.png)
+![Highlighting Context in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-highlight-context.png)
**Using the annotation toolbar.**
@@ -34,7 +34,7 @@ There are two ways to highlight a text in the PDF document.
* Select the text and the highlight annotation will be added.
* You can also select the text and apply the highlight annotation using the **Highlight** button
-![HighlightText](../../pdfviewer/images/highlight_text.png)
+![Highlighting Text in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-highlight-text.png)
In the pan mode, if the highlight mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for highlighting the text.
@@ -69,7 +69,7 @@ There are two ways to underline a text in the PDF document:
* Select a text in the PDF document and right-click it
* Select **Underline** option in the context menu that appears.
-![UnderlineContext](../../pdfviewer/images/underline_context.png)
+![Displaying Underline in Blazor PDFViewer ContextMenu](../../pdfviewer/images/blazor-pdfviewer-underline-context-menu.png)
**Using the annotation toolbar.**
@@ -78,7 +78,7 @@ There are two ways to underline a text in the PDF document:
* Select the text and the underline annotation will be added.
* You can also select the text and apply the underline annotation using the **Underline** button
-![UnderlineText](../../pdfviewer/images/underline_text.png)
+![Blazor PDFViewer with Underline Text](../../pdfviewer/images/blazor-pdfviewer-underline-text.png)
In the pan mode, if the underline mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for underlining the text.
@@ -113,7 +113,7 @@ Using the context menu.
* Select a text in the PDF document and right-click it
* Select **strikethrough** option in the context menu that appears.
-![StrikeThrough](../../pdfviewer/images/strikethrough_context.png)
+![Displaying Strike Through in Blazor PDFViewer ContextMenu](../../pdfviewer/images/blazor-pdfviewer-strike-through-in-contextmenu.png)
**Using the annotation toolbar.**
@@ -122,7 +122,7 @@ Using the context menu.
* Select the text and the strikethrough annotation will be added.
* You can also select the text and apply the strikethrough annotation using the **Strikethrough** button
-![StrikeThroughText](../../pdfviewer/images/strike_through.png)
+![Blazor PDFViewer with StrikeThrough Text](../../pdfviewer/images/blazor-pdfviewer-strike-through-text.png)
In the pan mode, if the strikethrough mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection to strike through the text.
@@ -156,13 +156,13 @@ The color and the opacity of the text markup annotation can be edited using the
The color of the annotation can be edited using the color palette provided in the Edit Color tool.
-![TextMarkupEditColor](../../pdfviewer/images/textmarkup_editcolor.png)
+![Editing Text Color in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-editing-text-color.png)
### Editing opacity
The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-![TextMarkupEditOpacity](../../pdfviewer/images/textmarup_editopacity.png)
+![Editing Text Opacity in Blazor PDFViewer](../../pdfviewer/images/blazor-pdfviewer-edit-text-opacity.png)
## Text markup annotation settings
diff --git a/blazor/pdfviewer/getting-started/server-side-application.md b/blazor/pdfviewer/getting-started/server-side-application.md
index 549f7d58..8ca5ae38 100644
--- a/blazor/pdfviewer/getting-started/server-side-application.md
+++ b/blazor/pdfviewer/getting-started/server-side-application.md
@@ -17,19 +17,19 @@ This section briefly explains how to include a PDF Viewer in your Blazor server
**Step 1:** Choose **Create a new project** from the Visual Studio dashboard.Click Next.
-![new project](../images/new-project.png)
+![Creating New Project in Blazor](../images/blazor-create-new-project.png)
**Step 2:** Select **Blazor Server App** from the template, and then click **Next** button..
-![blazor template](../images/blazor-template-serve.png)
+![Blazor Application Template](../images/blazor-application-template.png)
**Step 3:** Now, the project configuration window will popup. Click **Next** button to modify the additional information.
- ![project-configuration](../images/project-configurations-server.png)
+ ![Blazor Project Configuration](../images/blazor-project-configurations.png)
**Step 4:** Select the target Framework **.NET 5.0** at the top of the Application based on your required target and then click **Create** button to create a new Blazor Server application.
- ![Add info](../images/addition-information-server.png)
+ ![Blazor Server Application with Additional Information](../images/blazor-server-app-with-addition-information.png)
**Step 5:** Installing Syncfusion Blazor packages in the application
@@ -43,11 +43,11 @@ You can use any one of the below standard to install the Syncfusion Blazor libra
2. Right-click the project,and then select `Manage NuGet Packages`.
- ![nuget explorer](../images/nuget-explorer.png)
+ ![Blazor NuGet Explorer](../images/blazor-nuget-explorer.png)
3. Search **Syncfusion.Blazor.PdfViewerServer.Windows** keyword in the Browse tab and install **Syncfusion.Blazor.PdfViewerServer.Windows** NuGet package in the application.
- ![select nuget](../images/individual-nuget-server.png)
+ ![Searching Blazor PDFViewer NuGet Package](../images/blazor-pdfviewer-nuget-package.png)
4. The `Syncfusion.Blazor.PdfViewerServer.Windows` package will be included in the newly created project once the installation process is completed.
@@ -61,11 +61,11 @@ W>If you prefer the above new standard (individual NuGet packages), then skip th
1. Now, install **Syncfusion.Blazor** NuGet package to the newly created application by using the `NuGet Package Manager`. Right-click the project and then select Manage NuGet Packages.
- ![nuget explorer](../images/nuget-explorer.png)
+ ![Blazor NuGet Explorer](../images/blazor-nuget-explorer.png)
2. Search **Syncfusion.Blazor** keyword in the Browse tab and install **Syncfusion.Blazor** NuGet package in the application.
- ![select nuget](../images/select-nugets.png)
+ ![Searching Blazor NuGet Package](../images/blazor-nuget-package.png)
3. The `Syncfusion Blazor` package will be installed in the project once the installation process is completed.
@@ -135,7 +135,7 @@ private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
**Step 10:** Run the application, the PDF Viewer component will be rendered in the web browser as shown in the following screenshot.
-![output image](../images/browser-output.png)
+![Blazor PDFViewer](../images/blazor-pdfviewer.png)
Download the Server side application from [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorServer1089926850.zip)
diff --git a/blazor/pdfviewer/getting-started/web-assembly-application.md b/blazor/pdfviewer/getting-started/web-assembly-application.md
index 4b0a1e23..db2b1a4e 100644
--- a/blazor/pdfviewer/getting-started/web-assembly-application.md
+++ b/blazor/pdfviewer/getting-started/web-assembly-application.md
@@ -15,19 +15,19 @@ documentation: ug
**Step 1:** Choose **Create a new project** from the Visual Studio dashboard.Click Next.
-![new project](../images/new-project.png)
+![Creating New Project in Blazor](../images/blazor-create-new-project.png)
**Step 2:** Select **Blazor WebAssembly App** from the template, and then click **Next** button..
-![blazor template](../images/blazor-template.png)
+![Blazor Application Template](../images/blazor-template.png)
**Step 3:** Now, the project configuration window will popup. Click **Next** button to modify the additional information.
- ![project-configuration](../images/project-configurations.png)
+ ![Blazor Project Configuration](../images/blazor-project-configuration.png)
**Step 4:** Select the target Framework **.NET 5.0** at the top of the Application based on your required target and then click **Create** button to create a new Blazor WebAssembly application.
- ![Add info](../images/addition-information.png)
+ ![Blazor Server Application with Additional Information](../images/blazor-webassembly-app-with-addition-information.png)
**Step 5:** Installing Syncfusion Blazor packages in the application
@@ -41,11 +41,11 @@ You can use any one of the below standard to install the Syncfusion Blazor libra
2. Right-click the project,and then select `Manage NuGet Packages`.
- ![nuget explorer](../images/nuget-explorer.png)
+ ![Blazor NuGet Explorer](../images/blazor-nuget-explorer.png)
3. Search **Syncfusion.Blazor.PdfViewer** keyword in the Browse tab and install **Syncfusion.Blazor.PdfViewer** NuGet package in the application.
- ![select nuget](../images/individual-nuget.png)
+ ![Searching Blazor PDFViewer NuGet Package](../images/blazor-pdfviewer-search-nuget-package.png)
4. The Syncfusion Blazor PdfViewer package will be included in the newly created project once the installation process is completed.
@@ -55,11 +55,11 @@ W> If you prefer the above new standard (individual NuGet packages), then skip t
1. Now, install **Syncfusion.Blazor** NuGet package to the newly created application by using the `NuGet Package Manager`. Right-click the project and then select Manage NuGet Packages.
- ![nuget explorer](../images/nuget-explorer.png)
+ ![Blazor NuGet Explorer](../images/blazor-nuget-explorer.png)
2. Search **Syncfusion.Blazor** keyword in the Browse tab and install **Syncfusion.Blazor** NuGet package in the application.
- ![select nuget](../images/select-nugets.png)
+ ![Searching Blazor NuGet Package](../images/blazor-nuget-package.png)
3. The Syncfusion Blazor package will be installed in the project once the installation process is completed.
@@ -125,7 +125,7 @@ We can disable the dynamic script loading and refer to the scripts from the appl
**Step 10:** Run the application, the PDF Viewer component will be rendered in the web browser as shown in the following screenshot.
-![output image](../images/browser-output.png)
+![Blazor PDFViewer](../images/blazor-pdfviewer.png)
Download the WebAssembly application from [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorWebAssembly-2083554717.zip)
diff --git a/blazor/pdfviewer/images/blazor-application-template.png b/blazor/pdfviewer/images/blazor-application-template.png
new file mode 100644
index 00000000..426b5310
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-application-template.png differ
diff --git a/blazor/pdfviewer/images/blazor-create-new-project.png b/blazor/pdfviewer/images/blazor-create-new-project.png
new file mode 100644
index 00000000..1a901e14
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-create-new-project.png differ
diff --git a/blazor/pdfviewer/images/blazor-nuget-explorer.png b/blazor/pdfviewer/images/blazor-nuget-explorer.png
new file mode 100644
index 00000000..72f9986e
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-nuget-explorer.png differ
diff --git a/blazor/pdfviewer/images/blazor-nuget-package.png b/blazor/pdfviewer/images/blazor-nuget-package.png
new file mode 100644
index 00000000..e8f7d311
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-nuget-package.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-add-calibrate-in-toolbar.png b/blazor/pdfviewer/images/blazor-pdfviewer-add-calibrate-in-toolbar.png
new file mode 100644
index 00000000..85842a33
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-add-calibrate-in-toolbar.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-add-new-comment.png b/blazor/pdfviewer/images/blazor-pdfviewer-add-new-comment.png
new file mode 100644
index 00000000..1e5a5e72
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-add-new-comment.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-add-shape-in-toolbar.png b/blazor/pdfviewer/images/blazor-pdfviewer-add-shape-in-toolbar.png
new file mode 100644
index 00000000..45a1de24
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-add-shape-in-toolbar.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-add-stamp-in-toolbar.png b/blazor/pdfviewer/images/blazor-pdfviewer-add-stamp-in-toolbar.png
new file mode 100644
index 00000000..07cb5d68
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-add-stamp-in-toolbar.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-add-stickynotes-in-toolbar.png b/blazor/pdfviewer/images/blazor-pdfviewer-add-stickynotes-in-toolbar.png
new file mode 100644
index 00000000..2ec55b6f
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-add-stickynotes-in-toolbar.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-bookmark-navigation.png b/blazor/pdfviewer/images/blazor-pdfviewer-bookmark-navigation.png
new file mode 100644
index 00000000..593baaff
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-bookmark-navigation.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-annotation.png b/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-annotation.png
new file mode 100644
index 00000000..c786e2db
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-annotation.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-fillcolor.png b/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-fillcolor.png
new file mode 100644
index 00000000..437bee39
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-fillcolor.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-opacity.png b/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-opacity.png
new file mode 100644
index 00000000..63887c9a
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-opacity.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-property.png b/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-property.png
new file mode 100644
index 00000000..be805e46
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-property.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-scale-dialog.png b/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-scale-dialog.png
new file mode 100644
index 00000000..eed16a73
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-scale-dialog.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-scaleratio.png b/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-scaleratio.png
new file mode 100644
index 00000000..58de6abc
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-scaleratio.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-stroke-color.png b/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-stroke-color.png
new file mode 100644
index 00000000..d99487e0
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-stroke-color.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-thickness.png b/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-thickness.png
new file mode 100644
index 00000000..2316d30c
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-calibrate-thickness.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-comment-editing.png b/blazor/pdfviewer/images/blazor-pdfviewer-comment-editing.png
new file mode 100644
index 00000000..998eddb9
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-comment-editing.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-comment-status.png b/blazor/pdfviewer/images/blazor-pdfviewer-comment-status.png
new file mode 100644
index 00000000..d075ee67
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-comment-status.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-comments.png b/blazor/pdfviewer/images/blazor-pdfviewer-comments.png
new file mode 100644
index 00000000..ec38f88e
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-comments.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-custom-stamp.png b/blazor/pdfviewer/images/blazor-pdfviewer-custom-stamp.png
new file mode 100644
index 00000000..7784e1e2
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-custom-stamp.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-custom-toolbar.png b/blazor/pdfviewer/images/blazor-pdfviewer-custom-toolbar.png
new file mode 100644
index 00000000..638719b9
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-custom-toolbar.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-delete-comments.png b/blazor/pdfviewer/images/blazor-pdfviewer-delete-comments.png
new file mode 100644
index 00000000..acc568f8
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-delete-comments.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-edit-fill-color.png b/blazor/pdfviewer/images/blazor-pdfviewer-edit-fill-color.png
new file mode 100644
index 00000000..a4ff973c
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-edit-fill-color.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-edit-font-family.png b/blazor/pdfviewer/images/blazor-pdfviewer-edit-font-family.png
new file mode 100644
index 00000000..091be803
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-edit-font-family.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-edit-font-size.png b/blazor/pdfviewer/images/blazor-pdfviewer-edit-font-size.png
new file mode 100644
index 00000000..2018709b
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-edit-font-size.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-edit-font-style.png b/blazor/pdfviewer/images/blazor-pdfviewer-edit-font-style.png
new file mode 100644
index 00000000..58984eb7
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-edit-font-style.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-edit-line-property.png b/blazor/pdfviewer/images/blazor-pdfviewer-edit-line-property.png
new file mode 100644
index 00000000..f752b198
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-edit-line-property.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-edit-shape-stroke-color.png b/blazor/pdfviewer/images/blazor-pdfviewer-edit-shape-stroke-color.png
new file mode 100644
index 00000000..810c826f
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-edit-shape-stroke-color.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-edit-sticknotes-comment.png b/blazor/pdfviewer/images/blazor-pdfviewer-edit-sticknotes-comment.png
new file mode 100644
index 00000000..1cb1e9ea
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-edit-sticknotes-comment.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-edit-text-opacity.png b/blazor/pdfviewer/images/blazor-pdfviewer-edit-text-opacity.png
new file mode 100644
index 00000000..c20199d0
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-edit-text-opacity.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-editing-stickynotes.png b/blazor/pdfviewer/images/blazor-pdfviewer-editing-stickynotes.png
new file mode 100644
index 00000000..7657ba1f
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-editing-stickynotes.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-editing-text-color.png b/blazor/pdfviewer/images/blazor-pdfviewer-editing-text-color.png
new file mode 100644
index 00000000..4ba6a8f2
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-editing-text-color.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-font-border-thickness.png b/blazor/pdfviewer/images/blazor-pdfviewer-font-border-thickness.png
new file mode 100644
index 00000000..8ce590af
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-font-border-thickness.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-font-opacity.png b/blazor/pdfviewer/images/blazor-pdfviewer-font-opacity.png
new file mode 100644
index 00000000..22b25c75
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-font-opacity.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-font-stroke.png b/blazor/pdfviewer/images/blazor-pdfviewer-font-stroke.png
new file mode 100644
index 00000000..bd03ac64
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-font-stroke.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-free-text-annotation.png b/blazor/pdfviewer/images/blazor-pdfviewer-free-text-annotation.png
new file mode 100644
index 00000000..b6de5972
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-free-text-annotation.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-highlight-context.png b/blazor/pdfviewer/images/blazor-pdfviewer-highlight-context.png
new file mode 100644
index 00000000..13b6cdf7
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-highlight-context.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-highlight-text.png b/blazor/pdfviewer/images/blazor-pdfviewer-highlight-text.png
new file mode 100644
index 00000000..ef44f4eb
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-highlight-text.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-hyperlink-navigation.png b/blazor/pdfviewer/images/blazor-pdfviewer-hyperlink-navigation.png
new file mode 100644
index 00000000..0dbbe3ff
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-hyperlink-navigation.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-magnification.png b/blazor/pdfviewer/images/blazor-pdfviewer-magnification.png
new file mode 100644
index 00000000..b9bd6e66
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-magnification.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-nuget-package.png b/blazor/pdfviewer/images/blazor-pdfviewer-nuget-package.png
new file mode 100644
index 00000000..02b27ac3
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-nuget-package.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-page-navigation.png b/blazor/pdfviewer/images/blazor-pdfviewer-page-navigation.png
new file mode 100644
index 00000000..eda9c942
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-page-navigation.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-page-thumbnail-navigation.png b/blazor/pdfviewer/images/blazor-pdfviewer-page-thumbnail-navigation.png
new file mode 100644
index 00000000..7666bd0e
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-page-thumbnail-navigation.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-search-nuget-package.png b/blazor/pdfviewer/images/blazor-pdfviewer-search-nuget-package.png
new file mode 100644
index 00000000..bfac391b
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-search-nuget-package.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-select-stamp-annotation.png b/blazor/pdfviewer/images/blazor-pdfviewer-select-stamp-annotation.png
new file mode 100644
index 00000000..5825ff7d
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-select-stamp-annotation.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-shape-annotation.png b/blazor/pdfviewer/images/blazor-pdfviewer-shape-annotation.png
new file mode 100644
index 00000000..5dbefe3c
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-shape-annotation.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-shape-opacity.png b/blazor/pdfviewer/images/blazor-pdfviewer-shape-opacity.png
new file mode 100644
index 00000000..a6e7ecca
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-shape-opacity.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-shape-thickness.png b/blazor/pdfviewer/images/blazor-pdfviewer-shape-thickness.png
new file mode 100644
index 00000000..4e8c5d99
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-shape-thickness.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-stamp-annotation.png b/blazor/pdfviewer/images/blazor-pdfviewer-stamp-annotation.png
new file mode 100644
index 00000000..efd1f038
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-stamp-annotation.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-stickynotes-annotation.png b/blazor/pdfviewer/images/blazor-pdfviewer-stickynotes-annotation.png
new file mode 100644
index 00000000..311238d5
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-stickynotes-annotation.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-stickynotes-comment.png b/blazor/pdfviewer/images/blazor-pdfviewer-stickynotes-comment.png
new file mode 100644
index 00000000..84275be8
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-stickynotes-comment.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-stickynotes-opacity.png b/blazor/pdfviewer/images/blazor-pdfviewer-stickynotes-opacity.png
new file mode 100644
index 00000000..ed421c49
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-stickynotes-opacity.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-strike-through-in-contextmenu.png b/blazor/pdfviewer/images/blazor-pdfviewer-strike-through-in-contextmenu.png
new file mode 100644
index 00000000..314335bf
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-strike-through-in-contextmenu.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-strike-through-text.png b/blazor/pdfviewer/images/blazor-pdfviewer-strike-through-text.png
new file mode 100644
index 00000000..988c2d5f
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-strike-through-text.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-text-alignment.png b/blazor/pdfviewer/images/blazor-pdfviewer-text-alignment.png
new file mode 100644
index 00000000..72aabcf1
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-text-alignment.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-text-fill-color.png b/blazor/pdfviewer/images/blazor-pdfviewer-text-fill-color.png
new file mode 100644
index 00000000..0b729e8c
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-text-fill-color.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-text-markup-annotation.png b/blazor/pdfviewer/images/blazor-pdfviewer-text-markup-annotation.png
new file mode 100644
index 00000000..b6c7297c
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-text-markup-annotation.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-text-search.png b/blazor/pdfviewer/images/blazor-pdfviewer-text-search.png
new file mode 100644
index 00000000..6f6924d9
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-text-search.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-title-of-content.png b/blazor/pdfviewer/images/blazor-pdfviewer-title-of-content.png
new file mode 100644
index 00000000..09d9d290
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-title-of-content.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-underline-context-menu.png b/blazor/pdfviewer/images/blazor-pdfviewer-underline-context-menu.png
new file mode 100644
index 00000000..b9e870dd
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-underline-context-menu.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer-underline-text.png b/blazor/pdfviewer/images/blazor-pdfviewer-underline-text.png
new file mode 100644
index 00000000..aea095a1
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer-underline-text.png differ
diff --git a/blazor/pdfviewer/images/blazor-pdfviewer.png b/blazor/pdfviewer/images/blazor-pdfviewer.png
new file mode 100644
index 00000000..27589690
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-pdfviewer.png differ
diff --git a/blazor/pdfviewer/images/blazor-project-configuration.png b/blazor/pdfviewer/images/blazor-project-configuration.png
new file mode 100644
index 00000000..0d2e09a5
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-project-configuration.png differ
diff --git a/blazor/pdfviewer/images/blazor-project-configurations.png b/blazor/pdfviewer/images/blazor-project-configurations.png
new file mode 100644
index 00000000..61b56a38
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-project-configurations.png differ
diff --git a/blazor/pdfviewer/images/blazor-server-app-with-addition-information.png b/blazor/pdfviewer/images/blazor-server-app-with-addition-information.png
new file mode 100644
index 00000000..c41ebdc0
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-server-app-with-addition-information.png differ
diff --git a/blazor/pdfviewer/images/blazor-webassembly-app-with-addition-information.png b/blazor/pdfviewer/images/blazor-webassembly-app-with-addition-information.png
new file mode 100644
index 00000000..a1fd1035
Binary files /dev/null and b/blazor/pdfviewer/images/blazor-webassembly-app-with-addition-information.png differ
diff --git a/blazor/pdfviewer/magnification.md b/blazor/pdfviewer/magnification.md
index 86b21623..e9c6f5a5 100644
--- a/blazor/pdfviewer/magnification.md
+++ b/blazor/pdfviewer/magnification.md
@@ -17,7 +17,7 @@ The built-in toolbar of PDF Viewer contains the following zooming options:
* **Fit** **Page**: Fits the page entirely in the available document view port size.
* **Fit** **Width**: Fits the page to the width of the view port size.
-![Table of content](../pdfviewer/images/magnification.png)
+![Magnification in Blazor PDFViewer](../pdfviewer/images/blazor-pdfviewer-magnification.png)
You can enable or disable the magnification option in PDF Viewer default toolbar by setting the `EnableMagnification` property.
diff --git a/blazor/pdfviewer/navigation.md b/blazor/pdfviewer/navigation.md
index a20e680d..724cbf39 100644
--- a/blazor/pdfviewer/navigation.md
+++ b/blazor/pdfviewer/navigation.md
@@ -27,7 +27,7 @@ The built-in toolbar of PDF Viewer contains the following page navigation tools:
* **Go** **To**: Allows you to quickly jump to the desired page number.
* **Previous** **Page**: Scrolls backwards through pages, one page at a time.
-![Alt Text](../pdfviewer/images/page-navigation.png)
+![Blazor PDFViewer with Page Navigation](../pdfviewer/images/blazor-pdfviewer-page-navigation.png)
You can enable or disable the page navigation option in PDF Viewer default toolbar by setting the `EnableNavigation` property.
@@ -106,7 +106,7 @@ Also, you can programmatically perform page navigation as follows.
The bookmarks saved in PDF files are loaded and listed in the bookmark pane (in the left navigation pane). The users can jump to areas of interest by clicking the desired bookmark easily.
-![Bookmark Navigation](../pdfviewer/images/bookmark.png)
+![Blazor PDFViewer with Bookmark Navigation](../pdfviewer/images/blazor-pdfviewer-bookmark-navigation.png)
You can enable or disable the bookmark navigation pane by setting the `EnableBookmark` property.
@@ -125,7 +125,7 @@ You can enable or disable the bookmark navigation pane by setting the `EnableBoo
Page thumbnails is the miniature representation of actual pages in the PDF files. This feature displays thumbnails of the pages and represents a link to the respective pages. Clicking a page thumbnail will display the respective page in the document view.
-![Thumbnail View](../pdfviewer/images/thumbnail.png)
+![Blazor PDFViewer with Page Thumbnail Navigation](../pdfviewer/images/blazor-pdfviewer-page-thumbnail-navigation.png)
You can enable or disable the thumbnail navigation pane by setting the `EnableThumbnail` property.
@@ -143,13 +143,13 @@ You can enable or disable the thumbnail navigation pane by setting the `EnableTh
Hyperlink navigation features enables navigation to the URLs (website links) in a PDF file.
-![Hyperlink navigation](../pdfviewer/images/link.png)
+![Blazor PDFViewer Hyperlink Navigation](../pdfviewer/images/blazor-pdfviewer-hyperlink-navigation.png)
## Table of content navigation
Table of contents navigation allows users to navigate to different parts of a PDF file that are listed in the table of contents section.
-![Table of content](../pdfviewer/images/toc.png)
+![Table of Content in Blazor PDFViewer](../pdfviewer/images/blazor-pdfviewer-title-of-content.png)
You can enable or disable both hyperlink and table of content navigation by setting the `EnableHyperlink` property.
diff --git a/blazor/pdfviewer/text-search.md b/blazor/pdfviewer/text-search.md
index 10d3a627..8f20826e 100644
--- a/blazor/pdfviewer/text-search.md
+++ b/blazor/pdfviewer/text-search.md
@@ -11,7 +11,7 @@ documentation: ug
You can find the specified text content in the PDF document using the built-in options provided with the toolbar. On initiating the search operation, the control searches for the specified text and highlights all the occurrences in the pages.
-![Text Search](../pdfviewer/images/text-search.png)
+![Text Search in Blazor PDFViewer](../pdfviewer/images/blazor-pdfviewer-text-search.png)
You can enable or disable the text search by setting the `EnableTextSearch` API.
diff --git a/blazor/pdfviewer/toolbar-customization.md b/blazor/pdfviewer/toolbar-customization.md
index c7df652d..1001deeb 100644
--- a/blazor/pdfviewer/toolbar-customization.md
+++ b/blazor/pdfviewer/toolbar-customization.md
@@ -23,7 +23,7 @@ The PDF Viewer comes with a powerful built-in toolbar with the following importa
* Bookmark panel
* Thumbnail panel
-![Alt text](./images/toolbar.png)
+![Blazor PDFViewer with Custom Toolbar](./images/blazor-pdfviewer-custom-toolbar.png)
The following section explains, how to show or hide the toolbar and toolbar item.