
DropdownWidget
More for head information summary presentation
Basic usage
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 style="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>You have 10 unread notifications</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;
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 = " — "
}
};
}