Skip to content

Commit f6939f7

Browse files
ArgoZhangArgoZhang
committed
Merge branch 'main' into refactor-more
# Conflicts: # src/BootstrapBlazor/Components/Table/Table.razor
2 parents d9e5da3 + 1905435 commit f6939f7

File tree

12 files changed

+209
-17
lines changed

12 files changed

+209
-17
lines changed

‎src/BootstrapBlazor.Server/Components/Samples/Dropdowns.razor‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@
3131
</div>
3232
</DemoBlock>
3333

34-
<DemoBlock Title="@Localizer["DropdownItemTemplateTitle"]" Introduction="@Localizer["DropdownItemTemplateIntro"]" Name="ItemTemplate">
34+
<DemoBlock Title="@Localizer["DropdownItemTemplateTitle"]" Introduction="@Localizer["DropdownItemTemplateIntro"]"
35+
Name="ItemTemplate">
3536
<Dropdown TValue="string" Items="ItemTemplateList">
3637
<ItemTemplate>
3738
<Tooltip Title="just a tooltip text demo" Trigger="hover">
@@ -42,6 +43,24 @@
4243
</Dropdown>
4344
</DemoBlock>
4445

46+
<DemoBlock Title="@Localizer["DropdownItemsTemplateTitle"]" Introduction="@Localizer["DropdownItemsTemplateIntro"]"
47+
Name="ItemsTemplate">
48+
<Dropdown TValue="string" IsFixedButtonText="true" FixedButtonText="More" Icon="fa solid fa-ellipsis">
49+
<ItemsTemplate>
50+
<DropdownItem Text="Copy" Icon="fa-solid fa-copy" OnClick="@(() => OnClickAction("Copy"))"></DropdownItem>
51+
<DropdownItem Text="Paste" Icon="fa-solid fa-paste" OnClick="@(() => OnClickAction("Paste"))"></DropdownItem>
52+
<Divider></Divider>
53+
<DropdownItem Text="Action1" Icon="fa-solid fa-flag" OnClick="@(() => OnClickAction("Action1"))"></DropdownItem>
54+
<DropdownItem>
55+
<Tooltip Title="just a tooltip text demo" Trigger="hover">
56+
<span class="fa-solid fa-flag"></span>
57+
<div class="ms-2 flex-fill" @onclick="@(() => OnClickAction("Action2"))">Action2</div>
58+
</Tooltip>
59+
</DropdownItem>
60+
</ItemsTemplate>
61+
</Dropdown>
62+
</DemoBlock>
63+
4564
<DemoBlock Title="@Localizer["SplitTitle"]" Introduction='@Localizer["SplitIntro"]' Name="Split">
4665
<div class="row g-3">
4766
<div class="col-6 col-sm-4 col-md-3">

‎src/BootstrapBlazor.Server/Components/Samples/Dropdowns.razor.cs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,8 @@ private async Task OnIsAsyncClick()
163163
await ToastService.Success("Dropdown IsAsync", "Job done!");
164164
}
165165

166+
private Task OnClickAction(string actionName) => ToastService.Information("Custom Action", $"Trigger {actionName}");
167+
166168
/// <summary>
167169
/// GetAttributes
168170
/// </summary>

‎src/BootstrapBlazor.Server/Locales/en-US.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1626,7 +1626,9 @@
16261626
"DropdownCascadeItem7": "Jingan",
16271627
"DropdownCascadeItem8": "Huangpu",
16281628
"DropdownItemTemplateTitle": "Item Template",
1629-
"DropdownItemTemplateIntro": "By setting <code>ItemTemplate</code>, you can customize the content displayed in the drop-down item. In this example, the <code>Tooltip</code> component is used to add a tooltip function when the mouse is hovered."
1629+
"DropdownItemTemplateIntro": "By setting <code>ItemTemplate</code>, you can customize the content displayed in the drop-down item. In this example, the <code>Tooltip</code> component is used to add a tooltip function when the mouse is hovered.",
1630+
"DropdownItemsTemplateTitle": "Items Template",
1631+
"DropdownItemsTemplateIntro": "You can customize all the content of the dropdown list by setting `<itemsTemplate>`. In this example, we use the `<DropdownItem>` component and `<DropdownDivider>` component to customize the dropdown list component."
16301632
},
16311633
"BootstrapBlazor.Server.Components.Samples.GoTops": {
16321634
"Title": "GoTop",

‎src/BootstrapBlazor.Server/Locales/zh-CN.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1626,7 +1626,9 @@
16261626
"DropdownCascadeItem7": "静安区",
16271627
"DropdownCascadeItem8": "黄浦区",
16281628
"DropdownItemTemplateTitle": "下拉项模板",
1629-
"DropdownItemTemplateIntro": "通过设置 <code>ItemTemplate</code> 可以自定义下拉项显示内容，本例中通过自定义模板使用 <code>Tooltip</code> 组件增加鼠标悬浮是显示提示功能"
1629+
"DropdownItemTemplateIntro": "通过设置 <code>ItemTemplate</code> 可以自定义下拉项显示内容，本例中通过自定义模板使用 <code>Tooltip</code> 组件增加鼠标悬浮是显示提示功能",
1630+
"DropdownItemsTemplateTitle": "下拉框模板",
1631+
"DropdownItemsTemplateIntro": "通过设置 <code>ItemsTemplate</code> 可以自定义下拉框所有内容，本例中通过使用 <code>DropdownItem</code> 组件与 <code>DropdownDivider</code> 对下拉框组件进行自定义"
16301632
},
16311633
"BootstrapBlazor.Server.Components.Samples.GoTops": {
16321634
"Title": "GoTop 返回顶端组件",

‎src/BootstrapBlazor/Components/Dropdown/Dropdown.razor‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
<BootstrapLabel for="@Id" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText"></BootstrapLabel>
99
}
1010
<div @attributes="@AdditionalAttributes" id="@Id" class="@DirectionClassName">
11-
<DynamicElement TagName="button" type="button" class="@ButtonClassName" data-bs-toggle="@DropdownToggle" disabled="@Disabled"
11+
<DynamicElement TagName="button" type="button" class="@ButtonClassName" data-bs-toggle="@DropdownToggle"
12+
disabled="@Disabled"
1213
TriggerClick="ShowSplit" OnClick="OnClickButton" PreventDefault="false" StopPropagation="false">
1314
@if (ButtonTemplate == null)
1415
{
@@ -20,7 +21,10 @@
2021
{
2122
<i class="@Icon"></i>
2223
}
23-
<span>@ButtonText</span>
24+
@if (!string.IsNullOrEmpty(ButtonText))
25+
{
26+
<span>@ButtonText</span>
27+
}
2428
}
2529
else
2630
{
@@ -29,7 +33,9 @@
2933
</DynamicElement>
3034
@if (ShowSplit)
3135
{
32-
<button type="button" class="@ClassName" data-bs-toggle="@ToggleString" disabled="@Disabled" aria-haspopup="true" aria-expanded="false"></button>
36+
<button type="button" class="@ClassName" data-bs-toggle="@ToggleString" disabled="@Disabled"
37+
aria-haspopup="true" aria-expanded="false">
38+
</button>
3339
}
3440
<div class="@MenuAlignmentClass">
3541
@if (ItemsTemplate == null)

‎src/BootstrapBlazor/Components/Dropdown/DropdownItem.razor‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@namespace BootstrapBlazor.Components
2+
3+
@if (ChildContent != null)
4+
{
5+
<div class="@ItemClassString">
6+
@ChildContent
7+
</div>
8+
}
9+
else
10+
{
11+
<DynamicElement class="@ItemClassString"
12+
TriggerClick="!IsDisabled" OnClick="OnClickItem">
13+
@if (!string.IsNullOrEmpty(ItemIconString))
14+
{
15+
<i class="@ItemIconString"></i>
16+
}
17+
@if (!string.IsNullOrEmpty(Text))
18+
{
19+
<span>@Text</span>
20+
}
21+
</DynamicElement>
22+
}

‎src/BootstrapBlazor/Components/Dropdown/DropdownItem.razor.cs‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
5+
6+
namespace BootstrapBlazor.Components;
7+
8+
/// <summary>
9+
/// DropdownItem 组件
10+
/// </summary>
11+
public partial class DropdownItem
12+
{
13+
/// <summary>
14+
/// 获得/设置 显示文本
15+
/// </summary>
16+
[Parameter]
17+
public string? Text { get; set; }
18+
19+
/// <summary>
20+
/// 获得/设置 图标
21+
/// </summary>
22+
[Parameter]
23+
public string? Icon { get; set; }
24+
25+
/// <summary>
26+
/// 获得/设置 是否被禁用 默认 false 优先级低于 <see cref="OnDisabledCallback"/>
27+
/// </summary>
28+
[Parameter]
29+
public bool Disabled { get; set; }
30+
31+
/// <summary>
32+
/// 获得/设置 是否被禁用回调方法 默认 null 优先级高于 <see cref="Disabled"/>
33+
/// </summary>
34+
[Parameter]
35+
public Func<bool>? OnDisabledCallback { get; set; }
36+
37+
/// <summary>
38+
/// 获得/设置 点击回调方法 默认 null
39+
/// </summary>
40+
[Parameter]
41+
public Func<Task>? OnClick { get; set; }
42+
43+
/// <summary>
44+
/// 获得/设置 组件内容
45+
/// </summary>
46+
[Parameter]
47+
public RenderFragment? ChildContent { get; set; }
48+
49+
private string? ItemIconString => CssBuilder.Default("dropdown-item-icon")
50+
.AddClass(Icon, !string.IsNullOrEmpty(Icon))
51+
.Build();
52+
53+
private string? ItemClassString => CssBuilder.Default("dropdown-item")
54+
.AddClass("disabled", IsDisabled)
55+
.Build();
56+
57+
private bool IsDisabled => OnDisabledCallback?.Invoke() ?? Disabled;
58+
59+
private async Task OnClickItem()
60+
{
61+
if (OnClick != null)
62+
{
63+
await OnClick();
64+
}
65+
}
66+
}

‎src/BootstrapBlazor/Components/Table/Table.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -869,7 +869,7 @@
869869
RenderFragment<TItem> RenderExtendButtons => item =>
870870
@<div class="table-cell">
871871
<label>@ColumnButtonTemplateHeaderText</label>
872-
<div class="btn-group">
872+
<div class="@ExtendButtonGroupClassString">
873873
@if (BeforeRowButtonTemplate != null)
874874
{
875875
<TableExtensionButton OnClickButton="cell => OnClickExtensionButton(item, cell)">
@@ -907,7 +907,7 @@
907907
RenderFragment<TItem> RenderRowExtendButtons => item =>
908908
@<td class="@FixedExtendButtonsColumnClassString" style="@GetFixedExtendButtonsColumnStyleString()">
909909
<div class="@ExtendButtonsCellClassString">
910-
<div class="btn-group" @onclick:stopPropagation="true">
910+
<div class="@ExtendButtonGroupClassString" @onclick:stopPropagation="true">
911911
@{
912912
var isInCell = InCellMode && SelectedRows.FirstOrDefault() == item;
913913
}

‎src/BootstrapBlazor/Components/Table/Table.razor.cs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,12 @@ public partial class Table<TItem> : ITable, IModelEqualityComparer<TItem> where
4747
[Parameter]
4848
public int DefaultFixedColumnWidth { get; set; } = 200;
4949

50+
/// <summary>
51+
/// 获得/设置 是否使用按钮组显示行内扩展按钮 默认 true
52+
/// </summary>
53+
[Parameter]
54+
public bool IsGroupExtendButtons { get; set; } = true;
55+
5056
/// <summary>
5157
/// 获得/设置 内置虚拟化组件实例
5258
/// </summary>
@@ -153,6 +159,11 @@ public partial class Table<TItem> : ITable, IModelEqualityComparer<TItem> where
153159
.AddClass(ExtendButtonColumnAlignment.ToDescriptionString())
154160
.Build();
155161

162+
private string? ExtendButtonGroupClassString => CssBuilder.Default()
163+
.AddClass("btn-group", IsGroupExtendButtons)
164+
.AddClass("btn-separate", !IsGroupExtendButtons)
165+
.Build();
166+
156167
private string GetSortTooltip(ITableColumn col) => SortName != col.GetFieldName()
157168
? UnsetText
158169
: SortOrder switch

‎src/BootstrapBlazor/Components/Table/Table.razor.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -968,3 +968,7 @@ form .table .table-cell > textarea {
968968
.bb-sortable tr {
969969
cursor: pointer;
970970
}
971+
972+
.btn-separate > button:not(:last-child) {
973+
margin-inline-end: .25rem;
974+
}

0 commit comments

Comments
 (0)