Enterprise-level component library based on Bootstrap and BlazorDropdownWidget
More for head information summary presentation
Basic usage
Write pendant content directly on the page through childContent
Demo
- 4
You have 4 unread messagesArgo Zhang 4 minsWhy not buy a new awesome theme?Argo Zhang 5 minsWhy not buy a new awesome theme?Argo Zhang 6 minsWhy not buy a new awesome theme?Argo Zhang 7 minsWhy not buy a new awesome theme?View all messages
- 10
You have 10 unread notifications5 new members joined5 new members joined5 new members joined5 new members joined5 new members joined5 new members joined5 new members joined5 new members joined5 new members joined5 new members joinedView all notifications
- 9
You have 3 tasksDesign 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
Loading...
B station related video link
No
交流群
