You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
public List<Orientation> OrientationOptions { get; set; } = new List<Orientation>()
50
+
{
51
+
new Orientation() { Text = "Horizontal", Value = SplitterOrientation.Horizontal },
52
+
new Orientation() { Text = "Vertical", Value = SplitterOrientation.Vertical},
53
+
};
54
+
55
+
public class Orientation
56
+
{
57
+
public string Text { get; set; }
58
+
public SplitterOrientation Value { get; set; }
59
+
}
60
+
61
+
}
62
+
````
63
+
64
+
## Nested Splitters With Different Orientation
65
+
66
+
Sometimes you need to create a more complex layout that includes both horizontal and vertical panes. To do that, you can nest Telerik Splitter components inside the panes of other splitters. When you do that, set the `Class` parameter of the nested splitter to `k-pane-flex`.
67
+
68
+
>caption Nested splitters that create a complex layout with both horizontal and vertical panes
Copy file name to clipboardExpand all lines: components/splitter/overview.md
+55-101
Original file line number
Diff line number
Diff line change
@@ -12,29 +12,19 @@ position: 0
12
12
13
13
The <ahref="https://www.telerik.com/blazor-ui/splitter"target="_blank">Blazor Splitter component</a> 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%}).
14
14
15
-
#### In This Article
15
+
##Creating Splitter for Blazor
16
16
17
+
1. Declare the `<TelerikSplitter>` tag
17
18
18
-
*[Basics](#basics)
19
-
*[Features](#features)
20
-
* [Splitter](#splitter)
21
-
* [Pane](#pane)
22
-
*[Splitter and Pane Size](#splitter-and-pane-size)
23
-
*[Nested Splitters](#nested-splitters)
24
-
25
-
## Basics
26
-
27
-
#### To use a Telerik Splitter for Blazor
28
-
29
-
1. Declare the `<TelerikSplitter>` tag and set its `Width` and `Height` parameters to the desired values.
19
+
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.
30
20
31
21
* 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.
32
22
33
-
1. Inside the `<SplitterPanes>` child tag, add the desired `<SplitterPane>` tags to create the sections of content.
23
+
1. Inside the `<SplitterPanes>` child tag, add the desired [`<SplitterPane>`]({%slug splitter-panes%}) tags to create the sections of content.
34
24
35
25
1. Inside each `<SplitterPane>`, add the desired content - be that HTML or components.
36
26
37
-
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.
27
+
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.
38
28
39
29
>caption Splitter that takes 100% of its container and shows the main features of its panes
40
30
@@ -69,118 +59,82 @@ This example shows how the splitter can fill up the entire container (marked wit
69
59
The main container is the Splitter component and its tag defines the size and layout direction of the individual sections. Each Pane (section) controls its own behaviors such as the ability to change its size and collapse.
95
-
96
-
### Splitter
97
-
98
-
The main tag of the splitter offers the following core features of the component:
99
-
100
-
*`Class` - the CSS class that renders on the main wrapping element of the component.
62
+
## Panes
101
63
102
-
*`Height` - takes a CSS unit that determines how tall the splitter is. See the [Dimensions]({%slug common-features/dimensions%}) article for more details on what units you can use and how dimensions in percent work.
64
+
Т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%})
103
65
104
-
*`Orientation` - whether the content will be split up (how the panes will stack) horizontally or vertically. Takes a member of the `SplitterOrientation` enum and defaults to `Horizontal`.
66
+
## Size
105
67
106
-
*`Width`- takes a CSS unit that determines how wide the splitter is. See the [Dimensions]({%slug common-features/dimensions%}) article for more details on what units you can use and how dimensions in percent work.
68
+
You can control the Splitter size through its `Width` and `Height` parameters. Additioanlly, the component allows you specify the desired size for each pane. [Read about for the Splitter sizing specifics...]({%slug splitter-size%})
107
69
108
-
* Several [events]({%slug splitter-events%}).
70
+
## Orientation
109
71
110
-
### Pane
72
+
The Splitter Panes can be stacked in horizontal or vertical direction. [Read more about how to configure the Splitter orientation...]({%slug splitter-orientation%})
111
73
112
-
Each individual splitter pane (section) offers the following features:
74
+
## State
113
75
114
-
*`ChildContent` - the standard `RenderFragment` for Blazor that lets you define your content directly between the opening and closing tags of the pane.
76
+
The Splitter allows you to save its state and programmatically control it. [Read more about the Splitter State...]({%slug splitter-state%})
115
77
116
-
*`Class` - the CSS class that renders on the top element of the pane. Lets you apply styling such as changing the `overflow` for the content.
78
+
## Events
117
79
118
-
*`Collapsed` - whether the pane will be collapsed (not visible). Defaults to `false`. Supports two-way binding.
80
+
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%})
119
81
120
-
*`Collapsible` - 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. Defaults to `false`.
82
+
## Splitter Parameters
121
83
122
-
*`Max` - the maximum size the pane can have in pixels or percentages. When it is reached, the user cannot expand its size further.
84
+
The Blazor Splitter provides various parameters for its configuration. The following table lists Splitter parameters on component level. Explore the [Splitter Panes]({%slug splitter-panes%}) article for details on the individual Panes configuration.
123
85
124
-
*`Min` - the minimum size the pane can have in pixels or percentages. When it is reached, the user cannot reduce its size further.
86
+
Check the [Splitter API Reference ](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikSplitter) for a full list of properties, methods and events.
125
87
126
-
*`Resizable` - 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. Defaults to `true`.
*`Size` - the size the pane in pixels or percentages. Must be between `Min` and `Max`. Supports two-way binding.
90
+
| Attribute | Type and Default Value | Description |
91
+
|----------|----------|----------|
92
+
| `Class` | `string` | The CSS class that renders on the main wrapping element of the component.
93
+
| `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.
94
+
| `Orientation` | `SplitterOrientation` enum <br/> (`SplitterOrientation.Horizontal`) | Whether the content will be split up (how the panes will stack) horizontally or vertically.
95
+
| `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.
129
96
130
-
## Splitter and Pane Size
97
+
## Splitter Reference and Methods
131
98
132
-
The splitter respects the dimensions you set to its `Width` and `Height` parameters, and distributes the available space according to the `Size` set to individual panes inside.
99
+
Add a reference to the component instance to use the [Splitter methods](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikSplitter#methods).
133
100
134
-
If you set the `Width` and `Height` in percent, make sure that the parent element provides the desires dimensions and layout first.
The individual panes use the <ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis"target="_blank">CSS flex-basis</a> 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.
137
-
138
-
If the `Size` of a pane is set to a value larger than the `Max`, the pane cannot be resized even if its `Resizable` parameter is set to `true`.
139
-
140
-
>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.
141
-
142
-
>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: <ahref="https://github.com/telerik/blazor-ui/tree/master/splitter/use-100-percent-viewport"target="_blank">How to make Splitter take 100% height of the viewport</a>.
143
-
144
-
145
-
## Nested Splitters
146
-
147
-
Sometimes you need to create a more complex layout that includes both horizontal and vertical panes. To do that, you can nest Telerik Splitter components inside the panes of other splitters. When you do that, set the `Class` parameter of the nested splitter to `k-pane-flex`.
148
-
149
-
>caption Nested splitters that create a complex layout with both horizontal and vertical panes
103
+
| Method | Description |
104
+
| --- | --- |
105
+
| `GetState` | Gets the current [state]({%slug splitter-state%}) of the Splitter.
106
+
| `SetState` | Sets the current [state]({%slug splitter-state%}) of the Splitter.
description: Overview of the Splitter Panes - size, orientation, collapsing, resizing of panes, state and events.
5
+
slug: splitter-panes
6
+
tags: telerik,blazor,splitter,panes
7
+
published: True
8
+
position: 3
9
+
---
10
+
11
+
# Splitter Panes
12
+
13
+
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 `<SplitterPane>` instance inside the `<SplitterPanes>` child tag of the Splitter for each Pane you want to include in the component.
14
+
15
+
Each Splitter Pane (section) is individually configured and offers the following features:
| Attribute | Type and Default Value | Description |
20
+
|----------|----------|----------|
21
+
| `ChildContent` | `RenderFragment` | The standard `RenderFragment` for Blazor that lets you define your content directly between the opening and closing tags of the pane.
22
+
| `Class` | `string` | The CSS class that renders on the `<div class="k-pane">` element of the pane. Lets you apply styling such as changing the `overflow` for the content.
23
+
| `Collapsed` | `bool` | Whether the pane will be collapsed (not visible). Supports two-way binding.
24
+
| `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.
25
+
| `Max` | `string` | The maximum size the pane can have in pixels or percentages. When it is reached, the user cannot expand its size further.
26
+
| `Min` | `string` | The minimum size the pane can have in pixels or percentages. When it is reached, the user cannot reduce its size further.
27
+
| `Resizable` | `bool` <br/> (`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.
28
+
| `Size` | `string` | The size the pane in pixels or percentages. Must be between `Min` and `Max`. Supports two-way binding.
0 commit comments