From 72aeee206425f61928eed495788c415b04cc013e Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Wed, 7 Sep 2022 10:42:22 +0800 Subject: [PATCH 1/4] =?UTF-8?q?doc:=20=E6=A0=BC=E5=BC=8F=E5=8C=96=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Samples/Tooltips.razor | 60 ++++++++----------- .../Samples/Tooltips.razor.cs | 24 +++++--- 2 files changed, 41 insertions(+), 43 deletions(-) diff --git a/src/BootstrapBlazor.Shared/Samples/Tooltips.razor b/src/BootstrapBlazor.Shared/Samples/Tooltips.razor index e23457a86..0d765b8fb 100644 --- a/src/BootstrapBlazor.Shared/Samples/Tooltips.razor +++ b/src/BootstrapBlazor.Shared/Samples/Tooltips.razor @@ -28,42 +28,32 @@ -
-
- -
-
- -
-
- -
-
- -
+
+
+
+
+ +
+
+ +
+
+ +
+
- -@code { - private string TopString => "在上方"; - - private string LeftString => "在左方"; - - private string RightString => "在右方"; - - private string BottomString => "在下方"; -} diff --git a/src/BootstrapBlazor.Shared/Samples/Tooltips.razor.cs b/src/BootstrapBlazor.Shared/Samples/Tooltips.razor.cs index 844cad573..13ecc36c1 100644 --- a/src/BootstrapBlazor.Shared/Samples/Tooltips.razor.cs +++ b/src/BootstrapBlazor.Shared/Samples/Tooltips.razor.cs @@ -11,19 +11,27 @@ namespace BootstrapBlazor.Shared.Samples; /// public partial class Tooltips { + private static string TopString => "在上方"; + + private static string LeftString => "在左方"; + + private static string RightString => "在右方"; + + private static string BottomString => "在下方"; + /// /// 获得属性方法 /// /// protected IEnumerable GetAttributes() => new AttributeItem[] { - // TODO: 移动到数据库中 - new AttributeItem() { - Name = "Placement", - Description = "位置", - Type = "Placement", - ValueList = "Auto / Top / Left / Bottom / Right", - DefaultValue = "Auto" - } + // TODO: 移动到数据库中 + new AttributeItem() { + Name = "Placement", + Description = "位置", + Type = "Placement", + ValueList = "Auto / Top / Left / Bottom / Right", + DefaultValue = "Auto" + } }; } -- Gitee From 0c6dd8e70179489add92c8a9eb122e1d7fba6d5a Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Wed, 7 Sep 2022 10:42:42 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20BootstrapToolt?= =?UTF-8?q?ip=20=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Tooltip/BootstrapTooltip.razor | 8 ++ .../Tooltip/BootstrapTooltip.razor.cs | 118 ++++++++++++++++++ 2 files changed, 126 insertions(+) create mode 100644 src/BootstrapBlazor/Components/Tooltip/BootstrapTooltip.razor create mode 100644 src/BootstrapBlazor/Components/Tooltip/BootstrapTooltip.razor.cs diff --git a/src/BootstrapBlazor/Components/Tooltip/BootstrapTooltip.razor b/src/BootstrapBlazor/Components/Tooltip/BootstrapTooltip.razor new file mode 100644 index 000000000..159fdc26e --- /dev/null +++ b/src/BootstrapBlazor/Components/Tooltip/BootstrapTooltip.razor @@ -0,0 +1,8 @@ +@namespace BootstrapBlazor.Components +@inherits IdComponentBase + + + + @ChildContent + + diff --git a/src/BootstrapBlazor/Components/Tooltip/BootstrapTooltip.razor.cs b/src/BootstrapBlazor/Components/Tooltip/BootstrapTooltip.razor.cs new file mode 100644 index 000000000..03c7be616 --- /dev/null +++ b/src/BootstrapBlazor/Components/Tooltip/BootstrapTooltip.razor.cs @@ -0,0 +1,118 @@ +// 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/ + +namespace BootstrapBlazor.Components; + +/// +/// BootstrapTooltip 组件 +/// +public partial class BootstrapTooltip : IAsyncDisposable +{ + /// + /// 获得/设置 显示文字是否为 Html 默认为 false + /// + [Parameter] + public bool IsHtml { get; set; } + + /// + /// 获得/设置 位置 默认为 Placement.Top + /// + [Parameter] + public Placement Placement { get; set; } = Placement.Top; + + /// + /// 获得/设置 显示文字 + /// + [Parameter] + [NotNull] + public string? Title { get; set; } + + /// + /// 获得/设置 自定义样式 默认 null + /// + /// 由 data-bs-custom-class 实现 + [Parameter] + [NotNull] + public string? CustomClass { get; set; } + + /// + /// 获得/设置 触发方式 可组合 click focus hover 默认为 focus hover + /// + [Parameter] + public string Trigger { get; set; } = "focus hover"; + + /// + /// 获得/设置 子组件 + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + /// + /// OnInitialized 方法 + /// + protected override void OnInitialized() + { + base.OnInitialized(); + } + + /// + /// OnParametersSet 方法 + /// + protected override void OnParametersSet() + { + base.OnParametersSet(); + + Title ??= ""; + CustomClass ??= ""; + } + + /// + /// OnAfterRenderAsync 方法 + /// + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await base.OnAfterRenderAsync(firstRender); + + if (firstRender) + { + await ExecuteTooltip(); + } + } + + /// + /// 显示 Tooltip 方法 + /// + /// + public ValueTask ExecuteTooltip() => JSRuntime.InvokeVoidAsync(Id, "bb_tooltip", "", Title, Placement.ToDescriptionString(), IsHtml, Trigger, CustomClass); + + /// + /// + /// + /// + public ValueTask DisposeTooltip() => JSRuntime.InvokeVoidAsync(Id, "bb_tooltip", "dispose"); + + /// + /// DisposeAsync 方法 + /// + /// + /// + protected virtual async ValueTask DisposeAsync(bool disposing) + { + if (disposing) + { + await DisposeTooltip(); + } + } + + /// + /// DisposeAsync 方法 + /// + /// + public async ValueTask DisposeAsync() + { + await DisposeAsync(true); + GC.SuppressFinalize(this); + } +} -- Gitee From 8f3adfe3830ffeb2215f32660313856c2b819369 Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Wed, 7 Sep 2022 10:53:04 +0800 Subject: [PATCH 3/4] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Shared/Samples/Tooltips.razor | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/BootstrapBlazor.Shared/Samples/Tooltips.razor b/src/BootstrapBlazor.Shared/Samples/Tooltips.razor index 0d765b8fb..ee0d807f7 100644 --- a/src/BootstrapBlazor.Shared/Samples/Tooltips.razor +++ b/src/BootstrapBlazor.Shared/Samples/Tooltips.razor @@ -56,4 +56,15 @@
+ +

通过 BootstrapTooltip 对其他组件或者 HTML 元素进行包裹，使其被包裹对象具有 Tooltip 功能

+

本例中通过 BootstrapTooltip 包裹一个图标，鼠标移动到图标上时，显示预设 Tooltip 使用更简单快捷

+ 
<BootstrapTooltip Title="Test tooltip">
+    <i class="fa-solid fa-flag" />
+</BootstrapTooltip>
+ + + + + -- Gitee From 56ce35799d9bdd00a15e24cb9a88017c16df5d13 Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Wed, 7 Sep 2022 10:53:35 +0800 Subject: [PATCH 4/4] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=20Update=20?= =?UTF-8?q?=E6=A0=87=E8=AF=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs | 1 + 1 file changed, 1 insertion(+) diff --git a/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs b/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs index 54887b4d4..42bae2425 100644 --- a/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs +++ b/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs @@ -927,6 +927,7 @@ public sealed partial class NavMenu }, new() { + IsUpdate = true, Text = Localizer["Tooltip"], Url = "tooltips" } -- Gitee