Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 7d225d9

Browse files
ArgoZhangArgoZhang
authored
feat(Tooltip): support manual trigger (#6663)
* feat: 增加 show/hide 方法 * feat: 增加 toggle 方法 * doc: 更新 delay 参数说明文档 * feat: 增加 Show/Hide/Toggle 实例方法 * feat: 增加 IToggle 接口 * refactor: 调整 Popover 组件支持 Toggle 方法 * doc: 更新 Tooltip 示例 * revert: 撤销 IToggle 接口 * doc: 更新示例代码 * revert: 撤销更新 * doc: 更新文档 * feat: 增加状态切换逻辑 * doc: 更新 Popover 示例 * chore: bump version 9.9.3-beta03 * doc: 更正单词拼写错误 * test: 补充单元测试 * refactor: 精简代码 * doc: 更正单词拼写错误
1 parent 24726c3 commit 7d225d9

File tree

17 files changed

+211
-27
lines changed

17 files changed

+211
-27
lines changed

‎src/BootstrapBlazor.Server/Components/Components/TooltipContent.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<i class="fa-solid fa-flag" style="cursor: pointer;" @onclick="ToggleShow" />

‎src/BootstrapBlazor.Server/Components/Components/TooltipContent.razor.cs‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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.Server.Components.Components;
7+
8+
/// <summary>
9+
/// TooltipContent 组件用于显示 Tooltip 的内容
10+
/// </summary>
11+
public partial class TooltipContent
12+
{
13+
[CascadingParameter]
14+
private Tooltip? Tooltip { get; set; }
15+
16+
private async Task ToggleShow()
17+
{
18+
if (Tooltip == null)
19+
{
20+
return;
21+
}
22+
23+
await Tooltip.Toggle();
24+
}
25+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,4 +66,19 @@
6666
</Popover>
6767
</DemoBlock>
6868

69+
<DemoBlock Title="@Localizer["PopoversManualTitle"]"
70+
Introduction="@Localizer["PopoversManualIntro"]"
71+
Name="Manual">
72+
<section ignore>
73+
<ul class="ul-demo">
74+
<li>@((MarkupString)Localizer["PopoversManualDescLI1"].Value)</li>
75+
<li>@((MarkupString)Localizer["PopoversManualDescLI2"].Value)</li>
76+
</ul>
77+
</section>
78+
<Popover Title="@Title" Content="@Content" IsHtml="true" Trigger="manual" @ref="_popover">
79+
<i class="fa-solid fa-flag" style="cursor: pointer;"></i>
80+
</Popover>
81+
<Button Text="Trigger" OnClickWithoutRender="ToggleShow"></Button>
82+
</DemoBlock>
83+
6984
<AttributeTable Items="@GetAttributes()" />

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,16 @@ public sealed partial class Popovers
1818

1919
private string? _templateTitle;
2020

21+
private Popover? _popover;
22+
23+
private async Task ToggleShow()
24+
{
25+
if (_popover != null)
26+
{
27+
await _popover.Toggle();
28+
}
29+
}
30+
2131
/// <summary>
2232
/// <inheritdoc/>
2333
/// </summary>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,4 +88,19 @@
8888
</Tooltip>
8989
</DemoBlock>
9090

91+
<DemoBlock Title="@Localizer["TooltipsManualTitle"]"
92+
Introduction="@Localizer["TooltipsManualIntro"]"
93+
Name="Manual">
94+
<section ignore>
95+
<ul class="ul-demo">
96+
<li>@((MarkupString)Localizer["TooltipsManualDescLI1"].Value)</li>
97+
<li>@((MarkupString)Localizer["TooltipsManualDescLI2"].Value)</li>
98+
</ul>
99+
</section>
100+
<Tooltip Title="Manual trigger tooltip" Trigger="manual" @ref="_tooltip">
101+
<TooltipContent></TooltipContent>
102+
</Tooltip>
103+
<Button Text="Trigger" OnClickWithoutRender="ToggleShow"></Button>
104+
</DemoBlock>
105+
91106
<AttributeTable Items="@GetAttributes()" />

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,16 @@ public partial class Tooltips
2020

2121
private static string HtmlString => "This is <a href=\"www.blazor.zone\">Blazor</a> tooltip";
2222

23+
private Tooltip? _tooltip;
24+
25+
private async Task ToggleShow()
26+
{
27+
if (_tooltip != null)
28+
{
29+
await _tooltip.Toggle();
30+
}
31+
}
32+
2333
/// <summary>
2434
/// 获得属性方法
2535
/// </summary>

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,11 @@
108108
"TooltipsCustomClassIntro": "Set the custom style by setting the <code>CustomClass</code> parameter",
109109
"BootstrapTooltipIntro": "Try to make a new component that is more comfortable to use, you can use it early, the name of the component may be changed later",
110110
"BootstrapTooltipTips1": "Wrap other components or <code>HTML</code> elements through <code>BootstrapTooltip</code> so that the wrapped object has the function of <code>Tooltip</code>",
111-
"BootstrapTooltipTips2": "In this example, an icon is wrapped by <code>BootstrapTooltip</code>. When the mouse moves over the icon, the default <code>Tooltip</code> is displayed, which is easier and faster to use."
111+
"BootstrapTooltipTips2": "In this example, an icon is wrapped by <code>BootstrapTooltip</code>. When the mouse moves over the icon, the default <code>Tooltip</code> is displayed, which is easier and faster to use.",
112+
"TooltipsManualTitle": "Manual",
113+
"TooltipsManualIntro": "Use code to control the tooltip state by setting <code>Trigger=\"manual\"</code>",
114+
"TooltipsManualDescLI1": "The child component uses the cascade parameters to get the <code>Tooltip</code> instance and then calls its methods <code>Show</code> <code>Hide</code> <code>Toggle</code>",
115+
"TooltipsManualDescLI2": "Get the Tooltip instance through <code>@ref</code> and call its instances method"
112116
},
113117
"BootstrapBlazor.Server.Components.Samples.Toasts": {
114118
"ToastsTitle": "Toast Lightweight Popup",
@@ -348,7 +352,11 @@
348352
"PopoversCssClassTitle": "custom style",
349353
"PopoversCssClassIntro": "Customize the pop-up window by setting the <code>Popover</code> parameter <code>CssClass</code>",
350354
"PopoversCssClassDescription": "set up <code>Popover</code> parameter <code>CssClass=\"custom-popover\"</code> make custom styles",
351-
"PopoversCssClassButtonText": "Click to activate/deactivate"
355+
"PopoversCssClassButtonText": "Click to activate/deactivate",
356+
"PopoversManualTitle": "Manual",
357+
"PopoversManualIntro": "Use code to control the popover state by setting <code>Trigger=\"manual\"</code>",
358+
"PopoversManualDescLI1": "The child component uses the cascade parameters to get the <code>Popover</code> instance and then calls its methods <code>Show</code> <code>Hide</code> <code>Toggle</code>",
359+
"PopoversManualDescLI2": "Get the Popover instance through <code>@ref</code> and call its instances method"
352360
},
353361
"BootstrapBlazor.Server.Components.Samples.Progress": {
354362
"ProgressTitle": "Progress progress bar",

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,11 @@
108108
"TooltipsCustomClassIntro": "通过设置 <code>CustomClass</code> 参数进行自定义样式设置",
109109
"BootstrapTooltipIntro": "尝试新做一个用起来比较舒服的组件，可尝鲜使用，后期组件名字可能会更改",
110110
"BootstrapTooltipTips1": "通过 <code>BootstrapTooltip</code> 对其他组件或者 <code>HTML</code> 元素进行包裹，使其被包裹对象具有 <code>Tooltip</code> 功能",
111-
"BootstrapTooltipTips2": "本例中通过 <code>BootstrapTooltip</code> 包裹一个图标，鼠标移动到图标上时，显示预设 <code>Tooltip</code> 使用更简单快捷"
111+
"BootstrapTooltipTips2": "本例中通过 <code>BootstrapTooltip</code> 包裹一个图标，鼠标移动到图标上时，显示预设 <code>Tooltip</code> 使用更简单快捷",
112+
"TooltipsManualTitle": "手动控制状态",
113+
"TooltipsManualIntro": "通过设置 <code>Trigger=\"manual\"</code> 使用代码控制提示栏状态",
114+
"TooltipsManualDescLI1": "子组件使用级联参数得到 <code>Tooltip</code> 实例，然后调用其相应方法 <code>Show</code> <code>Hide</code> <code>Toggle</code>",
115+
"TooltipsManualDescLI2": "通过 <code>@ref</code> 获得 <code>Tooltip</code> 实例调用其对应方法"
112116
},
113117
"BootstrapBlazor.Server.Components.Samples.Toasts": {
114118
"ToastsTitle": "Toast 轻量弹窗",
@@ -348,7 +352,11 @@
348352
"PopoversCssClassTitle": "自定义样式",
349353
"PopoversCssClassIntro": "通过设置 <code>Popover</code> 参数 <code>CssClass</code> 对弹窗进行自定义样式",
350354
"PopoversCssClassDescription": "设置 <code>Popover</code> 参数 <code>CssClass=\"custom-popover\"</code> 进行自定义样式",
351-
"PopoversCssClassButtonText": "Click 激活/关闭"
355+
"PopoversCssClassButtonText": "Click 激活/关闭",
356+
"PopoversManualTitle": "手动控制状态",
357+
"PopoversManualIntro": "通过设置 <code>Trigger=\"manual\"</code> 使用代码控制提示栏状态",
358+
"PopoversManualDescLI1": "子组件使用级联参数得到 <code>Popover</code> 实例，然后调用其相应方法 <code>Show</code> <code>Hide</code> <code>Toggle</code>",
359+
"PopoversManualDescLI2": "通过 <code>@ref</code> 获得 <code>Popover</code> 实例调用其对应方法"
352360
},
353361
"BootstrapBlazor.Server.Components.Samples.Progress": {
354362
"ProgressTitle": "Progress 进度条",

‎src/BootstrapBlazor/BootstrapBlazor.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

33
<PropertyGroup>
4-
<Version>9.9.3-beta02</Version>
4+
<Version>9.9.3-beta03</Version>
55
</PropertyGroup>
66

77
<ItemGroup>

‎src/BootstrapBlazor/Components/Popover/Popover.razor‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44

55
<span @attributes="@AdditionalAttributes" class="@ClassString" tabindex="0" id="@Id"
66
data-bs-toggle="popover" data-bs-original-title="@Title"
7-
data-bs-selector="@Selector" data-bs-placement="@PlacementString" data-bs-custom-class="@CustomClassString"
7+
data-bs-selector="@Selector" data-bs-placement="@PlacementString"
8+
data-bs-custom-class="@CustomClassString"
89
data-bs-trigger="@Trigger" data-bs-delay="@Delay"
910
data-bs-offset="@Offset" data-bs-fallbackPlacements="@FallbackPlacementsString"
1011
data-bs-html="@HtmlString" data-bs-sanitize="@SanitizeString">

0 commit comments

Comments
 (0)