diff --git a/blazor/dashboard-layout/faq/all-panels-rendered-at-the-same-position.md b/blazor/dashboard-layout/faq/all-panels-rendered-at-the-same-position.md index fac3a881a1..fbc2b68837 100644 --- a/blazor/dashboard-layout/faq/all-panels-rendered-at-the-same-position.md +++ b/blazor/dashboard-layout/faq/all-panels-rendered-at-the-same-position.md @@ -62,5 +62,5 @@ Here is an example demonstrating how to assign unique `Id` values to dynamically ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXryNOLepGKtuKUL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor DashboardLayout](../images/panel-overlap.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVRXxrApVEfyPkt?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} +![Blazor DashboardLayout](../images/panel-overlap.webp) \ No newline at end of file diff --git a/blazor/dashboard-layout/getting-started-with-server-app.md b/blazor/dashboard-layout/getting-started-with-server-app.md index e48caf6149..41de30ee63 100644 --- a/blazor/dashboard-layout/getting-started-with-server-app.md +++ b/blazor/dashboard-layout/getting-started-with-server-app.md @@ -175,7 +175,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Dashboard Layout component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVpXihOLKRGIhFf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLxtRLUKlzqHcwQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.webp)" %} ## Defining Panels @@ -217,7 +217,7 @@ A basic Dashboard Layout panel can display simple data. The panel's header is de The Dashboard Layout with simple content will be rendered in the web browser as demonstrated in the following screenshot. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLzXChErUwBJvMB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout with Single Data](images/blazor-dashboard-layout-single-content.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBHNxhgKwFngyBq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout with Single Data](images/blazor-dashboard-layout-single-content.webp)" %} ### Panels with Components @@ -386,7 +386,7 @@ These components are placed as panel content by assigning the corresponding Blaz {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLSDIVjTEDbFVUJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout displays Chart Component Content](images/blazor-dashboard-layout-with-chart-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthdjxLUqbWENRZr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout displays Chart Component Content](images/blazor-dashboard-layout-with-chart-component.webp)" %} N> When using the **SfRangeNavigator** component in this sample, ensure that the [Syncfusion.Blazor.RangeNavigator](https://www.nuget.org/packages/Syncfusion.Blazor.RangeNavigator) NuGet package is installed in your project. You can install the package from [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). diff --git a/blazor/dashboard-layout/getting-started-with-web-app.md b/blazor/dashboard-layout/getting-started-with-web-app.md index 12ee0aa4f1..8bd0599147 100644 --- a/blazor/dashboard-layout/getting-started-with-web-app.md +++ b/blazor/dashboard-layout/getting-started-with-web-app.md @@ -179,7 +179,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Dashboard Layout component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVpXihOLKRGIhFf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLxtRLUKlzqHcwQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.webp)" %} ## Defining Panels @@ -221,7 +221,7 @@ A basic Dashboard Layout panel can display simple data. The panel's header is de The Dashboard Layout with simple content will be rendered in the web browser as demonstrated in the following screenshot. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLzXChErUwBJvMB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout with Single Data](images/blazor-dashboard-layout-single-content.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBHNxhgKwFngyBq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout with Single Data](images/blazor-dashboard-layout-single-content.webp)" %} ### Panels with Components @@ -389,7 +389,7 @@ These components are placed as panel content by assigning the corresponding Blaz {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLSDIVjTEDbFVUJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout displays Chart Component](images/blazor-dashboard-layout-with-chart-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthdjxLUqbWENRZr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout displays Chart Component](images/blazor-dashboard-layout-with-chart-component.webp)" %} N> When using the **SfRangeNavigator** component in this sample, ensure that the [Syncfusion.Blazor.RangeNavigator](https://www.nuget.org/packages/Syncfusion.Blazor.RangeNavigator) NuGet package is installed in your project. You can install the package from [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). diff --git a/blazor/dashboard-layout/getting-started.md b/blazor/dashboard-layout/getting-started.md index 48536f0d9e..9313bd73ee 100644 --- a/blazor/dashboard-layout/getting-started.md +++ b/blazor/dashboard-layout/getting-started.md @@ -164,7 +164,7 @@ N> There is no need to assign default value for panels. Refer to the [Panels](./ * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Dashboard Layout component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVpXihOLKRGIhFf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLxtRLUKlzqHcwQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.webp)" %} N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DashboardLayout). @@ -208,7 +208,7 @@ A basic Dashboard Layout panel can display simple data. The panel's header is de The Dashboard Layout with simple content will be rendered in the web browser as demonstrated in the following screenshot. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLzXChErUwBJvMB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout with Single Data](images/blazor-dashboard-layout-single-content.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBHNxhgKwFngyBq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout with Single Data](images/blazor-dashboard-layout-single-content.webp)" %} ### Panels with Components @@ -376,7 +376,7 @@ These components are placed as panel content by assigning the corresponding Blaz {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLSDIVjTEDbFVUJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout displays Chart Component Content](images/blazor-dashboard-layout-with-chart-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthdjxLUqbWENRZr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout displays Chart Component Content](images/blazor-dashboard-layout-with-chart-component.webp)" %} To get started quickly with designing a Blazor Dashboard Layout with UI Components, you can check the video below. diff --git a/blazor/dashboard-layout/images/blazor-admin-template-layout-panel-size.png b/blazor/dashboard-layout/images/blazor-admin-template-layout-panel-size.png deleted file mode 100644 index 0cef273098..0000000000 Binary files a/blazor/dashboard-layout/images/blazor-admin-template-layout-panel-size.png and /dev/null differ diff --git a/blazor/dashboard-layout/images/blazor-admin-template-layout-panel-size.webp b/blazor/dashboard-layout/images/blazor-admin-template-layout-panel-size.webp new file mode 100644 index 0000000000..2df31d1ff2 Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-admin-template-layout-panel-size.webp differ diff --git a/blazor/dashboard-layout/images/blazor-admin-template-layout-with-header.png b/blazor/dashboard-layout/images/blazor-admin-template-layout-with-header.png deleted file mode 100644 index 258bced48e..0000000000 Binary files a/blazor/dashboard-layout/images/blazor-admin-template-layout-with-header.png and /dev/null differ diff --git a/blazor/dashboard-layout/images/blazor-admin-template-layout-with-header.webp b/blazor/dashboard-layout/images/blazor-admin-template-layout-with-header.webp new file mode 100644 index 0000000000..bd728ea117 Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-admin-template-layout-with-header.webp differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-size.png b/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-size.png deleted file mode 100644 index 6fb67b74b6..0000000000 Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-size.png and /dev/null differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-size.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-size.webp new file mode 100644 index 0000000000..3b1a3f5312 Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-size.webp differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-space.png b/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-space.png deleted file mode 100644 index ce4f1691c6..0000000000 Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-space.png and /dev/null differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-space.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-space.webp new file mode 100644 index 0000000000..2315eb9192 Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-space.webp differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-component.png b/blazor/dashboard-layout/images/blazor-dashboard-layout-component.png deleted file mode 100644 index 78c9b8b538..0000000000 Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-component.png and /dev/null differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-component.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-component.webp new file mode 100644 index 0000000000..c231d521ee Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-component.webp differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-and-drop.gif b/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-and-drop.gif deleted file mode 100644 index ec886added..0000000000 Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-and-drop.gif and /dev/null differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-and-drop.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-and-drop.webp new file mode 100644 index 0000000000..f21799ee4e Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-and-drop.webp differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-handler-of-panels.gif b/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-handler-of-panels.gif deleted file mode 100644 index b0988b471f..0000000000 Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-handler-of-panels.gif and /dev/null differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-handler-of-panels.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-handler-of-panels.webp new file mode 100644 index 0000000000..faaa392b6f Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-handler-of-panels.webp differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-gridlines.png b/blazor/dashboard-layout/images/blazor-dashboard-layout-gridlines.png deleted file mode 100644 index 4d80563dac..0000000000 Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-gridlines.png and /dev/null differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-gridlines.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-gridlines.webp new file mode 100644 index 0000000000..59d50235b8 Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-gridlines.webp differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-position.png b/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-position.png deleted file mode 100644 index 7b9b8fbd8c..0000000000 Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-position.png and /dev/null differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-position.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-position.webp new file mode 100644 index 0000000000..31569a15d6 Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-position.webp differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-resizing.gif b/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-resizing.gif deleted file mode 100644 index 1ea87d19fd..0000000000 Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-resizing.gif and /dev/null differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-resizing.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-resizing.webp new file mode 100644 index 0000000000..573bed283a Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-resizing.webp differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-single-content.png b/blazor/dashboard-layout/images/blazor-dashboard-layout-single-content.png deleted file mode 100644 index a07e95e793..0000000000 Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-single-content.png and /dev/null differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-single-content.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-single-content.webp new file mode 100644 index 0000000000..f732da0399 Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-single-content.webp differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-with-chart-component.png b/blazor/dashboard-layout/images/blazor-dashboard-layout-with-chart-component.png deleted file mode 100644 index 742dfef2cf..0000000000 Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-with-chart-component.png and /dev/null differ diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-with-chart-component.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-with-chart-component.webp new file mode 100644 index 0000000000..302e85aec9 Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-with-chart-component.webp differ diff --git a/blazor/dashboard-layout/images/panel-overlap.png b/blazor/dashboard-layout/images/panel-overlap.png deleted file mode 100644 index 9c804453ac..0000000000 Binary files a/blazor/dashboard-layout/images/panel-overlap.png and /dev/null differ diff --git a/blazor/dashboard-layout/images/panel-overlap.webp b/blazor/dashboard-layout/images/panel-overlap.webp new file mode 100644 index 0000000000..e3253dde99 Binary files /dev/null and b/blazor/dashboard-layout/images/panel-overlap.webp differ diff --git a/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md b/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md index 088498a2c2..7229fce570 100644 --- a/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md +++ b/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md @@ -49,7 +49,7 @@ The sample above demonstrates both dragging and the automatic pushing of panels. The following output illustrates the dragging functionality of the dashboard component: -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBeMsigAIcgTaPQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drag and Drop Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-drag-and-drop.gif)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBeMsigAIcgTaPQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drag and Drop Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-drag-and-drop.webp)" %} ## Customizing the Drag Handle @@ -91,4 +91,4 @@ The draggable handle for panels can be customized using the [`DraggableHandle`]( The following output demonstrates customizing the dragging handle, where panels can only be dragged by interacting with their header section. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLyiMsUAeyvtIeu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5 backgroundimage "[Customizing Dragging Handler of Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-drag-handler-of-panels.gif)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBxXxBUpsYHfSbH?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Dragging Handler of Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-drag-handler-of-panels.webp)" %} diff --git a/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md b/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md index 782d117110..e1d08e3858 100644 --- a/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md +++ b/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md @@ -41,4 +41,4 @@ The DashboardLayout component includes a panel floating functionality controlled ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBUCVrcTKrdWwSb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Floating Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-panel-resizing.gif)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVHNHVAfhqmibJG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Floating Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-panel-resizing.webp)" %} \ No newline at end of file diff --git a/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md b/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md index 6aa9b0980d..b074a7ea11 100644 --- a/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md +++ b/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md @@ -41,6 +41,6 @@ The Dashboard Layout component provides panel resizing functionality, which can ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVAsBVwTABPvxgH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resizing Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-panel-resizing.gif)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLxZxBKfVLQowWA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Resizing Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-panel-resizing.gif)" %} N> Initially, the panels can be resized only in south-east direction. However, panels can also be resized in east, west, north, south, and south-west directions by defining the required directions with the [`ResizableHandles`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ResizableHandles) property. \ No newline at end of file diff --git a/blazor/dashboard-layout/panels/position-sizing-of-panels.md b/blazor/dashboard-layout/panels/position-sizing-of-panels.md index 43193a5a6c..9363c2ba07 100644 --- a/blazor/dashboard-layout/panels/position-sizing-of-panels.md +++ b/blazor/dashboard-layout/panels/position-sizing-of-panels.md @@ -70,7 +70,7 @@ Panels within the layout can be precisely positioned and ordered using the [`Row The following screenshot illustrates panel positioning within the Dashboard Layout, utilizing the `Row` and `Column` properties: -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVgMhrwzVWhKSrw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Panels Position in Blazor DashBoard Layout](../images/blazor-dashboard-layout-panel-position.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBxZHLAfjbpGQPd?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Panels Position in Blazor DashBoard Layout](../images/blazor-dashboard-layout-panel-position.webp)" %} ## Sizing of Panels @@ -119,4 +119,4 @@ These properties are invaluable when designing dashboards where the content and The following screenshot demonstrates the sizing of panels within the Dashboard Layout, using the `SizeX` and `SizeY` properties: -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLKMLhcprCIqVxL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Panel Size in Blazor Dashboard Layout](../images/blazor-admin-template-layout-panel-size.png)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhRNRLgTMDPQSDl?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Panel Size in Blazor Dashboard Layout](../images/blazor-admin-template-layout-panel-size.webp)" %} \ No newline at end of file diff --git a/blazor/dashboard-layout/panels/setting-header-of-panels.md b/blazor/dashboard-layout/panels/setting-header-of-panels.md index 670957ea2f..76b23bc7f4 100644 --- a/blazor/dashboard-layout/panels/setting-header-of-panels.md +++ b/blazor/dashboard-layout/panels/setting-header-of-panels.md @@ -53,4 +53,4 @@ The Blazor Dashboard Layout component utilizes two primary templates for renderi ``` The following output demonstrates the use of `HeaderTemplate` and `ContentTemplate` to define the header and content of panels: -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLAMVLGpBoyKHBy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout with Header.](../images/blazor-admin-template-layout-with-header.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLxNHVAzMsmmMMP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout with Header.](../images/blazor-admin-template-layout-with-header.webp)" %} diff --git a/blazor/dashboard-layout/responsive-adaptive.md b/blazor/dashboard-layout/responsive-adaptive.md index b87191f66e..f7b8521a63 100644 --- a/blazor/dashboard-layout/responsive-adaptive.md +++ b/blazor/dashboard-layout/responsive-adaptive.md @@ -43,6 +43,6 @@ The Dashboard Layout is designed to adapt to lower resolutions by transforming i ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrUsLBmpAKBpXmY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Responsive and Adaptive Layout in Blazor DashboardLayout](images/blazor-dashboard-layout-cell-space.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhRjHrUfBoCJosR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Responsive and Adaptive Layout in Blazor DashboardLayout](images/blazor-dashboard-layout-cell-space.webp)" %} The sample above demonstrates the usage of the `MediaQuery` property to transform the layout into a stacked view at a user-defined resolution. Here, when the window size reaches 700px or less, the layout automatically switches to a stacked arrangement. \ No newline at end of file diff --git a/blazor/dashboard-layout/setting-size-of-cells.md b/blazor/dashboard-layout/setting-size-of-cells.md index 4f47b4f769..1a3dcd2b6e 100644 --- a/blazor/dashboard-layout/setting-size-of-cells.md +++ b/blazor/dashboard-layout/setting-size-of-cells.md @@ -54,7 +54,7 @@ In the sample above, the width of the parent element is divided into five equal The following output demonstrates the effect of setting [`CellAspectRatio`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_CellAspectRatio) and [`Columns`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_Columns) properties in the Dashboard Layout: -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrUMrBmpWKQAbtE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Cell Size of Blazor Dashboard Layout](images/blazor-dashboard-layout-cell-size.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVxXxVgqlYWAAdQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Cell Size of Blazor Dashboard Layout](images/blazor-dashboard-layout-cell-size.webp)" %} ## Setting Cell Spacing @@ -92,7 +92,7 @@ The spacing between individual panels in both rows and columns can be defined us The following output demonstrates the clear representation of data achieved by setting the `CellSpacing` property in the Dashboard Layout component: -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLKMBhQpMKkevti?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout with Cell Spacing](images/blazor-dashboard-layout-cell-space.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhHNRrKTNqWJgGO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout with Cell Spacing](images/blazor-dashboard-layout-cell-space.webp)" %} ## Graphical Representation of Grid Layout @@ -130,4 +130,4 @@ The underlying grid structure of the Dashboard Layout is initially hidden. This The following output illustrates the visible gridlines, indicating the cell division of the layout, with data containers (panels) placed over these cells: -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVKMhBQzsTMyoHg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout with GridLines](images/blazor-dashboard-layout-gridlines.png)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVRDxLUfXIkXBCM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout with GridLines](images/blazor-dashboard-layout-gridlines.webp)" %} \ No newline at end of file diff --git a/blazor/dashboard-layout/state-persistence.md b/blazor/dashboard-layout/state-persistence.md index 52a0b68328..235d1f8a15 100644 --- a/blazor/dashboard-layout/state-persistence.md +++ b/blazor/dashboard-layout/state-persistence.md @@ -55,7 +55,7 @@ N> The Dashboard Layout component's [`ID`](https://help.syncfusion.com/cr/blazor ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoNuhoTaPLpvwa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLxjRLqprnQbPuC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The following output demonstrates the use of `HeaderTemplate` and `ContentTemplate` to define the header and content of panels: @@ -130,6 +130,6 @@ The Blazor Dashboard Layout component provides built-in methods to manage its st } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVyZkBIfEuZVDNy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLdZdrqfrwvNnKZ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ![Blazor Dashboard Layout.](images/presistence-sample.png) \ No newline at end of file