
Split
Basic usage
Set the proportion of the initial position by setting the Basis
attribute
Demo
I am the right panel
Set initialization percentage
Set the proportion of the initial position by setting the Basis
attribute
Demo
I am the left panel
I am the right panel
Vertical split
Control the vertical split panel by setting the IsVertical
property
Demo
I am the upper panel
I am the bottom panel
Nested use
Combine layout by nesting Split
components
Demo
Upper
Lower
Right
Attributes
Loading...
@page "/splits"
@inject IStringLocalizer<Splits> Localizer
<h3>Split</h3>
<DemoBlock Title="Basic usage" Introduction="Set the proportion of the initial position by setting the <code>Basis</code> attribute" Name="Normal">
<div class="border split-demo split-demo-horizontal">
<Split>
<FirstPaneTemplate>
<div class="d-flex justify-content-center align-items-center h-100"></div>
</FirstPaneTemplate>
<SecondPaneTemplate>
<div class="d-flex justify-content-center align-items-center h-100">I am the right panel</div>
</SecondPaneTemplate>
</Split>
</div>
</DemoBlock>
<DemoBlock Title="Set initialization percentage" Introduction="Set the proportion of the initial position by setting the <code>Basis</code> attribute" Name="Percent">
<div class="border split-demo split-demo-horizontal">
<Split Basis="40%">
<FirstPaneTemplate>
<div class="d-flex justify-content-center align-items-center h-100">I am the left panel</div>
</FirstPaneTemplate>
<SecondPaneTemplate>
<div class="d-flex justify-content-center align-items-center h-100">I am the right panel</div>
</SecondPaneTemplate>
</Split>
</div>
</DemoBlock>
<DemoBlock Title="Vertical split" Introduction="Control the vertical split panel by setting the <code>IsVertical</code> property" Name="Vertical">
<div class="border split-demo">
<Split IsVertical="true">
<FirstPaneTemplate>
<div class="d-flex justify-content-center align-items-center h-100">I am the upper panel</div>
</FirstPaneTemplate>
<SecondPaneTemplate>
<div class="d-flex justify-content-center align-items-center h-100">I am the bottom panel</div>
</SecondPaneTemplate>
</Split>
</div>
</DemoBlock>
<DemoBlock Title="Nested use" Introduction="Combine layout by nesting <code>Split</code> components" Name="Nested">
<div class="border split-demo">
<Split>
<FirstPaneTemplate>
<Split IsVertical="true">
<FirstPaneTemplate>
<div class="d-flex justify-content-center align-items-center h-100">Upper</div>
</FirstPaneTemplate>
<SecondPaneTemplate>
<div class="d-flex justify-content-center align-items-center h-100">Lower</div>
</SecondPaneTemplate>
</Split>
</FirstPaneTemplate>
<SecondPaneTemplate>
<div class="d-flex justify-content-center align-items-center h-100">Right</div>
</SecondPaneTemplate>
</Split>
</div>
</DemoBlock>
<AttributeTable Items="@GetAttributes()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Shared.Common;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public sealed partial class Splits
{
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "IsVertical",
Description = Localizer["Desc1"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "Basis",
Description = Localizer["Desc2"],
Type = "string",
ValueList = " — ",
DefaultValue = "50%"
},
new AttributeItem() {
Name = "FirstPaneTemplate",
Description = Localizer["Desc3"],
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "SecondPaneTemplate",
Description = Localizer["Desc4"],
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
}
};
}