Class SfSplitter

The splitter is a layout user interface (UI) component that splits the layout into multiple panes with resizable and collapsible support.

Inheritance

System.Object

SfBaseComponent

SfSplitter

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

Namespace: Syncfusion.Blazor.Layouts

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfSplitter : SfBaseComponent

Examples

<SfSplitter>
  <SplitterPanes>
       <SplitterPane>
          <ContentTemplate>
              <div> Left Pane</div>
          </ContentTemplate>
       </SplitterPane>
       <SplitterPane>
          <ContentTemplate>
              <div> Right Pane</div>
          </ContentTemplate>
       </SplitterPane>
   </SplitterPanes>
</SfSplitter>

Constructors

SfSplitter()

Declaration

public SfSplitter()

Properties

ChildContent

Sets the content for panes of the Splitter.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	Accepts a RenderFragment that defines the content of the UI element.

CssClass

Gets or sets a CSS class string to customize the appearance of the SfSplitter component.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	Accepts a CSS class string separated by space to customize the appearance. The default value is String.Empty.

Remarks

Use this property to apply custom styling to the SfSplitter component. You can define your own CSS classes and use them here to control the visual appearance of the component.

Enabled

Gets or sets a value indicating whether the SfSplitter component is enabled.

Declaration

public bool Enabled { get; set; }

Property Value

Type	Description
System.Boolean	true if the component is enabled; otherwise, false.

Remarks

When the component is enabled, user interactions and behaviors associated with the Splitter, such as resizing panes, are allowed. When disabled, these interactions are restricted and the component becomes non-interactive.

By default, the component is enabled. You can set this property to false to prevent user interactions temporarily, if needed.

EnablePersistence

Gets or sets a value indicating whether persistence of the SfSplitter component's state is enabled.

Declaration

public bool EnablePersistence { get; set; }

Property Value

Type	Description
System.Boolean	true if persistence is enabled; otherwise, false.

Remarks

When persistence is enabled, the state of the SfSplitter component is saved and restored across page reloads or navigations. This allows the component to remember its previous state and provide a consistent user experience.

EnableReversePanes

Gets or sets a value indicating whether the order of splitter panes should be reversed.

Declaration

public bool EnableReversePanes { get; set; }

Property Value

Type	Description
System.Boolean	true, if the splitter panes are reordered. Otherwise, false.

Remarks

When set to true, the order of the panes within the SfSplitter component will be reversed. This means that the right-most or bottom-most pane will appear as the first pane, and the other panes will follow in reverse order.

Reversing the pane order can be useful in scenarios where you want to present content in the opposite direction, such as creating layouts that flow from right to left or from bottom to top.

EnableRtl

Gets or sets a value indicating whether right-to-left (RTL) mode is enabled for the SfSplitter component.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	true if RTL mode is enabled; otherwise, false.

Remarks

When RTL mode is enabled, the content of the SfSplitter component will be presented in a right-to-left direction. This affects the positioning and alignment of the splitter panes and other content.

Enabling RTL mode can be useful when designing applications for languages that are written from right to left, such as Arabic, Hebrew, or Persian.

Height

Gets or sets the height of the SfSplitter component.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String	Accepts the string value. The default value is 100%.

Examples

<SfSplitter Height="240px" Width="100%">
  <SplitterPanes>
       <SplitterPane>
          <ContentTemplate>
              <div> Left Pane</div>
          </ContentTemplate>
       </SplitterPane>
       <SplitterPane>
          <ContentTemplate>
              <div> Right Pane</div>
          </ContentTemplate>
       </SplitterPane>
   </SplitterPanes>
</SfSplitter>

HtmlAttributes

You can add the additional Html attributes such as id, title, etc., to the splitter element.

Declaration

public Dictionary<string, object> HtmlAttributes { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	A dictionary of additional HTML attributes for the root element of the component.

ID

Gets or sets the unique identifier for SfSplitter component.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	Accepts a string value. The default value is String.Empty.

Remarks

You can specify only unique value.

Orientation

Gets or sets the orientation of the SfSplitter component.

Declaration

public Orientation Orientation { get; set; }

Property Value

Type	Description
Orientation	An enum value representing the orientation of the Splitter. Possible values are Horizontal and Vertical.

Remarks

The orientation determines whether the Splitter will arrange its panes horizontally or vertically.

• Horizontal: Panes are arranged side by side horizontally.
• Vertical: Panes are arranged one above the other vertically.

Choose the appropriate orientation based on your desired layout and design.

Examples

<SfSplitter Orientation="Orientation.Vertical">
  <SplitterPanes>
       <SplitterPane>
          <ContentTemplate>
              <div> Left Pane</div>
          </ContentTemplate>
       </SplitterPane>
       <SplitterPane>
          <ContentTemplate>
              <div> Right Pane</div>
          </ContentTemplate>
       </SplitterPane>
   </SplitterPanes>
</SfSplitter>

SeparatorSize

Gets or sets the size of the separators between panes in the SfSplitter component.

Declaration

public double SeparatorSize { get; set; }

Property Value

Type	Description
System.Double	The size of the separators, specified as a double value.

Remarks

The separator size determines the width of the space between adjacent panes within the Splitter component.

Example:

• Setting SeparatorSize to 10 will create a 10-pixel wide separator between adjacent panes.

Examples

<SfSplitter SeparatorSize="10" Height="240px" Width="100%">
  <SplitterPanes>
       <SplitterPane>
          <ContentTemplate>
              <div> Left Pane</div>
          </ContentTemplate>
       </SplitterPane>
       <SplitterPane>
          <ContentTemplate>
              <div> Right Pane</div>
          </ContentTemplate>
       </SplitterPane>
   </SplitterPanes>
</SfSplitter>

Width

Gets or sets the width of the SfSplitter component.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	Accepts the string value. The default value is 100%.

Remarks

The value can be either in pixel or percentage format.

Examples

<SfSplitter Height="240px" Width="100%">
  <SplitterPanes>
       <SplitterPane>
          <ContentTemplate>
              <div> Left Pane</div>
          </ContentTemplate>
       </SplitterPane>
       <SplitterPane>
          <ContentTemplate>
              <div> Right Pane</div>
          </ContentTemplate>
       </SplitterPane>
   </SplitterPanes>
</SfSplitter>

Methods

AddPaneAsync(SplitterPane, Int32)

Adds a new pane asynchronously with the specified properties and index in the SfSplitter component.

Declaration

public Task AddPaneAsync(SplitterPane paneProperties, int index)

Parameters

Type	Name	Description
SplitterPane	paneProperties	The properties of the pane to be added.
System.Int32	index	The index at which the pane should be added.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

CollapseAsync(Double)

Collapses the specified pane at the given index asynchronously in the SfSplitter component.

Declaration

public Task CollapseAsync(double index)

Parameters

Type	Name	Description
System.Double	index	The index of the pane to be collapsed.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

ExpandAsync(Double)

Expands the specified pane at the given index asynchronously in the SfSplitter component.

Declaration

public Task ExpandAsync(double index)

Parameters

Type	Name	Description
System.Double	index	The index of the pane to be expanded.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	Set to true if this is the first time OnAfterRender(Boolean) has been invoked.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Method invoked when the component has received parameters from its parent.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

RemovePaneAsync(Int32)

Removes the pane at the specified index asynchronously from the SfSplitter component.

Declaration

public Task RemovePaneAsync(int index)

Parameters

Type	Name	Description
System.Int32	index	The index of the pane to be removed.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

ToggleAsync(List<Double>, List<Double>)

Toggles the expansion and collapse of panes asynchronously in the SfSplitter component based on provided indices.

Declaration

public Task ToggleAsync(List<double> expandIndices, List<double> collapseIndices)

Parameters

Type	Name	Description
System.Collections.Generic.List<System.Double>	expandIndices	The list of indices for panes to be expanded.
System.Collections.Generic.List<System.Double>	collapseIndices	The list of indices for panes to be collapsed.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

This method allows us to collapse and expand the multiple panes from the application end with a single method call.

See Also

Syncfusion.Blazor.Layouts.SplitterPane.collapsible

Syncfusion.Blazor.Layouts.SplitterPane.collapsed

UpdateSettings(List<SplitterPane>)

Declaration

public Task UpdateSettings(List<SplitterPane> paneDetails)

Parameters

Type	Name	Description
System.Collections.Generic.List<SplitterPane>	paneDetails

Returns

Type
System.Threading.Tasks.Task