@page "/dropdownwidgets"

<h3>DropdownWidget 下拉挂件</h3>

<h4>多用于头部信息汇总展示</h4>

<Block Title="基础用法" Introduction="直接在页面上通过 <code>ChildContent</code> 编写挂件内容">
    <div class="d-flex align-items-center" style="height: 40px; background-color: #6c757d;">
        <DropdownWidget>
            <DropdownWidgetItem Icon="fa fa-envelope-o" BadgeNumber="4">
                <HeaderTemplate>
                    <span>您有 4 个未读消息</span>
                </HeaderTemplate>
                <BodyTemplate>
                    @for (var index = 0; index < 4; index++)
                    {
                        <a class="dropdown-item d-flex align-items-center" href="#" @onclick:preventDefault>
                            <div style="width: 40px; height: 40px;">
                                <Avatar IsCircle="true" IsIcon="true" Size="Size.Small" />
                            </div>
                            <div class="ml-2">
                                <div class="d-flex position-relative">
                                    <h4>Argo Zhang</h4>
                                    <small><i class="fa fa-clock-o"></i> @(4 + index) mins</small>
                                </div>
                                <div class="text-truncate">Why not buy a new awesome theme?</div>
                            </div>
                        </a>
                    }
                </BodyTemplate>
                <FooterTemplate>
                    <a href="#" @onclick:preventDefault>查看所有消息</a>
                </FooterTemplate>
            </DropdownWidgetItem>
            <DropdownWidgetItem Icon="fa fa-bell-o" BadgeNumber="10" HeaderColor="Color.Success" BadgeColor="Color.Warning">
                <HeaderTemplate>
                    <span>您有 10 个未读通知</span>
                </HeaderTemplate>
                <BodyTemplate>
                    @for (var index = 0; index < 10; index++)
                    {
                        <a class="dropdown-item d-flex align-items-center" href="#" @onclick:preventDefault>
                            <i class="fa fa-users text-primary"></i>
                            <div class="ml-2">5 new members joined</div>
                        </a>
                    }
                </BodyTemplate>
                <FooterTemplate>
                    <a href="#" @onclick:preventDefault>查看所有通知</a>
                </FooterTemplate>
            </DropdownWidgetItem>
            <DropdownWidgetItem Icon="fa fa-flag-o" BadgeNumber="9" HeaderColor="Color.Danger" BadgeColor="Color.Danger">
                <HeaderTemplate>
                    <span>您有 3 个任务</span>
                </HeaderTemplate>
                <BodyTemplate>
                    <a href="#" class="dropdown-item" @onclick:preventDefault>
                        <h3 class="position-relative">
                            Design some buttons
                            <small class="pull-right">20%</small>
                        </h3>
                        <Progress IsAnimated="true" IsStriped="true" Value="20" Color="Color.Primary"></Progress>
                    </a>
                    <a href="#" class="dropdown-item" @onclick:preventDefault>
                        <h3 class="position-relative">
                            Create a nice theme
                            <small class="pull-right">40%</small>
                        </h3>
                        <Progress Value="40" Color="Color.Success"></Progress>
                    </a>
                    <a href="#" class="dropdown-item" @onclick:preventDefault>
                        <h3 class="position-relative">
                            Some task I need to do
                            <small class="pull-right">60%</small>
                        </h3>
                        <Progress Value="60" Color="Color.Danger"></Progress>
                    </a>
                </BodyTemplate>
                <FooterTemplate>
                    <a href="#" @onclick:preventDefault>查看所有任务</a>
                </FooterTemplate>
            </DropdownWidgetItem>
        </DropdownWidget>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" Title="DropdownWidgetItem 组件" />

// 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.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public partial class DropdownWidgets
    {

        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Icon",
                Description = "挂件图标",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "fa fa-bell-o"
            },
            new AttributeItem() {
                Name = "BadgeColor",
                Description = "徽章颜色",
                Type = "Color",
                ValueList = " — ",
                DefaultValue = "Success"
            },
            new AttributeItem() {
                Name = "HeaderColor",
                Description = "Header 颜色",
                Type = "Color",
                ValueList = "Primary / Secondary / Info / Warning / Danger ",
                DefaultValue = "Primary"
            },
            new AttributeItem() {
                Name = "BadgeNumber",
                Description = "徽章显示数量",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ShowArrow",
                Description = "是否显示小箭头",
                Type = "boolean",
                ValueList = "true/false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "MenuAlignment",
                Description = "菜单对齐方式",
                Type = "Alignment",
                ValueList = "None / Left / Center / Right ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "HeaderTemplate",
                Description = "Header 模板",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "BodyTemplate",
                Description = "Body 模板",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "FooterTemplate",
                Description = "Footer 模板",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
    }
}