Skip to content

Commit a56d358

Browse files
ArgoZhangArgoZhang
authored
feat(DialButtonItem): add ChildContent parameter (#5466)
* refactor: 更新注释文档 * feat: 增加 ChildContent 模板 * refactor: 使用拨号按钮 * test: DialButton 增加模板 * doc: 精简样式
1 parent 8043e4e commit a56d358

8 files changed

Lines changed: 125 additions & 76 deletions

File tree

‎src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,6 @@
5959
--bs-btn-hover-bg: var(--bb-layout-button-hover-bg);
6060
--bs-btn-active-bg: var(--bb-layout-button-active-bg);
6161
box-shadow: var(--bb-layout-button-shadow);
62-
right: 1rem;
63-
bottom: 9rem;
6462
}
6563

6664
::deep .btn-theme img {

‎src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.css‎

Lines changed: 1 addition & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,4 @@
1-
::deep .btn-fade {
2-
opacity: 0.7;
3-
box-shadow: var(--bb-layout-button-shadow);
4-
transition: opacity .3s linear;
5-
position: fixed;
6-
z-index: 1001;
7-
}
8-
9-
::deep .btn-fade:hover {
10-
opacity: 1;
11-
}
12-
13-
::deep .btn-update {
14-
--bs-btn-bg: var(--bb-layout-button-update-bg);
15-
--bs-btn-hover-bg: var(--bs-btn-bg);
16-
--bs-btn-active-bg: var(--bs-btn-bg);
17-
bottom: 5rem;
18-
right: 1rem;
19-
overflow: hidden;
20-
display: flex;
21-
justify-content: center;
22-
align-items: center;
23-
}
24-
25-
::deep .btn-update img {
26-
width: 55%;
27-
margin-inline-start: 2px;
28-
}
29-
30-
::deep .btn-chat {
31-
--bs-btn-bg: var(--bb-layout-button-bg);
32-
--bs-btn-hover-bg: var(--bb-layout-button-hover-bg);
33-
--bs-btn-active-bg: var(--bb-layout-button-active-bg);
34-
box-shadow: var(--bb-layout-button-shadow);
35-
right: 1rem;
36-
bottom: 13rem;
37-
display: flex;
38-
align-items: center;
39-
justify-content: center;
40-
color: var(--bb-button-chat-color);
41-
}
42-
43-
::deep .btn-theme-mode {
44-
--bs-btn-bg: var(--bb-layout-button-bg);
45-
--bs-btn-hover-bg: var(--bb-layout-button-hover-bg);
46-
--bs-btn-active-bg: var(--bb-layout-button-active-bg);
47-
box-shadow: var(--bb-layout-button-shadow);
48-
bottom: 17rem;
49-
right: 1rem;
50-
overflow: hidden;
51-
display: flex;
52-
justify-content: center;
53-
align-items: center;
54-
color: var(--bb-button-chat-color);
55-
}
56-
57-
::deep pre {
1+
::deep pre {
582
color: #e83e8c;
593
margin-bottom: 0;
604
max-height: 260px;

‎src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,25 @@
1818
@Body
1919
</section>
2020

21-
<ThemeMode />
22-
23-
<LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@ChatTooltip" class="btn-fade btn-chat" Url="./ai-chat" Icon="fa-solid fa-comments"></LinkButton>
24-
25-
<ThemeChooser></ThemeChooser>
26-
27-
<LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@Title" class="btn-fade btn-update" Url="@WebsiteOption.CurrentValue.WikiUrl" Target="_blank" ImageUrl="@WebsiteOption.CurrentValue.GetAssetUrl("images/log.svg")"></LinkButton>
21+
<DialButton DialMode="DialMode.Radial" Icon="fa-solid fa-gear" Radius="100" Placement="Placement.BottomEnd" IsAutoClose="false">
22+
<ButtonTemplate>
23+
<div class="btn-circle btn-fade dial-button-gear">
24+
<img src="./images/logo.png" />
25+
</div>
26+
</ButtonTemplate>
27+
<ChildContent>
28+
<DialButtonItem>
29+
<ThemeMode></ThemeMode>
30+
</DialButtonItem>
31+
<DialButtonItem>
32+
<LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@ChatTooltip" class="btn-fade btn-chat" Url="./ai-chat" Icon="fa-solid fa-comments"></LinkButton>
33+
</DialButtonItem>
34+
@* <DialButtonItem>
35+
<ThemeChooser></ThemeChooser>
36+
</DialButtonItem> *@
37+
<DialButtonItem>
38+
<LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@Title" class="btn-fade btn-update" Url="@WebsiteOption.CurrentValue.WikiUrl" Target="_blank" ImageUrl="@WebsiteOption.CurrentValue.GetAssetUrl("images/log.svg")"></LinkButton>
39+
</DialButtonItem>
40+
</ChildContent>
41+
</DialButton>
2842
</section>

‎src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,70 @@
7272
background-color: var(--bb-sidebar-body-drag-hover-bg);
7373
}
7474

75+
::deep .dial-button {
76+
display: none;
77+
position: fixed;
78+
right: 1rem;
79+
bottom: 1rem;
80+
}
81+
82+
::deep .btn-fade {
83+
opacity: 0.7;
84+
box-shadow: var(--bb-layout-button-shadow);
85+
transition: opacity .3s linear;
86+
}
87+
88+
::deep .btn-fade:hover {
89+
opacity: 1;
90+
}
91+
92+
::deep .btn-update {
93+
--bs-btn-bg: var(--bb-layout-button-update-bg);
94+
--bs-btn-hover-bg: var(--bs-btn-bg);
95+
--bs-btn-active-bg: var(--bs-btn-bg);
96+
display: flex;
97+
justify-content: center;
98+
align-items: center;
99+
}
100+
101+
::deep .btn-update img {
102+
width: 55%;
103+
margin-inline-start: 2px;
104+
}
105+
106+
::deep .btn-chat {
107+
--bs-btn-bg: var(--bb-layout-button-bg);
108+
--bs-btn-hover-bg: var(--bb-layout-button-hover-bg);
109+
--bs-btn-active-bg: var(--bb-layout-button-active-bg);
110+
box-shadow: var(--bb-layout-button-shadow);
111+
display: flex;
112+
align-items: center;
113+
justify-content: center;
114+
color: var(--bb-button-chat-color);
115+
}
116+
117+
::deep .btn-theme-mode {
118+
--bs-btn-bg: var(--bb-layout-button-bg);
119+
--bs-btn-hover-bg: var(--bb-layout-button-hover-bg);
120+
--bs-btn-active-bg: var(--bb-layout-button-active-bg);
121+
box-shadow: var(--bb-layout-button-shadow);
122+
display: flex;
123+
justify-content: center;
124+
align-items: center;
125+
color: var(--bb-button-chat-color);
126+
}
127+
128+
.dial-button-gear {
129+
background-color: var(--bb-primary-color);
130+
border-radius: 50%;
131+
padding: 4px;
132+
cursor: pointer;
133+
}
134+
135+
.dial-button-gear img {
136+
width: 100%;
137+
}
138+
75139
@media (min-width: 768px) {
76140
.section {
77141
--bb-layout-sidebar-width: 300px;
@@ -102,4 +166,8 @@
102166
.sidebar-bar {
103167
display: block;
104168
}
169+
170+
::deep .dial-button {
171+
display: block;
172+
}
105173
}

‎src/BootstrapBlazor/Components/Button/DialButton.razor‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,14 @@
2929
<div @key="@item" class="dial-item" role="menuitem" @onclick="@(e => OnClickItem(item))">
3030
@if (ItemTemplate == null)
3131
{
32-
<i class="@item.Icon"></i>
32+
if(item.ChildContent != null)
33+
{
34+
@item.ChildContent
35+
}
36+
else
37+
{
38+
<i class="@item.Icon"></i>
39+
}
3340
}
3441
else
3542
{

‎src/BootstrapBlazor/Components/Button/DialButtonItem.cs‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,25 @@ namespace BootstrapBlazor.Components;
1111
public class DialButtonItem : ComponentBase, IDisposable
1212
{
1313
/// <summary>
14-
/// 显示图标
14+
/// 获得/设置 显示图标
1515
/// </summary>
1616
[Parameter]
1717
[NotNull]
18-
#if NET6_0_OR_GREATER
19-
[EditorRequired]
20-
#endif
2118
public string? Icon { get; set; }
2219

2320
/// <summary>
24-
/// 选项值
21+
/// 获得/设置 选项值
2522
/// </summary>
2623
[Parameter]
2724
[NotNull]
28-
#if NET6_0_OR_GREATER
29-
[EditorRequired]
30-
#endif
3125
public string? Value { get; set; }
3226

27+
/// <summary>
28+
/// 获得/设置 组件内容
29+
/// </summary>
30+
[Parameter]
31+
public RenderFragment? ChildContent { get; set; }
32+
3333
[CascadingParameter]
3434
private List<DialButtonItem>? Items { get; set; }
3535

‎src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ $bb-button-circle-height: 45px;
6060

6161
// Button DialogButton
6262
$bb-dial-list-zindex: 5;
63-
$bb-dial-item-padding: 0.25rem 1rem;
63+
$bb-dial-item-padding: 0;
6464
$bb-dial-item-hover-bg: #e9ecef;
6565
$bb-dial-item-margin: 6px;
6666
$bb-dial-item-width: 40px;

‎test/UnitTest/Components/DialButtonTest.cs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -222,6 +222,24 @@ public void ItemTemplate_Ok()
222222
cut.Contains("test-fa-solid fa-cut-cut");
223223
}
224224

225+
[Fact]
226+
public void Item_ChildContent_Ok()
227+
{
228+
var cut = Context.RenderComponent<DialButton>(pb =>
229+
{
230+
pb.Add(i => i.ChildContent, new RenderFragment(pb =>
231+
{
232+
pb.OpenComponent<DialButtonItem>(0);
233+
pb.AddAttribute(1, "ChildContent", new RenderFragment(pb =>
234+
{
235+
pb.AddContent(0, "test-ChildContent");
236+
}));
237+
pb.CloseComponent();
238+
}));
239+
});
240+
cut.Contains("test-ChildContent");
241+
}
242+
225243
[Fact]
226244
public void DialButtonItem_Ok()
227245
{

0 commit comments

Comments
 (0)