New to Telerik UI for Blazor? Download free 30-day trial

Splitter Orientation

You can customize the Splitter orientation through the its Orientation parameter. It takes a member of the SplitterOrientation enum:

  • Horizontal (the default)
  • Vertical

Splitter with vertical orientation

<p>
    Configure the Splitter Orientation:

    <TelerikRadioGroup Data="@OrientationOptions" Layout="RadioGroupLayout.Horizontal"
                       @bind-Value="@SelectedSplitterOrientation.Value" />
</p>

<TelerikSplitter Orientation="@SelectedSplitterOrientation.Value"
                 Width="400px" Height="200px">
    <SplitterPanes>
        <SplitterPane>
            <div>First Pane content</div>
        </SplitterPane>
        <SplitterPane>
            <div>Second Pane content</div>
        </SplitterPane>
    </SplitterPanes>
</TelerikSplitter>

@code {
    public Orientation SelectedSplitterOrientation { get; set; }

    protected override void OnInitialized()
    {
        SelectedSplitterOrientation = OrientationOptions[0];
        base.OnInitialized();
    }

    public List<Orientation> OrientationOptions { get; set; } = new List<Orientation>()
    {
        new Orientation() { Text = "Horizontal", Value = SplitterOrientation.Horizontal },
        new Orientation() { Text = "Vertical", Value = SplitterOrientation.Vertical},
    };

    public class Orientation
    {
        public string Text { get; set; }
        public SplitterOrientation Value { get; set; }
    }

}

Nested Splitters With Different Orientation

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.

Nested splitters that create a complex layout with both horizontal and vertical panes

<div style="width: 500px; height: 300px; border: 2px solid red;">

    <TelerikSplitter Width="100%" Height="100%">
        <SplitterPanes>
            <SplitterPane Size="100px">
                <div>left sidebar</div>
            </SplitterPane>
            <SplitterPane>

                <TelerikSplitter Class="k-pane-flex"
                                 Width="100%" Height="100%"
                                 Orientation="@SplitterOrientation.Vertical">
                    <SplitterPanes>
                        <SplitterPane Size="20%">
                            <div>TOP content</div>
                        </SplitterPane>
                        <SplitterPane>
                            <div>Bottom content</div>
                        </SplitterPane>
                    </SplitterPanes>
                </TelerikSplitter>

            </SplitterPane>
        </SplitterPanes>
    </TelerikSplitter>

</div>

Next Steps

See Also

In this article