Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

DropdownWidget

More for head information summary presentation

Write pendant content directly on the page through childContent

Demo

DropdownWidgetItem

Loading...
@page "/dropdownwidgets"
@inject IStringLocalizer<DropdownWidgets> Localizer

<h3>DropdownWidget</h3>

<h4>More for head information summary presentation</h4>

<DemoBlock Title="Basic usage" Introduction="Write pendant content directly on the page through <code>childContent </code>" Name="Normal">
    <div class="d-flex align-items-center" style="height: 40px; background-color: #6c757d;">
        <DropdownWidget>
            <DropdownWidgetItem Icon="fa fa-envelope-o" BadgeNumber="4">
                <HeaderTemplate>
                    <span>You have 4 unread messages</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>View all messages</a>
                </FooterTemplate>
            </DropdownWidgetItem>
            <DropdownWidgetItem Icon="fa fa-bell-o" BadgeNumber="10" HeaderColor="Color.Success" BadgeColor="Color.Warning">
                <HeaderTemplate>
                    <span></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>View all notifications</a>
                </FooterTemplate>
            </DropdownWidgetItem>
            <DropdownWidgetItem Icon="fa fa-flag-o" BadgeNumber="9" HeaderColor="Color.Danger" BadgeColor="Color.Danger">
                <HeaderTemplate>
                    <span>You have 3 tasks</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>View all tasks</a>
                </FooterTemplate>
            </DropdownWidgetItem>
        </DropdownWidget>
    </div>
</DemoBlock>

<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.Samples;

/// <summary>
/// 
/// </summary>
public partial class DropdownWidgets
{

    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Icon",
                Description = Localizer["Icon"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = "fa fa-bell-o"
            },
            new AttributeItem() {
                Name = "BadgeColor",
                Description = Localizer["BadgeColor"],
                Type = "Color",
                ValueList = " — ",
                DefaultValue = "Success"
            },
            new AttributeItem() {
                Name = "HeaderColor",
                Description = Localizer["HeaderColor"],
                Type = "Color",
                ValueList = "Primary / Secondary / Info / Warning / Danger ",
                DefaultValue = "Primary"
            },
            new AttributeItem() {
                Name = "BadgeNumber",
                Description = Localizer["BadgeNumber"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ShowArrow",
                Description = Localizer["ShowArrow"],
                Type = "boolean",
                ValueList = "true/false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "MenuAlignment",
                Description = Localizer["MenuAlignment"],
                Type = "Alignment",
                ValueList = "None / Left / Center / Right ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "HeaderTemplate",
                Description = Localizer["HeaderTemplate"],
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "BodyTemplate",
                Description = Localizer["BodyTemplate"],
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "FooterTemplate",
                Description = Localizer["FooterTemplate"],
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            }
    };
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload