Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Badge

A number or status tag that appears next to a button, icon, or icon

Small badge assembly in a variety of colors is available

Demo
primary
secondary
success
danger
warning
info
dark
light

Set the badge pendant with the of the property IsPill='true' to set the fillet

Demo
primary
secondary
success
danger
warning
info
dark
light

Button internal badge

Demo
8

Attributes

Loading...
@page "/badges"
@inject IStringLocalizer<Badges> Localizer

<h3>Badge</h3>

<h4>A number or status tag that appears next to a button, icon, or icon</h4>

<DemoBlock Title="Basic usage" Introduction="Small badge assembly in a variety of colors is available" Name="Normal">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Primary">primary</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Secondary">secondary</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Success">success</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Danger">danger</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Warning">warning</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Info">info</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Dark">dark</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Light">light</Badge></div>
    </div>
</DemoBlock>

<DemoBlock Title="Capsule badge" Introduction='Set the badge pendant with the  of the property <code> IsPill='true'</code> to set the fillet' Name="Pill">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Primary">primary</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Secondary">secondary</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Success">success</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Danger">danger</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Warning">warning</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Info">info</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Dark">dark</Badge></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Light">light</Badge></div>
    </div>
</DemoBlock>

<DemoBlock Title="The badge inside the button" Introduction="Button internal badge" Name="Button">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button Color="Color.Primary">
                <i class="fa fa-tv"></i>
                <span>The primary button</span>
                <Badge Color="Color.Danger">1</Badge>
            </Button>
        </div>
        <div class="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>
</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;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Badges
{
    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "ChildContent",
                Description = Localizer["ChildContent"],
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Class",
                Description = Localizer["Class"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Color",
                Description = Localizer["Color"],
                Type = "Color",
                ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
                DefaultValue = "Primary"
            },
            new AttributeItem() {
                Name = "IsPill",
                Description = Localizer["IsPill"],
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            }
    };
}

B 站相关视频链接

暂无

交流群

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