基于 Bootstrap 和 Blazor 的企业级组件库

star nuget master download license repo commit

Split 面板分割

Split 面板分割

基础用法

左右分割

Demo
我是左侧面板
我是右侧面板

设置初始化百分比

通过设置 Basis 属性来设置初始化位置占比

Demo
我是左侧面板
我是右侧面板

垂直分割

通过设置 IsVertical 属性控制垂直分割面板

Demo
我是上部面板
我是底部面板

嵌套使用

通过嵌套 Split 组件进行组合布局

Demo
上边面板
下边面板
右边面板

Attributes 属性

Loading...
@page "/splits"

<h3>Split 面板分割</h3>

<h4>Split 面板分割</h4>

<Block Title="基础用法" Introduction="左右分割" CodeFile="split.1.html">
    <div class="border split-demo split-demo-horizontal">
        <Split>
            <FirstPaneTemplate>
                <div class="d-flex justify-content-center align-items-center">我是左侧面板</div>
            </FirstPaneTemplate>
            <SecondPaneTemplate>
                <div class="d-flex justify-content-center align-items-center">我是右侧面板</div>
            </SecondPaneTemplate>
        </Split>
    </div>
</Block>

<Block Title="设置初始化百分比" Introduction="通过设置 <code>Basis</code> 属性来设置初始化位置占比" CodeFile="split.2.html">
    <div class="border split-demo split-demo-horizontal">
        <Split Basis="40%">
            <FirstPaneTemplate>
                <div class="d-flex justify-content-center align-items-center">我是左侧面板</div>
            </FirstPaneTemplate>
            <SecondPaneTemplate>
                <div class="d-flex justify-content-center align-items-center">我是右侧面板</div>
            </SecondPaneTemplate>
        </Split>
    </div>
</Block>

<Block Title="垂直分割" Introduction="通过设置 <code>IsVertical</code> 属性控制垂直分割面板" CodeFile="split.3.html">
    <div class="border split-demo">
        <Split IsVertical="true">
            <FirstPaneTemplate>
                <div class="d-flex justify-content-center align-items-center">我是上部面板</div>
            </FirstPaneTemplate>
            <SecondPaneTemplate>
                <div class="d-flex justify-content-center align-items-center">我是底部面板</div>
            </SecondPaneTemplate>
        </Split>
    </div>
</Block>

<Block Title="嵌套使用" Introduction="通过嵌套 <code>Split</code> 组件进行组合布局" CodeFile="split.4.html">
    <div class="border split-demo">
        <Split>
            <FirstPaneTemplate>
                <Split IsVertical="true">
                    <FirstPaneTemplate>
                        <div class="d-flex justify-content-center align-items-center">上边面板</div>
                    </FirstPaneTemplate>
                    <SecondPaneTemplate>
                        <div class="d-flex justify-content-center align-items-center">下边面板</div>
                    </SecondPaneTemplate>
                </Split>
            </FirstPaneTemplate>
            <SecondPaneTemplate>
                <div class="d-flex justify-content-center align-items-center">右边面板</div>
            </SecondPaneTemplate>
        </Split>
    </div>
</Block>

<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;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Splits
    {
        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "IsVertical",
                Description = "样式",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Basis",
                Description = "第一个窗格位置占比",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "50%"
            },
            new AttributeItem() {
                Name = "FirstPaneTemplate",
                Description = "第一个窗格模板",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "SecondPaneTemplate",
                Description = "第二个窗格模板",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
    }
}

正在加载 ...

An error has occurred. This application may no longer respond until reloaded. Reload