Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Tag 标签

用于标记和选择。

基本用法

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

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

关闭按钮

提供关闭按钮的标签

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

带 Icon

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

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

Attributes

Loading...

事件 Events

Loading...
@page "/tags"

<h3>Tag 标签</h3>

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

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

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

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

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Tags
    {
        /// <summary>
        /// 
        /// </summary>
        private Logger? 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群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload