Class SfSplitter

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

Inheritance

object

ComponentBase

OwningComponentBase

SfOwningComponentBase

SfBaseComponent

SfSplitter

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inherited Members

ComponentBase.Assets

ComponentBase.AssignedRenderMode

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.OnAfterRender(bool)

ComponentBase.OnInitialized()

ComponentBase.OnParametersSet()

ComponentBase.RendererInfo

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.ShouldRender()

ComponentBase.StateHasChanged()

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

OwningComponentBase.IsDisposed

OwningComponentBase.ScopedServices

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(bool)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(string, object, bool, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.Layouts

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfSplitter : SfBaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

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

[Parameter]
public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
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

[Parameter]
public string CssClass { get; set; }

Property Value

Type	Description
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.

EnablePersistence

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

Declaration

[Parameter]
public bool EnablePersistence { get; set; }

Property Value

Type	Description
bool	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

[Parameter]
public bool EnableReversePanes { get; set; }

Property Value

Type	Description
bool	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

[Parameter]
public bool EnableRtl { get; set; }

Property Value

Type	Description
bool	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.

Enabled

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

Declaration

[Parameter]
public bool Enabled { get; set; }

Property Value

Type	Description
bool	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.

Height

Gets or sets the height of the SfSplitter component.

Declaration

[Parameter]
public string Height { get; set; }

Property Value

Type	Description
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

[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object> HtmlAttributes { get; set; }

Property Value

Type	Description
Dictionary<string, 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

[Parameter]
public string ID { get; set; }

Property Value

Type	Description
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

[Parameter]
[JsonConverter(typeof(JsonStringEnumConverter))]
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

[Parameter]
public double SeparatorSize { get; set; }

Property Value

Type	Description
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

[Parameter]
public string Width { get; set; }

Property Value

Type	Description
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, int)

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.
int	index	The index at which the pane should be added.

Returns

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

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

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
double	index	The index of the pane to be collapsed.

Returns

Type	Description
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
double	index	The index of the pane to be expanded.

Returns

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

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

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

Returns

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

Overrides

SfBaseComponent.OnAfterRenderAsync(bool)

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
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
Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

ComponentBase.OnParametersSetAsync()

RemovePaneAsync(int)

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

Declaration

public Task RemovePaneAsync(int index)

Parameters

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

Returns

Type	Description
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
List<double>	expandIndices	The list of indices for panes to be expanded.
List<double>	collapseIndices	The list of indices for panes to be collapsed.

Returns

Type	Description
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

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable