Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Badge 徽章组件

出现在按钮、图标旁的数字或状态标记

基础用法

提供各种颜色的徽章小挂件组件

Demo
primary
secondary
success
danger
warning
info
dark
light

胶囊徽章

通过属性 IsPill="true" 设置圆角的徽章挂件

Demo
primary
secondary
success
danger
warning
info
dark
light

按钮内徽章

按钮内部徽章

Demo
8

Attributes

Loading...
@page "/badges"

<h3>Badge 徽章组件</h3>

<h4>出现在按钮、图标旁的数字或状态标记</h4>

<Block Title="基础用法" Introduction="提供各种颜色的徽章小挂件组件">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Primary">primary</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Secondary">secondary</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Success">success</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Danger">danger</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Warning">warning</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Info">info</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Dark">dark</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Light">light</Badge></div>
        </div>
    </div>
</Block>

<Block Title="胶囊徽章" Introduction='通过属性 <code>IsPill="true"</code> 设置圆角的徽章挂件'>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Primary">primary</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Secondary">secondary</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Success">success</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Danger">danger</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Warning">warning</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Info">info</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Dark">dark</Badge></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Light">light</Badge></div>
        </div>
    </div>
</Block>

<Block Title="按钮内徽章" Introduction="按钮内部徽章">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button Color="Color.Primary">
                    <i class="fa fa-tv"></i>
                    <span>主要按钮</span>
                    <Badge Color="Color.Danger">1</Badge>
                </Button>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <div class="badge-widget">
                    <i class="fa fa-tv"></i>
                    <Badge Color="Color.Success"><span style="padding: 0 2px;">8</span></Badge>
                </div>
            </div>
        </div>
    </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 Badges
    {
        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "ChildContent",
                Description = "内容",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Class",
                Description = "样式",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Color",
                Description = "颜色",
                Type = "Color",
                ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
                DefaultValue = "Primary"
            },
            new AttributeItem() {
                Name = "IsPill",
                Description = "胶囊样式",
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            }
        };
    }
}

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