From 652f9e3e4afeaafbadb84f874bd12dac4a3d7498 Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Tue, 4 Feb 2025 11:06:57 +0200 Subject: [PATCH 1/4] docs(DockManager): add dockmanager documentation --- components/dockmanager/dock-types.md | 145 +++++++++++++++ components/dockmanager/events.md | 239 ++++++++++++++++++++++++ components/dockmanager/overview.md | 256 ++++++++++++++++++++++++++ components/dockmanager/pane-types.md | 157 ++++++++++++++++ components/dockmanager/state.md | 222 ++++++++++++++++++++++ docs-builder.yml | 2 + introduction.md | 1 + src-a11y/configs/dockmanager.aria.yml | 15 ++ 8 files changed, 1037 insertions(+) create mode 100644 components/dockmanager/dock-types.md create mode 100644 components/dockmanager/events.md create mode 100644 components/dockmanager/overview.md create mode 100644 components/dockmanager/pane-types.md create mode 100644 components/dockmanager/state.md create mode 100644 src-a11y/configs/dockmanager.aria.yml diff --git a/components/dockmanager/dock-types.md b/components/dockmanager/dock-types.md new file mode 100644 index 0000000000..bc0efbd73d --- /dev/null +++ b/components/dockmanager/dock-types.md @@ -0,0 +1,145 @@ +--- +title: Dock Types +page_title: DockManager - Dock Types +description: Dock Types in the DockManager for Blazor. +slug: dockmanager-dock-types +tags: telerik,blazor,dockmanager,dock,types +published: true +position: 10 +--- + +# Docking Panes + +The Blazor DockManager component exposes the ability to dock globally or within other panes. + +## Docking Types + +### Global Docking + +When a user drags a pane, a global docking navigator always appears. This allows the user to dock the pane to one of the component's edges, making it a root pane. + +### Inner Docking + +When a user drags a pane and hovers over another pane, a dock navigator for that pane appears. The user can then choose to: + +* Drop the pane on any of the parent pane’s outer edges, splitting it. +* Drop it in the center of the navigator to add it as a tab within the parent pane. + +## Disable Docking over Individual Panes + +To disable docking over a specific pane, set its `Dockable` parameter to `false`. + +>caption DockManager with disabled docking option over some panes. + +`````RAZOR + + + + + + Customer Support + + +
    +
  • Inbox
    • +
  • Open Tickets
    • +
  • Reports
    • +
  • Settings
    • +
+ + + + + + + + + Open Tickets + + +
    +
  • Ticket #1245 - Payment issue
    • +
  • Ticket #1246 - Login failure
    • +
  • Ticket #1247 - Refund request
    • +
+ + + + + + Recent Interactions + + +

John Doe: "I need help with my subscription."

+

Jane Smith: "My order hasn’t arrived yet."

+

Michael Lee: "How do I reset my password?"

+ + + + + + + + + + + + + + Analytics + + +

Overview of ticket resolution time, customer satisfaction, and response rates.

+ + + + + + Team Performance + + +

Live statistics on agent response times and workload distribution.

+ + + + + + + + + System Alerts + + +

New feature rollout scheduled for February 15.

+

Service downtime reported in Europe region.

+

Security update required for agent login system.

+ + + + + + + + + + + + + + Live Chat + + +

Instant messaging with support team members.

+ + + + + + + + + +@code { + private string Message { get; set; } +} +````` \ No newline at end of file diff --git a/components/dockmanager/events.md b/components/dockmanager/events.md new file mode 100644 index 0000000000..364f0f46f6 --- /dev/null +++ b/components/dockmanager/events.md @@ -0,0 +1,239 @@ +--- +title: Events +page_title: DockManager - Events +description: Events in the DockManager for Blazor. +slug: dockmanager-events +tags: telerik,blazor,dockmanager,events +published: true +position: 20 +--- + +# DockManager Events + +This article explains the events available in the Telerik DockManager for Blazor: + +* [OnDock](#ondock) +* [OnUndock](#ondock) +* [OnPaneResize](#onpaneresize) +* [State Events](#state-events) +* [OnPin](#onpin) +* [OnUnpin](#onunpin) + +## OnDock + +The `OnDock` event is fired when any pane is docked. + +The event handler receives as an argument an `DockManagerDockEventArgs` object that contains: + +| Property | Type | Description | +|---|---|---| +| `DockPosition` | `DockManagerDockPosition` | The position where the pane is being docked. The possible options are: `Left`, `Right`, `Top`, `Bottom`, `Middle`. | +| `IsCancelled` | `bool`
(`false`) | Set the `IsCancelled` property to `true` to cancel the event. | +| `PaneId` | `string` | The Id of the floating pane that is being docked. | +| `TargetPaneId` | `string` | The Id of the target pane. | + +## OnUndock + +The `OnUndock` event is fired when any pane is undocked. + +The event handler receives as an argument an `DockManagerUndockEventArgs` object that contains: + +| Property | Type | Description | +|---|---|---| +| `IsCancelled` | `bool`
(`false`) | Set the `IsCancelled` property to `true` to cancel the event. | +| `PaneId` | `string` | The Id of the floating pane that is being undocked. | + +## OnPaneResize + +The `OnPaneResize` event is fired when any pane is resized. It lets you respond to that change if needed - for example, call the `.Refresh()` method of a chart or otherwise repaint a child component in the content. You can also use it to, for example, update the saved [state](slug://dockmanager-state) for your users. + +The event handler receives as an argument an `DockManagerPaneResizeEventArgs` object that contains: + +| Property | Type | Description | +|---|---|---| +| `PaneId` | `string` | The Id of the pane that is being resized. | +| `Size` | `string` | The new size of the resized pane. | + +## State Events + +The DockManager state lets you control through code the aspects of the DockManager the user can control in the UI - such as docking, undocking, resizing panes and etc. The DockManager provides two events related to the state: + +* `OnStateInit` - fires when the DockManager initializes so you can provide a stored version of the grid. + +* `OnStateChanged` - fires when the user performs an action so you can see what area was changed and, if needed, alter the component state. + +Review the [DockManager state](slug://dockmanager-state) article for more details and examples on how the grid state works and what you can do with it. + +## OnPin + +The `OnPin` event is fired when any pane is pinned. + +The event handler receives as an argument an `DockManagerPinEventArgs` object that contains: + +| Property | Type | Description | +|---|---|---| +| `IsCancelled` | `bool`
(`false`) | Set the `IsCancelled` property to `true` to cancel the event. | +| `PaneId` | `string` | The Id of the pane that is being pinned. | + +## OnUnpin + +The `OnUnpin` event is fired when any pane is unpinned. + +The event handler receives as an argument an `DockManagerUnpinEventArgs` object that contains: + +| Property | Type | Description | +|---|---|---| +| `IsCancelled` | `bool`
(`false`) | Set the `IsCancelled` property to `true` to cancel the event. | +| `PaneId` | `string` | The Id of the pane that is being unpinned. | + +## Example + +>caption DockManager with all available events. + +`````RAZOR +The events log is below the component. + + + + + + + + This pane displays task details like description, assignee, and status. + Task 1: Update website UI + + + + + This pane shows which team members are assigned to the tasks. + Team Member: John Doe + + + + + This pane contains the task deadline and the progress bar. + Due Date: 03/20/2025 + + + + + + + This pane allows team members to leave comments and feedback. + Comment: "Looks good, but needs more details." + + + + + This pane shows files attached to the task, such as documents and screenshots. + Attachment: Project_Mockup.pdf + + + + + + + + + + + + + + Live Updates + + + Displays real-time progress updates on the task. + Task 1 - 50% Completed + + + + + + + +
+ @((MarkupString)Log) +
+ +@code { + private string Log { get; set; } + + private void OnPaneDock(DockManagerDockEventArgs args) + { + if (args.TargetPaneId == "taskDetails") + { + args.IsCancelled = true; + Log += $"
Task pane with ID {args.PaneId} was about to dock to task pane with ID {args.TargetPaneId}. The event is cancelled."; + } + else + { + Log += $"
Task pane with ID {args.PaneId} was docked to task pane with ID {args.TargetPaneId}."; + } + } + + private void OnPaneUndock(DockManagerUndockEventArgs args) + { + if (args.PaneId == "assignedTo") + { + args.IsCancelled = true; + Log += $"
Task pane with ID {args.PaneId} was about to undock. The event is cancelled."; + } + else + { + Log += $"
Task pane with ID {args.PaneId} was undocked."; + } + } + + private void OnPanePin(DockManagerPinEventArgs args) + { + if (args.PaneId == "dueDate") + { + args.IsCancelled = true; + Log += $"
Task pane with ID {args.PaneId} was about to pin. The event is cancelled."; + } + else + { + Log += $"
Task pane with ID {args.PaneId} was pinned."; + } + } + + private void OnPaneResize(DockManagerPaneResizeEventArgs args) + { + Log += $"
Task pane with ID {args.PaneId} was resized. The new size is {args.Size}."; + } + + private void OnPaneUnpin(DockManagerUnpinEventArgs args) + { + if (args.PaneId == "comments") + { + args.IsCancelled = true; + Log += $"
Task pane with ID {args.PaneId} was about to unpin. The event is cancelled."; + } + else + { + Log += $"
Task pane with ID {args.PaneId} was unpinned."; + } + } +} +````` + +## Next Steps + +* [Manage the Dock Manager state](slug://dockmanager-state). + + +## See Also + +* [DockManager Overview](slug://dockmanager-overview) \ No newline at end of file diff --git a/components/dockmanager/overview.md b/components/dockmanager/overview.md new file mode 100644 index 0000000000..e8b506ccbf --- /dev/null +++ b/components/dockmanager/overview.md @@ -0,0 +1,256 @@ +--- +title: Overview +page_title: DockManager Overview +description: Overview of the DockManager for Blazor. +slug: dockmanager-overview +tags: telerik,blazor,dockmanager,overview +published: True +position: 0 +--- + +# Blazor DockManager Overview + +The Blazor DockManager component is a versatile tool that enables users to manage and organize multiple panes within a single container. It supports features like docking, undocking, resizing, and repositioning, offering a flexible and customizable layout. + + +## Creating Blazor DockManager + +1. Add the `TelerikDockManager` tag. +2. Use `` to structure the main docked layout. +3. Within , add: + * `` for standalone panes. + * `` to create resizable sections containing multiple panes. + * `` to enable tabbed panes. +4. Define `HeaderTemplate` inside each pane to set the headers text. +5. Populate the `Content` section of each pane with the desired UI elements. +6. Optionally, `` to create panes that can float outside the main dock layout. + +>caption Telerik Blazor DockManager + +````RAZOR + + + + + + Navigation + + +
    +
  • Dashboard
    • +
  • Projects
    • +
  • Teams
    • +
  • Settings
    • +
+ + + + + + + + + Active Tasks + + +
    +
  • Task 1 - In Progress
    • +
  • Task 2 - Pending Review
    • +
  • Task 3 - Completed
    • +
+ + + + + + Recent Activity + + +

User A updated Project X

+

User B commented on Task 3

+

New file uploaded for Task 2

+ + + + + + + + + + + + + + Project Overview + + +

Summary of ongoing projects, completion rate, and deadlines.

+ + + + + + Team Performance + + +

Performance metrics of different teams, including task completion and efficiency.

+ + + + + + + + + Notifications + + +

New messages, mentions, and important updates.

+ + + + + + + + + + + + + + Team Chat + + +

Live conversation with team members.

+ + + + + + + + + +@code { + private string ChatMessage { get; set; } +} +```` + +## State + +The [Dock Manager allows getting and setting its state](slug://dockmanager-state). The DockManager state contains information about the panes hierarchy, a collection of all the floating panes, and all the DockManager configurations, such as its orientation. + +## Dock Types + +The DockManager exposes the ability to dock globally or within other panes. [Read more about the available DockManager dock types...](slug://dockmanager-dock-types) + +## Pane Types + +The DockManager exposes the ability to configure different pane types. [Read more about the DockManager pane types...](slug://dockmanager-pane-types) + +## Events + +The Dock Manager fires [events when the user changes the panes layout](slug://dockmanager-events). This allows custom logic execution, refreshing of nested components and saving the [DockManager state](slug://dockmanager-state) for later restore. + +## DockManager Parameters + +The following table lists the Dock Manager parameters. Also check the [DockManager API Reference](slug://Telerik.Blazor.Components.TelerikTileLayout) for a full list of all properties, methods and events. + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Parameter | Type and Default Value | Description | +| --- | --- | --- | +| `Class` | `string` | The custom CSS class of the `
` element. Use it to [override theme styles](slug://themes-override). | +| `Height` | `string` | The Dock Manager height. If not set, the component will expand automatically to cover the available space. | +| `Orientation` | `DockManagerPaneOrientation` enum
(`Vertical`) | Determines the orientation of the root splitter. | +| `Width` | `string` | The Dock Manager width. If not set, the component will expand horizontally to fill its parent. | + +### DockManagerContentPane Parameters + +| Parameter | Type and Default Value | Description | +| --- | --- | --- | +| `AllowFloat` | `bool`
(`false`) | Determines whether the pane can be dragged from the dock manager layout to create a new floating pane. | +| `AllowInnerDock` | `bool`
(`true`) | Restricts from performing inner docking within the specified pane. Inner docking is an operation that allows dropping one pane over another, creating a TabGroupPane (TabStrip). | +| `Class` | `string` | The custom CSS class of the `
` element. Use it to [override theme styles](slug://themes-override). | +| `Closeable` | `bool`
(`false`) | Determines whether the pane can be closed. | +| `Dockable` | `bool`
(`false`) | Specifies whether the pane allows other panes to be docked to or over it. This determines if the end user can drop other panes over it or next to it, creating a DockManagerSplitPane (Splitter) or a DockManagerTabGroupPane (TabStrip). | +| `HeaderText` | `string` | The pane title, displayed in the pane header and as the button text in the DockManager toolbar when the pane is unpinned. | +| `Id` | `string`
(`Guid`) | The id of the pane. | +| `Maximizable` | `bool`
(`false`) | Determines whether the pane can be maximized. | +| `Size` | `string` | Determines the size of the splitter pane. | +| `Unpinnable` | `bool`
(`false`) | Determines whether the pane can be unpinned. | +| `Unpinned` | `bool`
(`true`) | Determines whether the pane is unpinned. | +| `Visible` | `bool`
(`true`) | Determines whether the tab/pane is rendered. | + +### DockManagerSplitPane Parameters + +| Parameter | Type and Default Value | Description | +| --- | --- | --- | +| `AllowEmpty` | `bool`
(`false`) | Determines whether a splitter pane is shown as empty when a child pane is removed (dragged out, closed, etc.). If set to false, the splitter is re-rendered without the removed child pane. | +| `Class` | `string` | The custom CSS class of the `
` element. Use it to [override theme styles](slug://themes-override). | +| `Id` | `string`
(`Guid`) | The id of the pane. | +| `Orientation` | `DockManagerPaneOrientation` enum
(`Vertical`) | Determines the orientation of the rendered splitter. | +| `Size` | `string` | Determines the size of the splitter pane. | +| `Visible` | `bool`
(`true`) | Determines whether the tab/pane is rendered. | + +#### DockManagerSplitPane Parameters (only when defined as a floating pane) + +| Parameter | Type and Default Value | Description | +| --- | --- | --- | +| `FloatingHeight` | `string` | The height of the rendered window. | +| `FloatingLeft` | `string` | The CSS `left` value of the rendered window, relative to the dock manager element (`k-dockmanager`) | +| `FloatingResizable` | `bool`
(`true`) | Determines whether the rendered window is resizable. | +| `FloatingTop` | `string` | The CSS `top` value of the rendered window, relative to the dock manager element (`k-dockmanager`) | +| `FloatingWidth` | `string` | The width of the rendered window. | + +### DockManagerTabGroupPane Parameters + +| Parameter | Type and Default Value | Description | +| --- | --- | --- | +| `AllowEmpty` | `bool`
(`false`) | Determines whether an empty space is left when all tabs are removed (unpinned, closed, etc.), allowing you to drop content panes and create a new tab. | +| `Id` | `string`
(`Guid`) | The id of the pane. | +| `SelectedPaneId` | `int` | The `id` of the initially selected tab pane. | +| `Size` | `string` | Determines the size of the splitter pane. | +| `Visible` | `bool`
(`true`) | Determines whether the tab/pane is rendered. | + +## DockManager Reference + +Use the component reference to execute methods and [get or set the DockManager state](slug://dockmanager-state). + +| Method | Description | +| --- | --- | +| `GetState` | Returns the current state of the Dock Manager as a [`DockManagerState` object](slug://Telerik.Blazor.Components.DockManagerState). | +| `Refresh` | Use the method to programmatically re-render the component. | +| `SetState` | Applies the provided `DockManagerState` argument as a new state of the Dock Manager. | + +
+ +````RAZOR + + +Get DockManager State + +@code{ + private TelerikDockManager DockRef { get; set; } + + private async Task GetDockManagerState() + { + var dockState = DockRef.GetState(); + } +} +```` + +## Next Steps + +* [DockManager Dock Types](slug://dockmanager-dock-types) +* [DockManager Pane Types](slug://dockmanager-pane-types) +* [DockManager State](slug://dockmanager-state) +* [Explore DockManager Events](slug://dockmanager-events) + + +## See Also + +* [DockManager API](slug://Telerik.Blazor.Components.TelerikFileManager-1) +* [Live Demo: DockManager](https://demos.telerik.com/blazor-ui/dockmanager/overview) diff --git a/components/dockmanager/pane-types.md b/components/dockmanager/pane-types.md new file mode 100644 index 0000000000..ba3ff50858 --- /dev/null +++ b/components/dockmanager/pane-types.md @@ -0,0 +1,157 @@ +--- +title: Pane Types +page_title: DockManager - Pane Types +description: Pane Types in the DockManager for Blazor. +slug: dockmanager-pane-types +tags: telerik,blazor,dockmanager,pane,types +published: true +position: 15 +--- + +# Pane Types + +The Blazor DockManager component exposes the ability to configure different pane types. + +## Panes Nested Tags Settings + +When defining pane types, the naming convention follows the structure ``, where **Type** specifies the behavior of the pane. The available types are: + +#### DockManagerContentPane + +Provides full control over explicitly defining custom content to be rendered for a given pane based on specific requirements. + +* It can be a direct child of all other panes and the `` tag. + +#### DockManagerTabGroupPane + +Groups panes in a tab strip, similar to the [TabStrip component](slug://components/tabstrip/overview). Users can navigate through panes using tabs in the header. + +* It can be a direct child of `` and the `` tag. +* It can only contain `` children. + +#### DockManagerSplitPane + +Organizes panes in a [Splitter-like](slug://splitter-overview) manner, allowing the container pane to be split either horizontally or vertically. + +* It can be a direct child of another `` and the `` tag. +* It can contain ``, ``, and other `` tags as children. +* Only this pane type can be declared as a direct child of the `` tag. + +>caption DockManager with all pane types. + +`````RAZOR + + + + + + Patient Management + + +
    +
  • Patient Records
    • +
  • Appointments
    • +
  • Billing
    • +
  • Medical Reports
    • +
+ + + + + + + + + Patient Overview + + +
    +
  • John Doe - Room 202
    • +
  • Jane Smith - Room 305
    • +
  • Michael Lee - ICU
    • +
+ + + + + + Recent Visits + + +

Dr. Adams checked John Doe - Blood Pressure Monitoring

+

Dr. Brown examined Jane Smith - Flu Symptoms

+

Dr. Carter performed surgery on Michael Lee

+ + + + + + + + + + + + + + Doctor Schedule + + +

Dr. Adams - 10:00 AM - 4 Appointments

+

Dr. Brown - 12:30 PM - Surgery

+

Dr. Carter - 2:00 PM - Follow-up Consultations

+ + + + + + Lab Results + + +

John Doe - Blood Test - Normal

+

Jane Smith - X-ray - No fractures detected

+

Michael Lee - MRI - Awaiting review

+ + + + + + + + + System Alerts + + +

Emergency alert: ICU patient needs immediate attention.

+

Maintenance scheduled for radiology equipment at 5 PM.

+

New health protocol updates available.

+ + + + + + + + + + + + + + Staff Chat + + +

Secure messaging for doctors, nurses, and admin staff.

+ + + + + + + + + +@code { + private string ChatMessage { get; set; } +} +````` \ No newline at end of file diff --git a/components/dockmanager/state.md b/components/dockmanager/state.md new file mode 100644 index 0000000000..cf2866e56a --- /dev/null +++ b/components/dockmanager/state.md @@ -0,0 +1,222 @@ +--- +title: State +page_title: DockManager - State +description: Save, load, change the DockManager for Blazor state - docking, undocking, resizing and so on. +slug: dockmanager-state +tags: telerik,blazor,dockmanager,state,save,load,layout,set,change,management +published: True +position: 5 +--- + +# DockManager State + +The DockManager lets you read, save, load, and change its state through code. The state includes the DockManager features that are controlled by the user, such as the pane resizing, orientation, pinning, docking, and many others. + +This article describes: + +* [The properties of the `DockManagerState` object](#information-in-the-dockmanager-state). +* [How to set initial DockManager configuration programmatically in `OnStateInit`](#onstateinit). +* [How to detect user changes in the DockManager state with `OnStateChanged`](#onstatechanged). +* [How to use DockManager methods to get and set the DockManager state](#methods). + +## Information in the DockManager State + +The `DockManagerState` object exposes a collection of all the floating panes including their [settings](slug://dockmanager-overview#dockmanager-parameters). + +## Events + +The DockManager features two events, which are related to its state. + +* [OnStateInit](#onstateinit) +* [OnStateChanged](#onstatechanged) + +### OnStateInit + +The `OnStateInit` event fires when the DockManager is initializing. Use this event to: + +* Define initial state, for example default initial panes position; +* Load and apply state that was previously saved in a database or in `localStorage`. + +The event argument is of type `DockManagerStateEventArgs` and has a `DockManagerState` property. See [Information in the DockManager State](#information-in-the-dockmanager-state) for details. + +### OnStateChanged + +`OnStateChanged` fires when the user performs an action that changes the value of a [property in the DockManager state](#information-in-the-dockmanager-state). The event argument is of type `DockManagerStateEventArgs` and exposes the component current `DockManagerState`. + +## Methods + +The `GetState` and `SetState` methods of the [DockManager instance](slug://dockmanager-overview#dockmanager-reference) let you get and set the current DockManager state on demand at any time *after* [`OnStateInit`](#onstateinit). + +* `GetState` returns the current DockManager state, so you can save it or [retrieve specific information](#information-in-the-dockmanager-state). For example, you can use `GetState` to get the current panes position. Or, you can get the current panes size. + +* `SetStateAsync` receives an instance of a `DockManagerState` object and applies it to the DockManager. For example, you can have a button that puts the DockManager in a certain configuration programmatically, for example pane positioning, docking, etc. + +If you want to make changes to the current DockManager state: + +1. First, get the current state with the `GetState` method. +2. Apply the desired modifications to the obtained `DockManagerState` object. +3. Set the modified state object via the `SetState` method. + +> Do not use `GetState()` in the [`OnStateInit`](#onstateinit) or [`OnStateChanged`](#onstatechanged) events. Do not use `SetState()` in `OnStateInit`. Instead, get or set the `DockManagerState` property of the event argument. + +>tip To reset the DockManager state to its initial markup configuration, call `SetState(null)`. +> +> To reset the DockManager state to a completely new configuration, create a `new DockManagerState()` and apply the settings there. Then pass the state object to `SetState()`. + +## Example + +The example below shows how to restore the previous state of the DockManager on page refresh. + +>caption Using DockManager State Events and Methods + +`````RAZOR +@using System.Text.Json.Serialization +@using System.Text.Json + +Change something in the DockManager (move, resize, or close panes), then refresh the page. The layout should be restored to its previous state. +Get State +Set State + + + + + + + +
    +
  • Fix login bug
    • +
  • Implement dark mode
    • +
  • Refactor API requests
    • +
+ + + + +

Upcoming Meetings:

+
    +
  • UI Review - Feb 10
    • +
  • Code Freeze - Feb 15
    • +
  • Final Release - Mar 1
    • +
+ + + + +

User A updated Task 1

+

User B commented on Task 2

+

New PR merged for Feature X

+ + + + + + +

New messages from Sarah

+

Server maintenance scheduled for Sunday

+ + + + +

Enable email notifications

+

Change password

+ + + + + + + + + + + +

View project progress reports

+ + + + +

Performance metrics and KPIs

+ + + + +

List of project team members

+ + + + + + + + + + + +

Live chat with team members

+ + + + +

Logs and debugging tools

+ + + + + + + +@code { + [Inject] + private IJSRuntime _jsRuntime { get; set; } + private TelerikDockManager DockManager { get; set; } + private DockManagerState CurrentState { get; set; } + + private void GetDockManagerState() + { + CurrentState = DockManager.GetState(); + } + + private void SetDockManagerState() + { + DockManager.SetState(CurrentState); + } + + public async Task AddItem(string key, string value) + { + await _jsRuntime.InvokeVoidAsync("localStorage.setItem", key, value); + } + + public async Task GetItem(string key) + { + return await _jsRuntime.InvokeAsync("localStorage.getItem", key); + } + + public async Task OnStateInit(DockManagerStateEventArgs args) + { + try + { + var state = await GetItem("DockManagerState"); + if (!string.IsNullOrEmpty(state)) + { + args.DockManagerState = JsonSerializer.Deserialize(state); + } + } + catch (Exception) { } + } + + public async Task OnStateChanged(DockManagerStateEventArgs args) + { + var state = JsonSerializer.Serialize(args.DockManagerState); + await AddItem("DockManagerState", state); + } +} +````` + +## See Also + +* [Live Demo: DockManager State](https://demos.telerik.com/blazor-ui/dockmanager/persist-state) +* [DockManagerState API reference](slug://Telerik.Blazor.Components.DockManagerState-1) +* [Blazor DockManager](slug://dockmanager-overview) \ No newline at end of file diff --git a/docs-builder.yml b/docs-builder.yml index ad0b3148a0..5e6a947af5 100644 --- a/docs-builder.yml +++ b/docs-builder.yml @@ -166,6 +166,8 @@ meta: title: FileManager "*editor": title: Editor + "*dockmanager": + title: Dock Manager "*dropdowntree": title: DropDownTree "*dropzone": diff --git a/introduction.md b/introduction.md index bd8eec326d..8a7f8e882e 100644 --- a/introduction.md +++ b/introduction.md @@ -172,6 +172,7 @@ You can watch a YouTube playlist of getting started tutorials for Blazor (videos + diff --git a/src-a11y/configs/dockmanager.aria.yml b/src-a11y/configs/dockmanager.aria.yml new file mode 100644 index 0000000000..1b0d210629 --- /dev/null +++ b/src-a11y/configs/dockmanager.aria.yml @@ -0,0 +1,15 @@ +title: Wai-Aria Support +component: DockManager +from: /aria/dockmanager_aria.md +dest: ../components/dockmanager/accessibility/wai-aria-support.md +slug: dockmanager-wai-aria-support +position: 50 +after: | + ## Keyboard Navigation + + For details on how the keyboard navigation works in Telerik UI for Blazor, refer to the [Accessibility Overview](slug://accessibility-overview#keyboard-navigation) article. + + ## See Also + + * [Blazor Dock Manager Demos](https://demos.telerik.com/blazor-ui/dockmanager/overview) + * [Accessibility in Telerik UI for Blazor](slug://accessibility-overview) \ No newline at end of file From f9860480f5d9bba6a769bbd81f8de10f46f31307 Mon Sep 17 00:00:00 2001 From: kendo-bot Date: Tue, 4 Feb 2025 09:09:51 +0000 Subject: [PATCH 2/4] docs: update accessibility and keyboard-nav specs --- .../accessibility/wai-aria-support.md | 95 +++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 components/dockmanager/accessibility/wai-aria-support.md diff --git a/components/dockmanager/accessibility/wai-aria-support.md b/components/dockmanager/accessibility/wai-aria-support.md new file mode 100644 index 0000000000..75d22a59e9 --- /dev/null +++ b/components/dockmanager/accessibility/wai-aria-support.md @@ -0,0 +1,95 @@ +--- +title: Wai-Aria Support +page_title: Telerik UI for Blazor DockManager Documentation | DockManager Accessibility +description: "Get started with the Telerik UI for Blazor DockManager and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2." +tags: telerik,blazor,accessibility,wai-aria,wcag +slug: dockmanager-wai-aria-support +position: 50 +--- + +# Blazor DockManager Accessibility + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + + + +Out of the box, the Telerik UI for Blazor DockManager provides extensive accessibility support and enables users with disabilities to acquire complete control over its features. + + +The DockManager is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers. + +## WAI-ARIA + + +This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any. + + +The DockManager component consists of multiple inner panes, each containing tools, tabs, and content that can be resized, rearranged, and interacted with. + +| Selector | Attribute | Usage | +| -------- | --------- | ----- | +| `.k-dock-manager` | `role=application` | Indicates that the DockManager has its own keyboard navigation implemented. | +| | `aria-live=polite` | Defines dynamic content changes within the DockManager container that need to be announced by screen readers. | +| `.k-dock-navigator` | `aria-hidden=true` | The navigator needs to be hidden from the readers as it appears only on drag. | + +### DockManager Toolbar + + +The Toolbar in the DockManager element of the component should implement the specification for the **Toolbar** component. + +[Toolbar accessibility specification]({{Toolbar_a11y_link}}) + +### DockManager TabStrip + + +The TabStrip in the DockManager element of the component should implement the specification for the **TabStrip** component. + +[TabStrip accessibility specification]({{TabStrip_a11y_link}}) + +### DockManager Splitter + + +The Splitter in the DockManager element of the component should implement the specification for the **Splitter** component. + +[Splitter accessibility specification]({{Splitter_a11y_link}}) + +### DockManager Window + + +The Window elements in the DockManager element of the component should implement the specification for the **Window** component. + +[Window accessibility specification]({{Window_a11y_link}}) + +## Section 508 + + +The DockManager is fully compliant with the [Section 508 requirements](http://www.section508.gov/). + +## Testing + + +The DockManager has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers. + +> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center). + +### Screen Readers + + +The DockManager has been tested with the following screen readers and browsers combinations: + +| Environment | Tool | +| ----------- | ---- | +| Firefox | NVDA | +| Chrome | JAWS | +| Microsoft Edge | JAWS | + + + +## Keyboard Navigation + +For details on how the keyboard navigation works in Telerik UI for Blazor, refer to the [Accessibility Overview](slug://accessibility-overview#keyboard-navigation) article. + +## See Also + +* [Blazor Dock Manager Demos](https://demos.telerik.com/blazor-ui/dockmanager/overview) +* [Accessibility in Telerik UI for Blazor](slug://accessibility-overview) \ No newline at end of file From 5007bf9f5735647bcaecbf257b0e71deeecd8aca Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Mon, 10 Feb 2025 14:46:05 +0200 Subject: [PATCH 3/4] chore(DockManager): apply suggestions as per comments --- components/dockmanager/dock-types.md | 145 --------------------- components/dockmanager/docking-types.md | 76 +++++++++++ components/dockmanager/events.md | 164 +++++++++++++++--------- components/dockmanager/overview.md | 124 ++++++------------ components/dockmanager/pane-types.md | 138 ++------------------ components/dockmanager/state.md | 2 +- 6 files changed, 227 insertions(+), 422 deletions(-) delete mode 100644 components/dockmanager/dock-types.md create mode 100644 components/dockmanager/docking-types.md diff --git a/components/dockmanager/dock-types.md b/components/dockmanager/dock-types.md deleted file mode 100644 index bc0efbd73d..0000000000 --- a/components/dockmanager/dock-types.md +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Dock Types -page_title: DockManager - Dock Types -description: Dock Types in the DockManager for Blazor. -slug: dockmanager-dock-types -tags: telerik,blazor,dockmanager,dock,types -published: true -position: 10 ---- - -# Docking Panes - -The Blazor DockManager component exposes the ability to dock globally or within other panes. - -## Docking Types - -### Global Docking - -When a user drags a pane, a global docking navigator always appears. This allows the user to dock the pane to one of the component's edges, making it a root pane. - -### Inner Docking - -When a user drags a pane and hovers over another pane, a dock navigator for that pane appears. The user can then choose to: - -* Drop the pane on any of the parent pane’s outer edges, splitting it. -* Drop it in the center of the navigator to add it as a tab within the parent pane. - -## Disable Docking over Individual Panes - -To disable docking over a specific pane, set its `Dockable` parameter to `false`. - ->caption DockManager with disabled docking option over some panes. - -`````RAZOR - - - - - - Customer Support - - -
    -
  • Inbox
    • -
  • Open Tickets
    • -
  • Reports
    • -
  • Settings
    • -
- - - - - - - - - Open Tickets - - -
    -
  • Ticket #1245 - Payment issue
    • -
  • Ticket #1246 - Login failure
    • -
  • Ticket #1247 - Refund request
    • -
- - - - - - Recent Interactions - - -

John Doe: "I need help with my subscription."

-

Jane Smith: "My order hasn’t arrived yet."

-

Michael Lee: "How do I reset my password?"

- - - - - - - - - - - - - - Analytics - - -

Overview of ticket resolution time, customer satisfaction, and response rates.

- - - - - - Team Performance - - -

Live statistics on agent response times and workload distribution.

- - - - - - - - - System Alerts - - -

New feature rollout scheduled for February 15.

-

Service downtime reported in Europe region.

-

Security update required for agent login system.

- - - - - - - - - - - - - - Live Chat - - -

Instant messaging with support team members.

- - - - - - - - - -@code { - private string Message { get; set; } -} -````` \ No newline at end of file diff --git a/components/dockmanager/docking-types.md b/components/dockmanager/docking-types.md new file mode 100644 index 0000000000..8bd25dbd89 --- /dev/null +++ b/components/dockmanager/docking-types.md @@ -0,0 +1,76 @@ +--- +title: Docking Types +page_title: DockManager - Docking Types +description: Docking Types in the DockManager for Blazor. +slug: dockmanager-dock-types +tags: telerik, blazor, dockmanager, docking +published: true +position: 10 +--- + +# Docking Panes + +The Blazor DockManager component exposes the ability to dock globally or within other panes. + +## Docking Types + +### Global Docking + +When a user drags a pane, a global docking navigator always appears. This allows the user to dock the pane to one of the component's edges, making it a root pane. + +### Inner Docking + +When a user drags a pane and hovers over another pane, a dock navigator for that pane appears. The user can then choose to: + +* Drop the pane on any of the parent pane’s outer edges, splitting it. +* Drop it in the center of the navigator to add it as a tab within the parent pane. + +## Disable Docking over Individual Panes + +To disable docking over a specific pane, set its `Dockable` parameter to `false`. + +>caption DockManager with disabled docking option over some panes. + +`````RAZOR + + + + + + + + + Enable Docking Over Pane 1 + + + + + + Enable Docking Over Pane 2 + + + + + + + + + + + + + + Floating Pane Content + + + + + + + + +@code { + private bool Pane1Dockable { get; set; } = true; + private bool Pane2Dockable { get; set; } = true; +} +````` \ No newline at end of file diff --git a/components/dockmanager/events.md b/components/dockmanager/events.md index 364f0f46f6..1c667dce13 100644 --- a/components/dockmanager/events.md +++ b/components/dockmanager/events.md @@ -14,6 +14,8 @@ This article explains the events available in the Telerik DockManager for Blazor * [OnDock](#ondock) * [OnUndock](#ondock) +* [VisibleChanged](#visiblechanged) +* [SizeChanged](#sizechanged) * [OnPaneResize](#onpaneresize) * [State Events](#state-events) * [OnPin](#onpin) @@ -43,6 +45,14 @@ The event handler receives as an argument an `DockManagerUndockEventArgs` object | `IsCancelled` | `bool`
(`false`) | Set the `IsCancelled` property to `true` to cancel the event. | | `PaneId` | `string` | The Id of the floating pane that is being undocked. | +## VisibleChanged + +The `VisibleChanged` event is fired when the user tries to hide a given pane. You can effectively cancel the event by not propagating the new visibility state to the variable the `Visible` property is bound to. This is the way to cancel the event and keep the pane visible. + +## SizeChanged + +The `SizeChanged` event is triggered when the `Size` parameter of the corresponding pane is changed. + ## OnPaneResize The `OnPaneResize` event is fired when any pane is resized. It lets you respond to that change if needed - for example, call the `.Refresh()` method of a chart or otherwise repaint a child component in the content. You can also use it to, for example, update the saved [state](slug://dockmanager-state) for your users. @@ -91,141 +101,177 @@ The event handler receives as an argument an `DockManagerUnpinEventArgs` object >caption DockManager with all available events. `````RAZOR -The events log is below the component. - - - + + - + + + + Pane 1. Undocking is allowed. Docking over it is cancelled. + + + + - This pane displays task details like description, assignee, and status. - Task 1: Update website UI + Pane 2. Docking over it is allowed. Undocking is cancelled. +
+ + Restore Closed Panes + - + + + + + + + + - This pane shows which team members are assigned to the tasks. - Team Member: John Doe + Pane 3. Unpinning is possible, but pinning is cancelled. - + + - This pane contains the task deadline and the progress bar. - Due Date: 03/20/2025 + Pane 4. Can be closed. Unpinning is cancelled. - - - - - This pane allows team members to leave comments and feedback. - Comment: "Looks good, but needs more details." - - - - - This pane shows files attached to the task, such as documents and screenshots. - Attachment: Project_Mockup.pdf - - - - + - + - + - - - Live Updates - + + - Displays real-time progress updates on the task. - Task 1 - 50% Completed + Floating Pane. Can be closed. + -
- @((MarkupString)Log) +

DockManager Events (latest on top):

+ +
+ @foreach (var item in DockManagetEventLog) + { +
@( (MarkupString)item )
+ }
@code { - private string Log { get; set; } + private TelerikDockManager DockManagerRef { get; set; } + + private bool Pane4Visible { get; set; } = true; + private bool FloatingPaneVisible { get; set; } = true; + + private List DockManagetEventLog { get; set; } = new List(); private void OnPaneDock(DockManagerDockEventArgs args) { - if (args.TargetPaneId == "taskDetails") + if (args.TargetPaneId == "Pane1") { args.IsCancelled = true; - Log += $"
Task pane with ID {args.PaneId} was about to dock to task pane with ID {args.TargetPaneId}. The event is cancelled."; + DockManagetEventLog.Insert(0, $"Pane {args.PaneId} was about to dock to pane {args.TargetPaneId}. Event cancelled."); } else { - Log += $"
Task pane with ID {args.PaneId} was docked to task pane with ID {args.TargetPaneId}."; + DockManagetEventLog.Insert(0, $"Pane {args.PaneId} was docked to pane {args.TargetPaneId}."); } } private void OnPaneUndock(DockManagerUndockEventArgs args) { - if (args.PaneId == "assignedTo") + if (args.PaneId == "Pane2") { args.IsCancelled = true; - Log += $"
Task pane with ID {args.PaneId} was about to undock. The event is cancelled."; + DockManagetEventLog.Insert(0, $"Pane {args.PaneId} was about to undock. Event cancelled."); } else { - Log += $"
Task pane with ID {args.PaneId} was undocked."; + DockManagetEventLog.Insert(0, $"Pane {args.PaneId} was undocked."); } } private void OnPanePin(DockManagerPinEventArgs args) { - if (args.PaneId == "dueDate") + if (args.PaneId == "Pane3") { args.IsCancelled = true; - Log += $"
Task pane with ID {args.PaneId} was about to pin. The event is cancelled."; + DockManagetEventLog.Insert(0, $"Pane {args.PaneId} was about to pin. Event cancelled."); } else { - Log += $"
Task pane with ID {args.PaneId} was pinned."; + DockManagetEventLog.Insert(0, $"Pane {args.PaneId} was pinned."); } } private void OnPaneResize(DockManagerPaneResizeEventArgs args) { - Log += $"
Task pane with ID {args.PaneId} was resized. The new size is {args.Size}."; + DockManagetEventLog.Insert(0, $"Pane {args.PaneId} was resized to {args.Size}."); } private void OnPaneUnpin(DockManagerUnpinEventArgs args) { - if (args.PaneId == "comments") + if (args.PaneId == "Pane4") { args.IsCancelled = true; - Log += $"
Task pane with ID {args.PaneId} was about to unpin. The event is cancelled."; + DockManagetEventLog.Insert(0, $"Pane {args.PaneId} was about to unpin. Event cancelled."); } else { - Log += $"
Task pane with ID {args.PaneId} was unpinned."; + DockManagetEventLog.Insert(0, $"Pane {args.PaneId} was unpinned."); } } + + private void OnPane4VisibleChanged(bool newVisible) + { + Pane4Visible = newVisible; + + DockManagetEventLog.Insert(0, $"Pane Pane4 was closed."); + } + + private void OnFloatingPaneVisibleChanged(bool newVisible) + { + FloatingPaneVisible = newVisible; + + DockManagetEventLog.Insert(0, $"Pane FloatingPane was closed."); + } } ````` diff --git a/components/dockmanager/overview.md b/components/dockmanager/overview.md index e8b506ccbf..2d4fdbe312 100644 --- a/components/dockmanager/overview.md +++ b/components/dockmanager/overview.md @@ -12,6 +12,7 @@ position: 0 The Blazor DockManager component is a versatile tool that enables users to manage and organize multiple panes within a single container. It supports features like docking, undocking, resizing, and repositioning, offering a flexible and customizable layout. +>tip The DockManager is best suited for desktop-like interfaces and applications designed for larger screens, where users can take full advantage of its advanced layout management capabilities. ## Creating Blazor DockManager @@ -19,112 +20,63 @@ The Bla 2. Use `` to structure the main docked layout. 3. Within , add: * `` for standalone panes. - * `` to create resizable sections containing multiple panes. + * `` to create sections with multiple resizable panes. * `` to enable tabbed panes. -4. Define `HeaderTemplate` inside each pane to set the headers text. -5. Populate the `Content` section of each pane with the desired UI elements. +4. Define `HeaderTemplate` tag inside each pane to set the headers text. +5. Populate the `Content` tag section of each pane with the desired UI elements. 6. Optionally, `` to create panes that can float outside the main dock layout. >caption Telerik Blazor DockManager ````RAZOR - + - - - Navigation - - -
    -
  • Dashboard
    • -
  • Projects
    • -
  • Teams
    • -
  • Settings
    • -
- - - - + - - - Active Tasks - + -
    -
  • Task 1 - In Progress
    • -
  • Task 2 - Pending Review
    • -
  • Task 3 - Completed
    • -
+ First Content Pane in Split configuration - - - Recent Activity - + -

User A updated Project X

-

User B commented on Task 3

-

New file uploaded for Task 2

+ Second Content Pane in Split configuration - + - - - - - - Project Overview - - -

Summary of ongoing projects, completion rate, and deadlines.

- - - - - - Team Performance - - -

Performance metrics of different teams, including task completion and efficiency.

- - - - - - - - - Notifications - + + -

New messages, mentions, and important updates.

+ First Tab Content + + + + + + Second Tab Content - + - - - Team Chat - + -

Live conversation with team members.

- + Floating Pane Content @@ -132,17 +84,13 @@ The Bla - -@code { - private string ChatMessage { get; set; } -} ```` ## State -The [Dock Manager allows getting and setting its state](slug://dockmanager-state). The DockManager state contains information about the panes hierarchy, a collection of all the floating panes, and all the DockManager configurations, such as its orientation. +The [Dock Manager allows getting and setting its state](slug://dockmanager-state). The DockManager state contains information about the pane hierarchy, floating panes, current pane settings, and the DockManager configuration, such as its orientation. -## Dock Types +## Docking Types The DockManager exposes the ability to dock globally or within other panes. [Read more about the available DockManager dock types...](slug://dockmanager-dock-types) @@ -156,7 +104,7 @@ The Dock Manager fires [events when the user changes the panes layout](slug://do ## DockManager Parameters -The following table lists the Dock Manager parameters. Also check the [DockManager API Reference](slug://Telerik.Blazor.Components.TelerikTileLayout) for a full list of all properties, methods and events. +The following table lists the Dock Manager parameters. Also check the [DockManager API Reference](slug://Telerik.Blazor.Components.TelerikDockManager) for a full list of all properties, methods and events. @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) @@ -228,29 +176,29 @@ Use the component reference to execute methods and [get or set the DockManager s
````RAZOR - + Get DockManager State @code{ - private TelerikDockManager DockRef { get; set; } + private TelerikDockManager? DockManagerRef { get; set; } - private async Task GetDockManagerState() + private void GetDockManagerState() { - var dockState = DockRef.GetState(); + var dockState = DockManagerRef?.GetState(); } } ```` ## Next Steps -* [DockManager Dock Types](slug://dockmanager-dock-types) -* [DockManager Pane Types](slug://dockmanager-pane-types) -* [DockManager State](slug://dockmanager-state) -* [Explore DockManager Events](slug://dockmanager-events) +* [Explore the DockManager Docking Types](slug://dockmanager-dock-types) +* [Explore the DockManager Pane Types](slug://dockmanager-pane-types) +* [Configure the DockManager State](slug://dockmanager-state) +* [Handle the DockManager Events](slug://dockmanager-events) ## See Also -* [DockManager API](slug://Telerik.Blazor.Components.TelerikFileManager-1) +* [DockManager API](slug://Telerik.Blazor.Components.TelerikDockManager-1) * [Live Demo: DockManager](https://demos.telerik.com/blazor-ui/dockmanager/overview) diff --git a/components/dockmanager/pane-types.md b/components/dockmanager/pane-types.md index ba3ff50858..3db5ffca5b 100644 --- a/components/dockmanager/pane-types.md +++ b/components/dockmanager/pane-types.md @@ -3,155 +3,35 @@ title: Pane Types page_title: DockManager - Pane Types description: Pane Types in the DockManager for Blazor. slug: dockmanager-pane-types -tags: telerik,blazor,dockmanager,pane,types +tags: telerik, blazor, dockmanager, panes published: true -position: 15 +position: 5 --- # Pane Types The Blazor DockManager component exposes the ability to configure different pane types. -## Panes Nested Tags Settings - When defining pane types, the naming convention follows the structure ``, where **Type** specifies the behavior of the pane. The available types are: -#### DockManagerContentPane +#### Content Pane Provides full control over explicitly defining custom content to be rendered for a given pane based on specific requirements. * It can be a direct child of all other panes and the `` tag. +* The `DockManagerContentPane` cannot have child panes. -#### DockManagerTabGroupPane +#### TabGroup Pane Groups panes in a tab strip, similar to the [TabStrip component](slug://components/tabstrip/overview). Users can navigate through panes using tabs in the header. -* It can be a direct child of `` and the `` tag. +* It can be a direct child of ``. * It can only contain `` children. -#### DockManagerSplitPane +#### Split Pane Organizes panes in a [Splitter-like](slug://splitter-overview) manner, allowing the container pane to be split either horizontally or vertically. -* It can be a direct child of another `` and the `` tag. +* It can be a direct child of another ``. * It can contain ``, ``, and other `` tags as children. -* Only this pane type can be declared as a direct child of the `` tag. - ->caption DockManager with all pane types. - -`````RAZOR - - - - - - Patient Management - - -
    -
  • Patient Records
    • -
  • Appointments
    • -
  • Billing
    • -
  • Medical Reports
    • -
- - - - - - - - - Patient Overview - - -
    -
  • John Doe - Room 202
    • -
  • Jane Smith - Room 305
    • -
  • Michael Lee - ICU
    • -
- - - - - - Recent Visits - - -

Dr. Adams checked John Doe - Blood Pressure Monitoring

-

Dr. Brown examined Jane Smith - Flu Symptoms

-

Dr. Carter performed surgery on Michael Lee

- - - - - - - - - - - - - - Doctor Schedule - - -

Dr. Adams - 10:00 AM - 4 Appointments

-

Dr. Brown - 12:30 PM - Surgery

-

Dr. Carter - 2:00 PM - Follow-up Consultations

- - - - - - Lab Results - - -

John Doe - Blood Test - Normal

-

Jane Smith - X-ray - No fractures detected

-

Michael Lee - MRI - Awaiting review

- - - - - - - - - System Alerts - - -

Emergency alert: ICU patient needs immediate attention.

-

Maintenance scheduled for radiology equipment at 5 PM.

-

New health protocol updates available.

- - - - - - - - - - - - - - Staff Chat - - -

Secure messaging for doctors, nurses, and admin staff.

- - - - - - - - - -@code { - private string ChatMessage { get; set; } -} -````` \ No newline at end of file +* Only this pane type can be declared as a direct child of the `` tag. \ No newline at end of file diff --git a/components/dockmanager/state.md b/components/dockmanager/state.md index cf2866e56a..e7d676c175 100644 --- a/components/dockmanager/state.md +++ b/components/dockmanager/state.md @@ -5,7 +5,7 @@ description: Save, load, change the DockManager for Blazor state - docking, undo slug: dockmanager-state tags: telerik,blazor,dockmanager,state,save,load,layout,set,change,management published: True -position: 5 +position: 15 --- # DockManager State From 101676e3e8f78092e6cadc7a4383280826e40adb Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Mon, 10 Feb 2025 15:32:46 +0200 Subject: [PATCH 4/4] chore(DockManager): remove highlighted tip --- components/dockmanager/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/dockmanager/overview.md b/components/dockmanager/overview.md index 2d4fdbe312..9418b87e93 100644 --- a/components/dockmanager/overview.md +++ b/components/dockmanager/overview.md @@ -12,7 +12,7 @@ position: 0 The Blazor DockManager component is a versatile tool that enables users to manage and organize multiple panes within a single container. It supports features like docking, undocking, resizing, and repositioning, offering a flexible and customizable layout. ->tip The DockManager is best suited for desktop-like interfaces and applications designed for larger screens, where users can take full advantage of its advanced layout management capabilities. +The DockManager is best suited for desktop-like interfaces and applications designed for larger screens, where users can take full advantage of its advanced layout management capabilities. ## Creating Blazor DockManager