Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Tag

Used for marking and selection.

Non floating elements in the page will not disappear automatically.

Demo
Label I
Label II
Label III
Label IV
Label V
Label VI
Label VII

Provides a label for the close button

Demo
Label I
Label II
Label III
Label IV
Label V
Label VI
Label VII

Improve readability when representing a state.

Demo
Label I
Label II
Label III
Label IV
Label V
Label VI

Attributes

Loading...

Event

Loading...
@page "/tags"
@inject IStringLocalizer<Tags> Localizer

<h3>Tag</h3>

<h4>Used for marking and selection.</h4>

<DemoBlock Title="Basic usage" Introduction="Non floating elements in the page will not disappear automatically." Name="Normal">
        <div class="row g-3">
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Primary">Label I</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Secondary">Label II</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Success">Label III</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Danger">Label IV</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Warning">Label V</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Info">Label VI</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Dark">Label VII</Tag>
            </div>
        </div>
</DemoBlock>

<DemoBlock Title="Close button" Introduction="Provides a label for the close button" Name="CloseButton">
        <div class="row g-3">
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Primary" ShowDismiss="true" OnDismiss="@DismissClick">Label I</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Secondary" ShowDismiss="true" OnDismiss="@DismissClick">Label II</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Success" ShowDismiss="true" OnDismiss="@DismissClick">Label III</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Danger" ShowDismiss="true" OnDismiss="@DismissClick">Label IV</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Warning" ShowDismiss="true" OnDismiss="@DismissClick">Label V</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Info" ShowDismiss="true" OnDismiss="@DismissClick">Label VI</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Dark" ShowDismiss="true" OnDismiss="@DismissClick">Label VII</Tag>
            </div>
        </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="With Icon" Introduction="Improve readability when representing a state." Name="Icon">
        <div class="row g-3">
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-check-circle" Color="Color.Success">Label I</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-warning" Color="Color.Warning">Label II</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-question-circle" Color="Color.Info">Label III</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-times-circle" Color="Color.Danger">Label IV</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-angle-left" Color="Color.Primary">Label V</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-user" Color="Color.Dark">Label VI</Tag>
            </div>
        </div>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
// 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 BootstrapBlazor.Shared.Components;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Tags
{
    [NotNull]
    private BlockLogger? Trace { get; set; }

    /// <summary>
    /// 
    /// </summary>
    private Task DismissClick()
    {
        Trace.Log($"Tag Dismissed");
        return Task.CompletedTask;
    }

    /// <summary>
    /// 获得事件方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
            new EventItem()
            {
                Name = "OnDismiss",
                Description = Localizer["OnDismiss"],
                Type ="EventCallback<MouseEventArgs>"
            }
    };

    /// <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 = "Icon",
                Description = Localizer["Icon"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ShowDismiss",
                Description = Localizer["ShowDismiss"],
                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