Class SplitterPane

Configure each pane and its properties to handle the pane behavior.

Inheritance

System.Object

SplitterPane

Namespace: Syncfusion.Blazor.Layouts

Assembly: Syncfusion.Blazor.dll

Syntax

public class SplitterPane : OwningComponentBase

Constructors

SplitterPane()

Declaration

public SplitterPane()

Properties

Collapsed

Gets or sets a value indicating whether the pane is initially collapsed within the SfSplitter component.

Declaration

public bool Collapsed { get; set; }

Property Value

Type	Description
System.Boolean	true if the pane is initially collapsed; otherwise, false.

Remarks

When a pane is collapsed, its content is hidden, and only a minimal representation of the pane remains visible.

CollapsedChanged

Gets or sets a callback of the bound value.

Declaration

public EventCallback<bool> CollapsedChanged { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<System.Boolean>

Collapsible

Gets or sets a value indicating whether the pane is collapsible in the SfSplitter component.

Declaration

public bool Collapsible { get; set; }

Property Value

Type	Description
System.Boolean	true if the pane is collapsible; otherwise, false.

Remarks

When a pane is collapsible, users can interact with a control, typically a button or an icon, to collapse or expand the pane.

By setting this property to true, you enable collapsible behavior for the pane. When set to false, the pane cannot be collapsed or expanded manually.

Content

Gets or sets the content of the SplitterPane within the SfSplitter component.

Declaration

public string Content { get; set; }

Property Value

Type	Description
System.String	A string representing the content to be displayed within the pane.

Examples

<SfSplitter Height="240px" Width="100%">
  <SplitterPanes>
       <SplitterPane Content="<div>The ASP.NET Scheduler,facilitates almost all calendar features, thus allowing users to manage their time efficiently </div>">
       </SplitterPane>
       <SplitterPane Content="<div>The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.</div>">
       </SplitterPane>
   </SplitterPanes>
</SfSplitter>

ContentTemplate

Gets or sets the template for the content within the SplitterPane component.

Declaration

public RenderFragment ContentTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment that represents the custom content template.

Remarks

The content template is a customizable area within the Splitter where you can define custom content. By providing a RenderFragment, you can create complex layouts or embed other components within the Splitter's panes.

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>

CssClass

Gets or sets a CSS class string to customize the appearance of the SplitterPane 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 SplitterPane component. You can define your own CSS classes and use them here to control the visual appearance of the component.

Max

Gets or sets the maximum size of the SplitterPane within the SfSplitter component.

Declaration

public string Max { get; set; }

Property Value

Type	Description
System.String	A string representing the maximum size of the pane. This can be specified using CSS units such as pixels (px), percentages (%).

Remarks

The maxsize property defines the maximum allowable size for the pane. This limits the expansion of the pane beyond the specified maximum size.

Examples

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

MaxChanged

Gets or sets a callback of the bound value.

Declaration

public EventCallback<string> MaxChanged { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<System.String>

Min

Gets or sets the minimum size of the SplitterPane within the SfSplitter component.

Declaration

public string Min { get; set; }

Property Value

Type	Description
System.String	A string representing the minimum size of the pane. This can be specified using CSS units such as pixels (px), percentages (%).

Remarks

The minSize property defines the minimum allowable size for the pane. This prevents the pane from being resized to a size smaller than the specified minimum size.

Examples

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

MinChanged

Gets or sets a callback of the bound value.

Declaration

public EventCallback<string> MinChanged { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<System.String>

Resizable

Gets or sets a value indicating whether the pane is resizable within the SfSplitter component.

Declaration

public bool Resizable { get; set; }

Property Value

Type	Description
System.Boolean	true if the pane is resizable; otherwise, false.

Remarks

When a pane is resizable, users can interact with its edges to adjust its size. This allows them to customize the layout by making panes larger or smaller as needed.

By default, the pane is resizable. Setting this property to false will prevent users from resizing the pane.

You can combine this property with the Min and Max properties to define the resizing behavior more precisely.

Size

Gets or sets the size of the SplitterPane within the SfSplitter component.

Declaration

public string Size { get; set; }

Property Value

Type	Description
System.String	A string representing the size of the pane. This can be specified using CSS units such as pixels (px), percentages (%).

Remarks

The size property defines the initial size of the pane. The value determines the width or height of the pane, depending on the Orientation of the Splitter.

SizeChanged

Gets or sets a callback of the bound value.

Declaration

public EventCallback<string> SizeChanged { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<System.String>

Visible

Gets or sets a value indicating whether the pane is visible within the SfSplitter component.

Declaration

public bool Visible { get; set; }

Property Value

Type	Description
System.Boolean	true if the pane is visible; otherwise, false.

Remarks

If this property is set to false, the pane element will not be shown in the DOM. This property can be used to provide conditional pane rendering in Splitter.

Methods

Dispose()

Dispose the unmanaged resources.

Declaration

public virtual void Dispose()

Dispose(Boolean)

Dispose the unmanaged resources.

Declaration

protected override void Dispose(bool disposing)

Parameters

Type	Name	Description
System.Boolean	disposing	Boolean value to dispose the object.

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.

OnParametersSetAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnParametersSetAsync()

Returns

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