Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Tag 标签

用于标记和选择。

页面中的非浮层元素,不会自动消失。

Demo
标签一
标签二
标签三
标签四
标签五
标签六
标签七

提供关闭按钮的标签

Demo
标签一
标签二
标签三
标签四
标签五
标签六
标签七

表示某种状态时提升可读性。

Demo
标签一
标签二
标签三
标签四
标签五
标签六

Attributes

Loading...

Event

Loading...
@page "/tags"

<h3>Tag 标签</h3>

<h4>用于标记和选择。</h4>

<Block Title="基本用法" Introduction="页面中的非浮层元素,不会自动消失。">
        <div class="row g-3">
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Primary">标签一</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Secondary">标签二</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Success">标签三</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Danger">标签四</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Warning">标签五</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Info">标签六</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Dark">标签七</Tag>
            </div>
        </div>
</Block>

<Block Title="关闭按钮" Introduction="提供关闭按钮的标签">
        <div class="row g-3">
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Primary" ShowDismiss="true" OnDismiss="@DismissClick">标签一</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Secondary" ShowDismiss="true" OnDismiss="@DismissClick">标签二</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Success" ShowDismiss="true" OnDismiss="@DismissClick">标签三</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Danger" ShowDismiss="true" OnDismiss="@DismissClick">标签四</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Warning" ShowDismiss="true" OnDismiss="@DismissClick">标签五</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Info" ShowDismiss="true" OnDismiss="@DismissClick">标签六</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Dark" ShowDismiss="true" OnDismiss="@DismissClick">标签七</Tag>
            </div>
        </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</Block>

<Block Title="带 Icon" Introduction="表示某种状态时提升可读性。">
        <div class="row g-3">
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-check-circle" Color="Color.Success">标签一</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-warning" Color="Color.Warning">标签二</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-question-circle" Color="Color.Info">标签三</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-times-circle" Color="Color.Danger">标签四</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-angle-left" Color="Color.Primary">标签五</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-user" Color="Color.Dark">标签六</Tag>
            </div>
        </div>
</Block>

<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.Pages.Components;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <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="关闭标签回调方法",
                Type ="EventCallback<MouseEventArgs>"
            }
        };

        /// <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 = "Icon",
                Description = "图标",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ShowDismiss",
                Description = "关闭按钮",
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            }
        };
    }
}

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