# Splitter
**Also known as:** SplitPane, Resizable
## Description
The BitSplitter divides a container into two panels, side by side or stacked, with a gutter between them that the reader drags to give one panel more room and the other less. Each panel can declare a starting size and the minimum and maximum it is allowed to reach, the split is held as a percentage that survives the container being resized and can be bound, and the first panel can be folded away and brought back - by a control on the gutter, by the keyboard, by a drag that snaps it shut, or from code. A splitter can remember where it was left, report every stage of a resize, be held to a grid of its own, and move a line instead of the panels where the content is too heavy to lay out on every frame. The gutter is a WAI-ARIA window splitter: it takes the focus, moves with the arrow keys, and reports where it stands to a screen reader.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Classes | `BitSplitterClassStyles?` | null | Custom CSS classes for different parts of the BitSplitter. |
| CollapseIcon | `BitIconInfo?` | null | The icon of the collapse button while the panel that folds is open, using BitIconInfo for external icon library support. Takes precedence over CollapseIconName when both are set. |
| CollapseIconName | `string?` | null | The name of the built-in Fluent UI icon shown on the collapse button while the panel that folds is open. The default is a chevron pointing at the panel that is about to be folded away, which follows the orientation of the splitter, which panel folds and the writing direction of the page. |
| Collapsed | `bool` | false | Whether the panel that folds - the first one, or the second where CollapseSecondPanel says so - is currently collapsed. It can be bound, so a collapse the user carries out on the gutter is reported back to the page. A collapsed panel keeps its content in the DOM and is folded down to CollapsedSize, ignoring the minimum size it would otherwise hold, while the panel left standing takes the whole splitter. |
| CollapsedSize | `int` | 0 | The size, in pixels, the folded panel is held at while it is collapsed. |
| Collapsible | `bool` | false | Lets a panel be collapsed - the first one, or the second where CollapseSecondPanel says so: pressing Enter on the gutter folds it away and opens it again, so does Ctrl with an arrow key and the control ShowCollapseButton draws, dragging the gutter close enough to that panel's own edge of the splitter snaps it shut, and Collapse/Expand/ToggleCollapse do the same from code. |
| CollapseSecondPanel | `bool` | false | Folds the second panel away rather than the first one, which is what an inspector, a properties pane or a preview sitting at the far end of the splitter needs. It moves what Collapsible offers to the other side of the gutter and nothing else: Collapsed, CollapsedSize, SnapSize, the keys, the collapse control and the Collapse/Expand/ToggleCollapse methods all go on meaning the one panel that folds, and Percent still describes the first panel. |
| DragStep | `int` | 0 | The grid, in pixels, a drag of the gutter moves the split along: the first panel comes to rest on a multiple of this rather than wherever the pointer happens to be. The keyboard is held to the same multiples. The default of 0 is no grid at all. |
| ExpandIcon | `BitIconInfo?` | null | The icon of the collapse button while the panel that folds is away, using BitIconInfo for external icon library support. Takes precedence over ExpandIconName when both are set. |
| ExpandIconName | `string?` | null | The name of the built-in Fluent UI icon shown on the collapse button while the panel that folds is away. The default is a chevron pointing at the room the panel is about to come back into. |
| FirstPanel | `RenderFragment?` | null | The content for the first panel. |
| FirstPanelSize | `int?` | null | The initial size of the first panel in pixels. From the first drag on, the split is held as a percentage in Percent, which takes precedence over this and over SecondPanelSize. |
| FirstPanelMaxSize | `int?` | null | The max size of first panel in pixels. |
| FirstPanelMinSize | `int?` | null | The min size of first panel in pixels. |
| GutterHitSize | `int?` | null | The smallest strip, in pixels, a pointer has to land in to take hold of the gutter. A gutter drawn narrower than this still answers a press that lands within the strip, which reaches past what is drawn evenly on both sides without taking any room from the panels. The default is 24, the target size WCAG asks for, and 44 wherever the pointer is a coarse one. |
| GutterIcon | `BitIconInfo?` | null | The icon for the BitSplitter gutter using BitIconInfo for external icon library support. Takes precedence over GutterIconName when both are set. |
| GutterIconName | `string?` | null | The name of the built-in Fluent UI icon to render in the BitSplitter gutter. Ignored when GutterIcon is also set. |
| GutterSize | `int?` | null | The size of BitSplitter gutter in pixels. |
| GutterTemplate | `RenderFragment?` | null | The custom content of the gutter, in place of the icon or of the default grip indicator. The gutter is the separator itself, so what goes in here is decoration rather than a control. |
| KeyboardStep | `int` | 10 | How far, in pixels, one press of an arrow key on the gutter moves the split. Page Up and Page Down, and an arrow key held with Shift, move it ten of these steps at a time; Home and End take it all the way to the smallest and the largest size the panels allow. |
| LazyResize | `bool` | false | Moves a line rather than the panels while the gutter is being dragged, and puts the panels where it was left only once the drag is over. It is what makes a panel holding a table of thousands of rows, an editor or a chart draggable: the cost of the drag becomes a single layout at its end. |
| NoResetOnDoubleClick | `bool` | false | Keeps the gutter from resetting the splitter to the sizes its parameters declare when it is double-clicked. |
| OnCollapsedChange | `EventCallback<bool>` | | The callback invoked when the panel that folds is collapsed or expanded. |
| OnCollapsing | `EventCallback<BitSplitterCollapseArgs>` | | The callback invoked before the panel that folds is collapsed or expanded, with what is about to happen and what asked for it. Set Cancel on the arguments to leave the panel as it is. The callback is awaited, and nothing else folds the panel while it is running. |
| OnGutterDoubleClick | `EventCallback` | | The callback invoked when the gutter is double-clicked, whether or not the double-click also resets the splitter. |
| OnResize | `EventCallback<double>` | | The callback invoked continuously while the gutter is being dragged, with the new share of the splitter the first panel takes up, as a percentage. It is coalesced to one call per animation frame, and a splitter with no handler for it makes no interop call at all while it is being dragged. |
| OnResizeCancel | `EventCallback<double>` | | The callback invoked when a resize is abandoned rather than finished - by Escape, or by the browser taking the pointer away - with the share of the splitter the first panel is put back to. Exactly one of this and OnResizeEnd follows every OnResizeStart. |
| OnResizeEnd | `EventCallback<double>` | | The callback invoked when a resize has finished, with the share of the splitter the first panel ended up taking, as a percentage. |
| OnResizeStart | `EventCallback<double>` | | The callback invoked when a resize starts, with the share of the splitter the first panel takes up at that moment, as a percentage. |
| PersistKey | `string?` | null | The key the splitter remembers its position under, so that a reader who has moved the gutter finds it where they left it the next time the page is opened. Both the position and whether the first panel was folded away are kept, and what is restored is offered to the component the way a drag is. The key has to be unique to the splitter within the origin. |
| PersistInSessionStorage | `bool` | false | Keeps what PersistKey remembers in the browser's session storage rather than its local storage, so the position lasts as long as the tab and no longer. |
| Percent | `double?` | null | The share of the splitter the first panel takes up, as a percentage between 0 and 100. It survives the container being resized and can be bound, so every drag, key press and collapse is reported back to the page. While it has a value it takes precedence over FirstPanelSize and SecondPanelSize. |
| ReadOnly | `bool` | false | Keeps the splitter as it is: the gutter is still shown and still looks like itself, but it cannot be dragged or moved from the keyboard. |
| SecondPanel | `RenderFragment?` | null | The content for the second panel. |
| SecondPanelSize | `int?` | null | The initial size of the second panel in pixels. Ignored while Percent has a value, which is the case from the first drag on. |
| SecondPanelMaxSize | `int?` | null | The max size of second panel in pixels. |
| SecondPanelMinSize | `int?` | null | The min size of second panel in pixels. |
| ShowCollapseButton | `bool` | false | Draws a control on the gutter that folds the collapsible panel away and brings it back, so that a reader working with the pointer can see that the panel folds at all. Only a Collapsible splitter has one. It is the pointer's way to what the gutter already does from the keyboard, so it stays out of the tab order and out of the accessibility tree. |
| SnapSize | `int` | 0 | How small, in pixels, a drag has to leave the panel that folds for it to snap shut instead of staying open. Only a Collapsible splitter snaps at all. The default of 0 leaves the splitter to work it out from the minimum size of the panel: half of it, or a twentieth of the splitter where there is no minimum. |
| Styles | `BitSplitterClassStyles?` | null | Custom CSS styles for different parts of the BitSplitter. |
| Vertical | `bool` | false | Sets the orientation of BitSplitter to vertical, stacking the two panels instead of placing them side by side. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Collapse | `Task` | | Collapses the panel that folds. Does nothing if it is already collapsed. Not turned away by Collapsible, which is about what the reader may do to the gutter. |
| Expand | `Task` | | Expands the panel that folds, putting the split back where it was before the fold. |
| ToggleCollapse | `Task` | | Collapses the panel that folds if it is expanded and expands it if it is collapsed. |
| SetPercent | `Task` | | Moves the split so that the first panel takes up the given share of the splitter, as a percentage between 0 and 100. The value is still held to the minimum and maximum sizes of both panels. |
| GetPercent | `ValueTask<double?>` | | Reads the share of the splitter the first panel takes up at this moment, as a percentage, measured off the panels themselves rather than read back from Percent. It is the only way to a split nobody has moved yet, which Percent does not hold until the first drag. A splitter whose JavaScript side is not up, and one laid out in a box with no room in it, answer null. |
| ResetSize | `Task` | | Clears Percent and hands the layout back to FirstPanelSize and SecondPanelSize - which is what a double-click on the gutter does. |
| FocusAsync | `ValueTask` | | Gives the focus to the gutter, which is the control a splitter is driven by. The overload taking a bool prevents the gutter from being scrolled into view. |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitSplitterCollapseReason Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Gutter | 0 | The gutter was pressed, or moved by the Enter key or Ctrl with an arrow key. |
| Drag | 1 | The gutter was dragged close enough to the panel's own edge of the splitter for it to snap shut. |
| Method | 2 | The Collapse, Expand or ToggleCollapse method of the splitter was called. |
| Restore | 3 | The position the splitter had remembered under its PersistKey was restored. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitSplitterCollapseArgs Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| IsCollapsing | `bool` | | The state the panel that folds is about to move to: true while it is being folded away, false while it is being brought back. |
| Reason | `BitSplitterCollapseReason` | | What made the panel collapse or expand: the gutter, a drag that snapped it shut, a call to one of the Collapse, Expand and ToggleCollapse methods, or the remembered position being restored. |
| Cancel | `bool` | false | Set to true to cancel the collapse or the expansion and leave the panel as it is. |
### BitSplitterClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | The custom CSS class/style for the root element of the BitSplitter. |
| CollapseButton | `string?` | null | The custom CSS class/style for the control on the gutter that folds the first panel of the BitSplitter away and brings it back. |
| CollapseButtonIcon | `string?` | null | The custom CSS class/style for the icon of the control on the gutter that folds the first panel of the BitSplitter away and brings it back. |
| FirstPanel | `string?` | null | The custom CSS class/style for the first panel of the BitSplitter. |
| Gutter | `string?` | null | The custom CSS class/style for the gutter (the separator) of the BitSplitter. |
| GutterIcon | `string?` | null | The custom CSS class/style for the icon rendered inside the gutter of the BitSplitter. |
| GutterIndicator | `string?` | null | The custom CSS class/style for the default grip indicator rendered inside the gutter of the BitSplitter. |
| Preview | `string?` | null | The custom CSS class/style for the line a lazy drag moves in place of the panels of the BitSplitter. |
| SecondPanel | `string?` | null | The custom CSS class/style for the second panel of the BitSplitter. |
### BitIconInfo Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Name | `string?` | null | Gets or sets the name of the icon. |
| BaseClass | `string?` | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | `string?` | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
## Examples
\n**Basic**:
```razor
```
\n**Vertical**:
```razor
```
\n**Panel size**:
```razor
```
\n**Min & max size**:
```razor
```
\n**Percent**:
```razor
```
```csharp
private double? percent = 30;
private double PercentValue { get => percent ?? 50; set => percent = value; }
```
\n**Drag step**:
```razor
```
```csharp
private double dragStep = 50;
```
\n**Lazy resize**:
```razor
```
\n**Keyboard**:
```razor
```
\n**Collapsible**:
```razor
```
```csharp
private bool isCollapsed;
```
\n**Collapse button**:
```razor
```
\n**Cancelling a collapse**:
```razor
25%
50%
75%
Toggle collapse
Reset
Focus the gutter
Measure
```
\n**Read-only & disabled**:
```razor
```
\n**Nested**:
```razor
```
\n**Gutter size**:
```razor
```
```csharp
private double gutterSize = 10;
```
\n**Gutter icon**:
```razor
```
\n**Gutter template**:
```razor
```
\n**External Icons**:
```razor
```
\n**Style & Class**:
```razor
```
\n**RTL**:
```razor
```
First panel
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Second panel
Each word carried meaning, each pause brought understanding. The spaces here are open for growth.
Each word carried meaning, each pause brought understanding. The spaces here are open for growth.
First panel
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Second panel
Each word carried meaning, each pause brought understanding. The spaces here are open for growth.
Each word carried meaning, each pause brought understanding. The spaces here are open for growth.
A first panel that starts at 150px
A second panel that takes the rest
A first panel that takes the rest
A second panel that starts at 150px
Never narrower than 120px, never wider than 320px.
Never narrower than 100px, whatever the first panel does.
First panel
Second panel
A panel that stops every @dragStep pixels
Second panel
Drag the gutter: the line moves first, the panels follow when you let go.
Second panel
One arrow key moves the gutter 50px.
Shift, Page Up and Page Down move it 500px.
Double-clicking the gutter
leaves this splitter where the reader put it.
A panel that can be folded away
Collapsed: @isCollapsed
Drag the gutter to the first 40px to fold this away.
Second panel
A document that takes the whole splitter once the inspector is away
An inspector that folds to the right
Press the chevron to fold this away.
Second panel
A stacked splitter folds upwards.
Second panel
Icons of the page's own choosing
CollapseIconName and ExpandIconName
A panel that folds away only with permission
Second panel
@collapseLog
```
```csharp
private bool allowCollapse = true;
private string collapseLog = "Nothing has been folded yet.";
```
\n**Programmatic control**:
```razor
First panel
Second panel
@(measured is null ? "Nothing has been measured yet." : $"The first panel takes up {measured:F1}% of the splitter.")
```
```csharp
private double? measured;
private BitSplitter splitterRef = default!;
```
\n**Events**:
```razor
First panel
Second panel
@resizeLog
```
```csharp
private string resizeLog = "No resize yet.";
```
\n**Persistence**:
```razor
A panel that is where you left it
Second panel
Read-only
The gutter stays where it is.
Disabled
The whole splitter is dimmed.
The first panel of the outer splitter
The first panel of the nested splitter
The second panel of the nested splitter
First panel
Second panel
First panel
Second panel
First panel
Second panel
First panel
"fa-solid fa-arrows-left-right"
First panel
BitIconInfo.Css("fa-solid fa-grip-vertical")
First panel
BitIconInfo.Fa("solid grip-lines-vertical")
First panel
GutterIcon=@@("bi bi-grip-vertical")
First panel
BitIconInfo.Bi("arrow-left-right")
A splitter with a Style of its own
Second panel
A splitter with a Class of its own
Second panel
Panels and gutter painted
through the Styles slots
Panels and gutter painted
through the Classes slots
پنل اول
پنل دوم