diff --git a/common-features/dimensions.md b/common-features/dimensions.md index 4709439ed..19d93b92d 100644 --- a/common-features/dimensions.md +++ b/common-features/dimensions.md @@ -10,19 +10,27 @@ position: 7 # Dimensions -This article explains how dimensional properties like `Width` and `Height`, `Top` and `Left` work in the Telerik UI for Blazor suite to set size and position. +This article explains how dimensional properties like `Width`, `Height`, `Top` and `Left` work in Telerik UI for Blazor to set size and position. -Properties that denote **dimensions and positions are** simple **string properties** that are not parsed by our code. You can provide **valid CSS values** to them. For example, `100px` or `50%` are valid options. This provides you with flexibility without limiting options. At the time of writing there is no `Unit` type in the underlying framework. +## Basics -The string you provide is usually rendered within an inline `style` attribute, so you must make sure to provide a valid value that will not break other options. You do not need to include a semicolon (`;`). +Component parameters for dimensions and positions are usually `string` properties that are not parsed the Telerik components. You can set any [valid CSS unit](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units). For example, `100px`, `50%`, or `80vw` are all valid options. At the time of writing there is no `Unit` type in the underlying framework. -For elements with **special positioning** (`Top` and `Left` properties), keep in mind that if the parent elements have special CSS positioning, it will affect the position of the component. If you experience issues, inspect the rendered HTML to see what elements are present and what their CSS rules are. +The string you provide is usually rendered as an inline `style` attribute, so you must provide a valid value that will not break other options. You do not need to include a semicolon (`;`) in the parameter value. -When setting **percentage values** (such as `100%` or `50%`), keep in mind the following - according to the web standards, elements which have their height set in percentage require that the height of their parent is also explicitly set. This requirement applies recursively until either an element with a pixel height or the html element is reached. Elements that are 100% high should not have margins, paddings, borders, or sibling elements. +## Percentages -When setting **percentage dimensions** to elements with **special positioning** (such as `Width` of a Window or the popup `Width` of a dropdown), their parent element in the DOM determines the rendered size. +When setting percentage values like `100%` or `50%`, keep in mind the following: web standards require elements with percentage heights to have a parent with an explicit height. This requirement applies recursively until either an element with a pixel height or the `html` element is reached. ->tip You can use dimensions in percent (such as `Width="100%"`) to make the components responsive - so they will fit in your layout and let the layout adjust with viewport sizes or other application logic. +Elements that are 100% high should not have margins, paddings, borders, or sibling elements, unless you set a [`box-sizing:border-box`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) CSS style to them. + +When setting percentage dimensions to elements with special positioning (such as `Width` of a Window or the popup `Width` of a DropDownList), their parent element in the DOM determines the resulting component dimensions. + +## Position + +When using positioning parameters, for example `Top` or `Left`, the component placement may be affected by CSS styles on the component's parent. If you experience issues, [inspect the rendered HTML to see what elements are present and what their CSS styles are]({%slug themes-override%}#tools). + +>tip You can set dimensions in percentage (such as `Width="100%"`) to make the components responsive and let them resize according to the app layout and browser viewport. A lot of components expand to 100% width by default, for example, the Grid, Form, Scheduler, Spreadsheet, all input components, and others. ## Examples @@ -42,7 +50,6 @@ The examples here showcase different units and examples of using them to set dim ![Blazor Basic Width Settings](images/basic-width-settings.png) - >caption Using auto width to have an element adjust to its contents ````CSHTML @@ -69,7 +76,6 @@ The examples here showcase different units and examples of using them to set dim ![Blazor Auto Size For Dropdown](images/auto-size-for-dropdown.png) - >caption Position is controlled by the parent element with special positioning ````CSHTML @@ -85,6 +91,9 @@ The examples here showcase different units and examples of using them to set dim ```` - ![Blazor Parent Element Offset](images/parent-element-offset.png) +## See Also + +* [Themes]({%slug themes-built-in%}) +* [Override Theme Styles]({%slug themes-override%}) diff --git a/components/splitter/images/nested-splitter-result.png b/components/splitter/images/nested-splitter-result.png deleted file mode 100644 index 63d4f545e..000000000 Binary files a/components/splitter/images/nested-splitter-result.png and /dev/null differ diff --git a/components/splitter/images/splitter-overview.gif b/components/splitter/images/splitter-overview.gif deleted file mode 100644 index f3ab241f0..000000000 Binary files a/components/splitter/images/splitter-overview.gif and /dev/null differ diff --git a/components/splitter/orientation.md b/components/splitter/orientation.md index cfcc59a37..ea86446a9 100644 --- a/components/splitter/orientation.md +++ b/components/splitter/orientation.md @@ -97,10 +97,11 @@ Sometimes you need to create a more complex layout that includes both horizontal ```` ->caption The result from the code snippet above +## Next Steps -![Nested splitters can create complex layout](images/nested-splitter-result.png) +* [Manage the Splitter state]({%slug splitter-state%}) +* [Handle Splitter events]({%slug splitter-events%}) ## See Also - * [Live Demo: Splitter Orientation](https://demos.telerik.com/blazor-ui/splitter/orientation) +* [Live Demo: Splitter Orientation](https://demos.telerik.com/blazor-ui/splitter/orientation) diff --git a/components/splitter/overview.md b/components/splitter/overview.md index 079b60253..194e348de 100644 --- a/components/splitter/overview.md +++ b/components/splitter/overview.md @@ -12,72 +12,55 @@ position: 0 The Blazor Splitter component lets you divide a portion of the page into several pieces that the user can resize and collapse. This provides real estate management for the app and the end user so they can focus on the content that is important in their current task. You can also [save and load its state]({%slug splitter-state%}), and respond to [events]({%slug splitter-events%}). -## Creating Splitter for Blazor +## Creating Blazor Splitter -1. Declare the `` tag +1. Add the `` tag. +1. Set the `Width` and `Height` parameters in any valid CSS unit. See [Splitter Parameters](#splitter-parameters) for more information about the component behavior when dimensions are not set. +1. Inside the `` child tag, add the desired `` tags to create sections of content. +1. Inside each ``, add the desired content as HTML markup or other components. +1. Configure the panes. For example, [set their `Size`, `Min`, `Max`, `Collapsible`, and `Resizable` parameters]({%slug splitter-panes%}#pane-parameters). By default, Splitter panes are resizable, but not collapsible. -1. Optionally, set the `Width` and `Height` parameters to the desired values. Otherwise, the component size will be controlled by the content and [size]({%slug splitter-size%}) of the panes. +>caption Basic Splitter - * You can use values in percent (setting them to `100%` is very common) so that the splitter will take up the entire size of its container. See the [Dimensions]({%slug common-features/dimensions%}) article for more details on what units you can use and how dimensions in percent work. - -1. Inside the `` child tag, add the desired [``]({%slug splitter-panes%}) tags to create the sections of content. +````CSHTML + + -1. Inside each ``, add the desired content - be that HTML or components. + + Left pane. Users can collapse it or resize it between 50px and 150px. + -1. Optionally, set the desired settings for the individual Panes - such as initial, min and max size, whether the user can collapse and resize the pane. + + Middle pane, which cannot be collapsed. + ->caption Splitter that takes 100% of its container and shows the main features of its panes + + Right pane that is 100px wide and initially collapsed. Users cannot resize it. + -````CSHTML -This example shows how the splitter can fill up the entire container (marked with a red border) and the main features of the component and its panes. - -
- - - - - -
left sidebar. Can be collapsed and can be resized between 50px and 150px.
- - - -
right hand side pane - content. You cannot collapse this pane so it is always visible.
- - - -
Third pane that is initially collapsed and is not resizable.
- - - - - -
+ + ```` ->caption Splitter functionality in action - -![overview of the splitter functionality](images/splitter-overview.gif) - +>tip The following sample app shows how to create a 100%-high page layout with a Splitter that includes a header, footer, and sidebar: How to make the Splitter take up 100% of the viewport. ## Panes -Тhe Panes are the building blocks of the Splitter. Each Pane controls its own behaviors such as the ability to change its size and collapse. [Read more about the Splitter Panes...]({%slug splitter-panes%}) - -## Size - -You can control the Splitter size through its `Width` and `Height` parameters. Additionally, the component allows you specify the desired size for each pane. [Read about for the Splitter sizing specifics...]({%slug splitter-size%}) +Тhe Panes are the building blocks of the Splitter. Each pane controls its own behaviors such as the ability to change its size and collapse. [Read more about the Splitter Panes...]({%slug splitter-panes%}) ## Orientation -The Splitter Panes can be stacked in horizontal or vertical direction. [Read more about how to configure the Splitter orientation...]({%slug splitter-orientation%}) +The Splitter panes can stack horizontally or vertically. [Read more about how to configure the Splitter orientation...]({%slug splitter-orientation%}) ## State -The Splitter allows you to save its state and programmatically control it. [Read more about the Splitter State...]({%slug splitter-state%}) +The Splitter allows you to save its state and programmatically control it. [Read more about the Splitter state...]({%slug splitter-state%}) ## Events -The Splitter generates events that you can handle to further customize the component behavior and respond to the user actions. [Read more about the Blazor Menu events...]({%slug splitter-events%}) +The Splitter fires events that you can handle to further customize the component behavior and respond to the user actions. [Read more about the Blazor Splitter events...]({%slug splitter-events%}) ## Splitter Parameters @@ -87,12 +70,13 @@ Check the [Splitter API Reference ](/blazor-ui/api/Telerik.Blazor.Components.Tel @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) -| Attribute | Type and Default Value | Description | -|----------|----------|----------| -| `Class` | `string` | The CSS class that renders on the main wrapping element of the component. -| `Height` | `string` | The height of the Splitter. See the [Dimensions]({%slug common-features/dimensions%}) article for more details on what units you can use and how dimensions in percent work. -| `Orientation` | `SplitterOrientation` enum
(`SplitterOrientation.Horizontal`) | Whether the content will be split up (how the panes will stack) horizontally or vertically. -| `Width`| `string` | The width of the Splitter. See the [Dimensions]({%slug common-features/dimensions%}) article for more details on what units you can use and how dimensions in percent work. +| Parameter | Type | Description | +| --- | --- | --- | +| `AriaLabel` | `string` | The `aria-label` attribute of the splitbars elements (`
`). | +| `Class` | `string` | The CSS class that renders on the Splitter element (`
`). | +| `Height` | `string` | The height style of the Splitter. See the [Dimensions]({%slug common-features/dimensions%}) article for details on what units you can use and how percentage dimensions work. If not set, the Splitter will shrink and expand, according to the [pane sizes]({%slug splitter-panes%}#pane-size) and content. | +| `Orientation` | `SplitterOrientation` enum
(`SplitterOrientation.Horizontal`) | Whether the content will be split up (how the panes will stack) horizontally or vertically. | +| `Width`| `string` | The width style of the Splitter in any [valid CSS unit]({%slug common-features/dimensions%}). If not set, the Splitter will expand horizontally to 100%. | ## Splitter Reference and Methods @@ -107,7 +91,6 @@ Add a reference to the component instance to use the [Splitter methods](/blazor- Get Splitter State @@ -120,22 +103,24 @@ Add a reference to the component instance to use the [Splitter methods](/blazor- @code { - Telerik.Blazor.Components.TelerikSplitter SplitterRef { get; set; } + private TelerikSplitter? SplitterRef { get; set; } - void GetSplitterState() + private void GetSplitterState() { - var currState = SplitterRef.GetState(); + var splitterState = SplitterRef?.GetState(); } } ```` ## Next Steps -* [Explore the various Splitter Pane options]({%slug splitter-panes%}) -* [Configure the Splitter Size]({%slug splitter-size%}) +* [Explore the Splitter pane settings]({%slug splitter-panes%}) +* [Set the Splitter orientation]({%slug splitter-orientation%}) +* [Manage the Splitter state]({%slug splitter-state%}) +* [Handle Splitter events]({%slug splitter-events%}) ## See Also - * [Live Demo: Splitter](https://demos.telerik.com/blazor-ui/splitter/overview) - * [Splitter API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikSplitter) - * [SplitterPane API Reference](/blazor-ui/api/Telerik.Blazor.Components.SplitterPane) +* [Live Demo: Splitter](https://demos.telerik.com/blazor-ui/splitter/overview) +* [Splitter API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikSplitter) +* [SplitterPane API Reference](/blazor-ui/api/Telerik.Blazor.Components.SplitterPane) diff --git a/components/splitter/panes.md b/components/splitter/panes.md index e9f281d7f..6561aa8c7 100644 --- a/components/splitter/panes.md +++ b/components/splitter/panes.md @@ -6,59 +6,301 @@ slug: splitter-panes tags: telerik,blazor,splitter,panes published: True position: 3 +previous_url: /components/splitter/size --- # Splitter Panes -The Splitter consists of individual sections called Panes. The Splitter Panes allow you to add any desired content - be that simple text, other components or HTML elements. Declare a `` instance inside the `` child tag of the Splitter for each Pane you want to include in the component. +Panes are containers that serve as the building blocks of the Splitter. The panes allow you to add any content, for example, text, HTML markup, or other components. Declare a `` instance inside the `` child tag of the Splitter for each pane you want to include in the component. -Each Splitter Pane (section) is individually configured and offers the following features: +## Pane Parameters + +Each Splitter pane is configured individually and offers the following parameters: @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) -| Attribute | Type and Default Value | Description | -|----------|----------|----------| -| `ChildContent` | `RenderFragment` | The standard `RenderFragment` for Blazor that lets you define your content directly between the opening and closing tags of the pane. -| `Class` | `string` | The CSS class that renders on the `
` element of the pane. Lets you apply styling such as changing the `overflow` for the content. -| `Collapsed` | `bool` | Whether the pane content will be collapsed (not visible). Supports two-way binding. -| `Collapsible` | `bool` | Whether the user can collapse (hide) the pane to provide more room for other panes. When enabled, the adjacent splitbar (the drag handle between the panes) will offer a collapse button for the pane. -| `Max` | `string` | The maximum size the pane can have in pixels or percentages. When it is reached, the user cannot expand its size further. -| `Min` | `string` | The minimum size the pane can have in pixels or percentages. When it is reached, the user cannot reduce its size further. -| `Resizable` | `bool`
(`true`) | Whether the user can resize the pane by dragging the resize handle (splitbar) between two panes. Resizing means that the adjacent pane will take up the difference in size. -| `Size` | `string` | The size the pane in pixels or percentages. Must be between `Min` and `Max`. Supports two-way binding. -| `Visible` | `bool` | Controls the visibility of the pane. When toggled at runtime, the pane's order remains unchanged, unlike adding a pane with a conditional statement, which appends it to the end. This is different from the `Collapsed` parameter, which manages content visibility and keeps action buttons (expand, collapse, resize) always visible. +| Attribute | Type and Default Value | Description | +| --- | --- | --- | +| `Class` | `string` | The custom CSS class that renders on the pane element (`
`). Use it to [apply custom styling]({%slug themes-override%}) or [enable scrolling](#pane-scrolling). | +| `Collapsed` | `bool` | Defines if the pane content renders or not. Supports two-way binding. Collapsed panes still show their splitbar and available actions, for example, expand icon or resize handle. Compare with the `Visible` parameter. | +| `Collapsible` | `bool` | Whether the user can collapse (hide) the pane to provide more room for other panes. When enabled, the adjacent splitbar (the drag handle between the panes) will offer a collapse button for the pane. | +| `Max` | `string` | The maximum size the pane can have in pixels or percentages. When it is reached, the user cannot expand its size further. | +| `Min` | `string` | The minimum size the pane can have in pixels or percentages. When it is reached, the user cannot reduce its size further. | +| `Resizable` | `bool`
(`true`) | Whether users can resize the pane with a resize handle (splitbar) or the keyboard. Pane resizing always affects two panes. To enable resizing for a specific pane, at least one adjacent pane must be resizable too. | +| `Size` | `string` | The pane `width` CSS style in [horizontal Splitters]({%slug splitter-orientation%}), or the pane `height` in [vertical Splitters]({%slug splitter-orientation%}). Supports two-way binding. The `Size` must be between the `Min` and `Max` values. See [Pane Size](#pane-size) below for more details on pane dimensions and behavior. | +| `Visible` | `bool` | Defines if the pane element and splitbar render or not. When toggled at runtime, the pane's index remains unchanged, unlike when adding a pane with a conditional statement, which appends it at the end. Compare with the `Collapsed` parameter. | -````CSHTML -@*Configure the Splitter Panes*@ +>caption Configure Splitter Panes - +````CSHTML + - +

Left Pane

-
Collapsible pane with initial size in px that can be resized between 100px and 200px.
+
Collapsible and scrollable pane with initial size in px. It can be resized between 100px and 300px.
 - +

Middle Pane

-
Collapsible pane with initial size in percent.
+
Collapsible pane with initial size in percentage.
 - +

Right Pane

- Non-collapsible pane. No size set, it will take the remaining space of the component. +
Non-collapsible and scrollable pane with no size. It will take up the remaining space in the component.
 - -

Not Visible Pane

- This pane is not displayed. + +

Invisible Pane

+ This pane will not render. - + + +@code { + private string PaneSize1 { get; set; } = "200px"; + + private string PaneSize2 { get; set; } = "20%"; +} ```` +## Pane Scrolling + +To make a Splitter pane scrollable without using additional HTML markup or custom CSS styles, set the pane `Class` parameter to `k-scrollable`. See the example above. + +## Pane Dimensions + +The dimensions of a Splitter pane depend on: + +* The [pane `Size`](#pane-size) parameter +* The [pane `Collapsible` and `Resizable`](#pane-collapsibility-and-resizability) parameters +* The [Splitter `Width`, `Height`, and `Orientation`](#splitter-width-and-height) parameters + +The sections below provide more details and a [hands-on example](#example). + +### Pane Size + +The Splitter pane `Size` controls the pane width or height, depending on the [Splitter `Orientation`]({%slug splitter-orientation%}). + +There must be at least one `SplitterPane` without a `Size`. This pane will adjust automatically to occupy the remaining space, based on the other pane sizes. + +If the pane `Size` is greater than `Max`, the pane cannot be resized even if its `Resizable` parameter is set to `true`. + +### Pane Collapsibility and Resizability + +Collapsibility and resizability have the following impact on the Splitter pane dimensions: + +* Panes that are collapsible or resizable are called *flex panes*. When a flex pane has no `Size`, it expands to fill the available space. If multiple flex panes have no `Size`, they take up equal parts of the available space. +* Panes that are not collapsible and not resizable are called *static panes*. When a static pane has no `Size`, it expands and shrinks based on its content. + +### Splitter Width and Height + +In a [vertical Splitter]({%slug splitter-orientation%}), the pane widths match the Splitter `Width`. + +Here is how the Splitter `Height` affects the pane heights: + +* If a [horizontal Splitter]({%slug splitter-orientation%}) has no `Height`, then its panes do not expand vertically to fill up the Splitter element. The [example](#example) below shows how to work around this with a `height:auto` style on the `.k-pane` class. +* If a vertical Splitter has no `Height`, then all its panes ignore their `Size`. The panes expand or shrink, depending on their content. There is no pane scrolling. +* If a vertical Splitter has a `Height`, then: + * All panes obey their set `Size`. + * Static panes with no `Size` expand to match the Splitter `Height`, leading to content overflow. + * Flex panes with no `Size` shrink to zero height, but only if there is a static pane with no `Size`. + +See [Splitter Parameters]({%slug splitter-overview%}#splitter-parameters) for more information about the component `Width` and `Height`. + +### Example + +The example below demonstrates: + +* How the splitbars between the panes look like, depending on the panes' collapsibility and resizability. +* How panes with and without a `Size` behave when they are [static or flex](#pane-collapsibility-and-resizability). +* How the Splitter `Height` affects the height of static and flex panes. + +>caption Behavior and dimensions of flex and static Splitter panes + +````CSHTML +Splitter Orientation: + + + +
+ + +
+
+ + + + +

First pane

+
    +
  • + Size: +
    • +
    • +
    • +
  • @( !FirstPaneCollapsible && !FirstPaneResizable ? "Static" : "Flex" ) pane
    • +
+ +

Random content...

+

Random content...

+

Random content...

+ + +

Middle pane

+
    +
  • Size: @( string.IsNullOrEmpty(MiddlePaneSizе) ? "N/A" : MiddlePaneSizе )
    • +
    • +
    • +
  • @( !MiddlePaneCollapsible && !MiddlePaneResizable ? "Static" : "Flex" ) pane
    • +
+ + +

Last pane

+
    +
  • + Size: +
    • +
    • +
    • +
  • @( !LastPaneCollapsible && !LastPaneResizable ? "Static" : "Flex" ) pane
    • +
+

Random content...

+ + + + + + +@code { + private List SplitterOrientations { get; set; } = new List() { + SplitterOrientation.Horizontal, + SplitterOrientation.Vertical + }; + private SplitterOrientation SplitterOrientation { get; set; } = SplitterOrientation.Horizontal; + + private bool ShouldSetSplitterHeight { get; set; } = true; + private string SplitterHeight => ShouldSetSplitterHeight ? "60vh" : string.Empty; + + private bool ShouldExpandPanesVertically { get; set; } + + private bool FirstPaneCollapsible { get; set; } + private bool FirstPaneResizable { get; set; } + private string FirstPaneSize { get; set; } = string.Empty; + private int? FirstPaneSizeNumber { get; set; } = 30; + + private bool MiddlePaneCollapsible { get; set; } + private bool MiddlePaneResizable { get; set; } = true; + private string MiddlePaneSizе { get; set; } = string.Empty; + + private bool LastPaneCollapsible { get; set; } = true; + private bool LastPaneResizable { get; set; } = true; + private string LastPaneSize { get; set; } = string.Empty; + private int? LastPaneSizeNumber { get; set; } = 20; + + private void FirstPaneSizeNumberChanged(int? newValue) + { + FirstPaneSizeNumber = newValue; + + if (FirstPaneSizeNumber.HasValue) + { + FirstPaneSize = $"{FirstPaneSizeNumber}%"; + } + else + { + FirstPaneSize = string.Empty; + } + } + + private void LastPaneSizeNumberChanged(int? newValue) + { + LastPaneSizeNumber = newValue; + + if (LastPaneSizeNumber.HasValue) + { + LastPaneSize = $"{LastPaneSizeNumber}%"; + } + else + { + LastPaneSize = string.Empty; + } + } + + private void FirstPaneSizeChanged(string newValue) + { + newValue = newValue.Replace("%", "").Replace("px", ""); + FirstPaneSizeNumberChanged(Convert.ToInt32(Math.Round(Convert.ToDecimal(newValue)))); + } + + private void LastPaneSizeChanged(string newValue) + { + newValue = newValue.Replace("%", "").Replace("px", ""); + LastPaneSizeNumberChanged(Convert.ToInt32(Math.Round(Convert.ToDecimal(newValue)))); + } + + protected override void OnInitialized() + { + FirstPaneSizeNumberChanged(FirstPaneSizeNumber); + LastPaneSizeNumberChanged(LastPaneSizeNumber); + + base.OnInitialized(); + } +} +```` + +## Next Steps + +* [Set the Splitter orientation]({%slug splitter-orientation%}) +* [Manage the Splitter state]({%slug splitter-state%}) +* [Handle Splitter events]({%slug splitter-events%}) + ## See Also - * [Live Demo: Splitter](https://demos.telerik.com/blazor-ui/splitter/overview) - * [Splitter and Panes Size]({%slug splitter-size%}) \ No newline at end of file +* [Live Demo: Splitter](https://demos.telerik.com/blazor-ui/splitter/overview) diff --git a/components/splitter/size.md b/components/splitter/size.md deleted file mode 100644 index 0c6881fc6..000000000 --- a/components/splitter/size.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Size -page_title: Splitter and Panes Size -description: Splitter and Panes Size -slug: splitter-size -tags: telerik,blazor,splitter,panes,size -published: True -position: 6 ---- - -# Splitter and Pane Size - -The Splitter respects the dimensions you set to its `Width` and `Height` parameters, and distributes the available space according to the `Size` of the individual panes. - -If you set the `Width` and `Height` in percent, make sure that the parent element provides the desired dimensions and layout first. - -The individual panes use CSS flex-basis to set their dimensions and by default they have `flex: 1 1 auto` so they distribute the space evenly if there are no other settings. - -If the `Size` of a pane is set to a larger value than `Max`, the pane cannot be resized even if its `Resizable` parameter is set to `true`. - ->tip You must leave at least one `SplitterPane` *without* a set `Size`. This pane will absorb size changes from other panes when the user resizes them and provides you with some flexibility when defining strict sizes for the other panes so that you don't have to keep track of all the pane sizes, their sum and the container size. - ->tip You can find a sample of creating a 100% height layout with a splitter that also offers a header, footer and sidebar in the following sample project: How to make Splitter take 100% height of the viewport. - -````CSHTML -@*Configure the Splitter size*@ - - - - -

Left Pane

-
Collapsible pane with initial size in px.
- - -

Middle Pane

-
Collapsible pane with initial size in percent.
- - -

Right Pane

- No size set, this pane will take the remaining space of the Splitter. - - - -```` - -## See Also - - * [Live Demo: Splitter](https://demos.telerik.com/blazor-ui/splitter/overview) \ No newline at end of file diff --git a/components/splitter/state.md b/components/splitter/state.md index 2ad1b45d4..4604b826d 100644 --- a/components/splitter/state.md +++ b/components/splitter/state.md @@ -136,7 +136,11 @@ public class LocalStorage >tip You can use the [Splitter events]({%slug splitter-events%}) to save the component state and restore it on page reload. Learn more at [Save and Load the Splitter State]({%slug splitter-kb-save-and-load-state%}). +## Next Steps + +* [Handle Splitter events]({%slug splitter-events%}) + ## See Also -* [Splitter Overview]({%slug splitter-overview%}) -* [Splitter Events]({%slug splitter-events%}) +* [Splitter Panes]({%slug splitter-panes%}) +* [Live Demo: Splitter](https://demos.telerik.com/blazor-ui/splitter/overview)