Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Split

Set the proportion of the initial position by setting the Basis attribute

Demo
I am the right panel

Set the proportion of the initial position by setting the Basis attribute

Demo
I am the left panel
I am the right panel

Demo
I am the upper panel
I am the bottom panel

Combine layout by nesting Split components

Demo
Upper
Lower
Right

Attributes

Loading...
@page "/splits"
@inject IStringLocalizer<Splits> Localizer

<h3>@Localizer["Title"]</h3>

<Block Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block2Intro"]">
    <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">@Localizer["Pannel2"]</div>
            </SecondPaneTemplate>
        </Split>
    </div>
</Block>

<Block Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]">
    <div class="border split-demo split-demo-horizontal">
        <Split Basis="40%">
            <FirstPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["Pannel1"]</div>
            </FirstPaneTemplate>
            <SecondPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["Pannel2"]</div>
            </SecondPaneTemplate>
        </Split>
    </div>
</Block>

<Block Title="@Localizer["Block3Title"]" Introduction="">
    <div class="border split-demo">
        <Split IsVertical="true">
            <FirstPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["Pannel3"]</div>
            </FirstPaneTemplate>
            <SecondPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["Pannel4"]</div>
            </SecondPaneTemplate>
        </Split>
    </div>
</Block>

<Block Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]">
    <div class="border split-demo">
        <Split>
            <FirstPaneTemplate>
                <Split IsVertical="true">
                    <FirstPaneTemplate>
                        <div class="d-flex justify-content-center align-items-center h-100">@Localizer["Pannel5"]</div>
                    </FirstPaneTemplate>
                    <SecondPaneTemplate>
                        <div class="d-flex justify-content-center align-items-center h-100">@Localizer["Pannel6"]</div>
                    </SecondPaneTemplate>
                </Split>
            </FirstPaneTemplate>
            <SecondPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["Pannel7"]</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 = 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 = " — "
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload