Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

DropdownWidget

More for head information summary presentation

Basic usage

Write pendant content directly on the page through childContent

Demo

4
You have 4 unread messages

Argo Zhang 4 mins

Why not buy a new awesome theme?

Argo Zhang 5 mins

Why not buy a new awesome theme?

Argo Zhang 6 mins

Why not buy a new awesome theme?

Argo Zhang 7 mins

Why not buy a new awesome theme?
View all messages
10
You have 10 unread notifications

5 new members joined

5 new members joined

5 new members joined

5 new members joined

5 new members joined

5 new members joined

5 new members joined

5 new members joined

5 new members joined

5 new members joined
View all notifications
9
You have 3 tasks
Design some buttons 20%

Create a nice theme 40%

Some task I need to do 60%

View all tasks

@inject IStringLocalizer<DropdownWidgetNormal> Localizer

<div class="widget-demo">
    <DropdownWidget>
        <DropdownWidgetItem Icon="fa-regular fa-envelope" BadgeNumber="4">
            <HeaderTemplate>
                <span>@Localizer["BasicUsageMessage"]</span>
            </HeaderTemplate>
            <BodyTemplate>
                @for (var index = 0; index < 4; index++)
                {
                    <div class="dropdown-item dropdown-item-center">
                        <Avatar IsCircle="true" IsIcon="true" Size="Size.Small" />
                        <div class="ms-2">
                            <div class="d-flex position-relative">
                                <b>Argo Zhang</b>
                                <small><i class="fa-regular fa-clock"></i> @(4 + index) mins</small>
                            </div>
                            <div class="text-truncate">Why not buy a new awesome theme?</div>
                        </div>
                    </div>
                }
            </BodyTemplate>
            <FooterTemplate>
                <div>@Localizer["BasicUsageViewMessage"]</div>
            </FooterTemplate>
        </DropdownWidgetItem>
        <DropdownWidgetItem Icon="fa-regular fa-bell" BadgeNumber="10" HeaderColor="Color.Success" BadgeColor="Color.Warning">
            <HeaderTemplate>
                <span>@Localizer["BasicUsageNotify"]</span>
            </HeaderTemplate>
            <BodyTemplate>
                @for (var index = 0; index < 10; index++)
                {
                    <div class="dropdown-item dropdown-item-center">
                        <i class="fa-solid fa-users text-primary"></i>
                        <div class="ms-2">5 new members joined</div>
                    </div>
                }
            </BodyTemplate>
            <FooterTemplate>
                <div>@Localizer["BasicUsageViewNotify"]</div>
            </FooterTemplate>
        </DropdownWidgetItem>
        <DropdownWidgetItem Icon="fa-solid fa-flag" BadgeNumber="9" HeaderColor="Color.Danger" BadgeColor="Color.Danger">
            <HeaderTemplate>
                <span>@Localizer["BasicUsageTasks"]</span>
            </HeaderTemplate>
            <BodyTemplate>
                <div class="dropdown-item">
                    <div class="dropdown-item-progress">
                        <span>Design some buttons</span>
                        <small>20%</small>
                    </div>
                    <Progress IsAnimated="true" IsStriped="true" Value="20" Color="Color.Primary"></Progress>
                </div>
                <div class="dropdown-item">
                    <div class="dropdown-item-progress">
                        <span>Create a nice theme</span>
                        <small>40%</small>
                    </div>
                    <Progress Value="40" Color="Color.Success"></Progress>
                </div>
                <div class="dropdown-item">
                    <div class="dropdown-item-progress">
                        <span>Some task I need to do</span>
                        <small>60%</small>
                    </div>
                    <Progress Value="60" Color="Color.Danger"></Progress>
                </div>
            </BodyTemplate>
            <FooterTemplate>
                <div>@Localizer["BasicUsageViewTasks"]</div>
            </FooterTemplate>
        </DropdownWidgetItem>
    </DropdownWidget>
</div>

DropdownWidgetItem

@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" Demo="typeof(Demos.DropdownWidget.DropdownWidgetNormal)" />

<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/

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-regular fa-bell"
            },
            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 = " — "
            }
    };
}

DropdownWidget

More for head information summary presentation

Demo

DropdownWidgetItem

Bootstrap Blazor Component library updated to 7.2.5-beta02