@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"
            }
        };
    }
}