Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

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

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