Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Divider 分割线

区隔内容的分割线。

基础用法

对不同章节的文本段落进行分割。

Demo

青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪

少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉

设置文案

可以在分割线上自定义文案内容。

Demo

头上一片晴天,心中一个想念

少年包青天

其实归来之时,断剑重铸之日

英雄联盟

一只萌萌哒图标

学习语录

学习使我快乐

设置图标

可以在分割线上自定义文案内容。

Demo

头上一片晴天,心中一个想念

其实归来之时,断剑重铸之日

一只萌萌哒图标

书签

学习使我快乐

垂直分割

进行垂直显示分割线

Demo
雨纷纷
旧故里
草木深
分割线
分割线
分割线
分割线

自定义内容

通过设置 ChildContent 内容可以自定义任意内容

Demo

头上一片晴天,心中一个想念

我是自定义内容 div 元素

其实归来之时,断剑重铸之日

Attributes

Loading...
@page "/dividers"

<h3>Divider 分割线</h3>

<h4>区隔内容的分割线。</h4>

<Block Title="基础用法" Introduction="对不同章节的文本段落进行分割。">
    <p>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</p>
    <Divider></Divider>
    <p>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</p>
</Block>

<Block Title="设置文案" Introduction="可以在分割线上自定义文案内容。">
    <p>头上一片晴天,心中一个想念</p>
    <Divider Text="少年包青天" Alignment="Alignment.Left"></Divider>
    <p>其实归来之时,断剑重铸之日</p>
    <Divider Text="英雄联盟"></Divider>
    <p>一只萌萌哒图标</p>
    <Divider Text="学习语录" Alignment="Alignment.Right"></Divider>
    <p>学习使我快乐</p>
</Block>

<Block Title="设置图标" Introduction="可以在分割线上自定义文案内容。">
    <p>头上一片晴天,心中一个想念</p>
    <Divider Icon="fa fa-fw fa-at" Alignment="Alignment.Left"></Divider>
    <p>其实归来之时,断剑重铸之日</p>
    <Divider Icon="fa fa-fw fa-bar-chart"></Divider>
    <p>一只萌萌哒图标</p>
    <Divider Icon="fa fa-fw fa-bookmark" Text="书签" Alignment="Alignment.Right"></Divider>
    <p>学习使我快乐</p>
</Block>

<Block Title="垂直分割" Introduction="进行垂直显示分割线">
    <div class="d-flex">
        <span>雨纷纷</span>
        <Divider IsVertical="true"></Divider>
        <span>旧故里</span>
        <Divider IsVertical="true"></Divider>
        <span>草木深</span>
    </div>
    <Divider Text="分割线"></Divider>
    <div class="d-flex">
        <div class="border border-primary" style="width:100px; height:100px;"></div>
        <Divider IsVertical="true"></Divider>
        <div class="border border-success" style="width:100px; height:100px;"></div>
        <Divider IsVertical="true"></Divider>
        <div class="border border-info" style="width:100px; height:100px;"></div>
    </div>
    <Divider Text="分割线"></Divider>
    <div class="d-flex">
        <div class="border border-primary" style="width:100px; height:200px;"></div>
        <Divider IsVertical="true" Text="分割线"></Divider>
        <div class="border border-success" style="width:100px; height:200px;"></div>
        <Divider IsVertical="true" Text="分割线"></Divider>
        <div class="border border-info" style="width:100px; height:200px;"></div>
    </div>
</Block>

<Block Title="自定义内容" Introduction="通过设置 <code>ChildContent</code> 内容可以自定义任意内容">
    <p>头上一片晴天,心中一个想念</p>
    <Divider>
        <div class="text-dagner">我是自定义内容 <code>div</code> 元素</div>
    </Divider>
    <p>其实归来之时,断剑重铸之日</p>
</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>
    /// Dividers 组件示例文档
    /// </summary>
    public sealed partial class Dividers
    {
        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Text",
                Description = "设置分割线显示文字",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Icon",
                Description = "设置分割线显示图标",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Alignment",
                Description = "设置分割线显示文字对齐方式",
                Type = "Aligment",
                ValueList = "Left|Center|Right|Top|Bottom",
                DefaultValue = "Center"
            },
            new AttributeItem() {
                Name = "IsVertical",
                Description = "设置分割线是否为垂直分割",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ChildContent",
                Description = "ChildContent 模板",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload