fix(TInputText): 提示飘走的问题 (#318)

tdesign-blazor · Aug 9, 2023 · 3893e21 · 3893e21
2 parents 88793ef + 016890f
commit 3893e21
Show file tree

Hide file tree

Showing 11 changed files with 166 additions and 152 deletions.
diff --git a/doc/TDesign.Docs.Shared/Components/PageLayout.razor b/doc/TDesign.Docs.Shared/Components/PageLayout.razor
@@ -6,7 +6,7 @@
     </p>
     <TTab>
         <TTabItem Title="示例">
-            <TLayout style="height:75vh;overflow-y:auto">
+            <TLayout style="height:70vh;overflow-y:auto">
                 <RightSideContent>
                     @if ( Anchors is not null )
                     {
@@ -26,7 +26,7 @@
             </TLayout>
         </TTabItem>
         <TTabItem Title="API">
-            <div style="height:75vh;overflow-y:auto">
+            <div style="height:70vh;overflow-y:auto">
                 @if(ComponentType is not null)
                 {
                     <ApiDocument ComponentType="@ComponentType"/>

diff --git a/doc/TDesign.Docs.Shared/Layouts/MainLayout.razor b/doc/TDesign.Docs.Shared/Layouts/MainLayout.razor
@@ -58,12 +58,12 @@ JS.InvokeVoidAsync("changeDark",false);
         </div>
     </LeftSideContent>
     <ChildContent>
-        <div style="padding: 0px 0px 0px 24px;height:88vh;">
+        <div style="padding: 0px 0px 0px 24px;height:80vh;">
             @Body
         </div>
     </ChildContent>
     <FooterContent>
-        <div style="text-align: center; font-size: 12px;">
+        <div style="text-align: center; line-height:1px;vertical-align:middle">
             <a href="https://beian.miit.gov.cn/" target="_blank" style="text-decoration:none">京ICP备2023000917号-1</a>
         </div>
     </FooterContent>

diff --git a/doc/TDesign.Docs.Shared/Pages/Components/Data/CardPage.razor b/doc/TDesign.Docs.Shared/Pages/Components/Data/CardPage.razor
@@ -179,6 +179,4 @@ Anchors="@(new[]{"极简卡片","悬停阴影","带顶部内容的卡片","带
 ")
     </CodeContent>
 </Example>
-    <div id="API"></div>
-<ComponentAPI Component="typeof(TCard)"></ComponentAPI>
 </PageLayout>
diff --git a/doc/TDesign.Docs.Shared/Pages/Components/Data/TooltipPage.razor b/doc/TDesign.Docs.Shared/Pages/Components/Data/TooltipPage.razor
@@ -4,9 +4,7 @@
             Description="用于文字提示的气泡框。"
             ComponentType="typeof(TTooltip)"
     Anchors="@(new[]{"基本用法","带箭头的文字提示","不带箭头的文字提示","带主题色的文字提示","不同的触发方式"})">
-<PageHeader Title="Tooltip 文字提示">
-    用于文字提示的气泡框。
-</PageHeader>
+
 
     <Example Title="基本用法">
         <RunContent>

diff --git a/doc/TDesign.Docs.Shared/Pages/Components/Input/InputTextAreaPage.razor b/doc/TDesign.Docs.Shared/Pages/Components/Input/InputTextAreaPage.razor
@@ -45,8 +45,7 @@ ComponentType="typeof(TInputTextArea)"
 ```
 ")
     </CodeContent>
-    </Example><div id="API"></div>
-<ComponentAPI Component="typeof(TInputTextArea)"></ComponentAPI>
+    </Example>
 </PageLayout>
 @code{
     string ReadonlyText{ get; set; }

diff --git a/doc/TDesign.Docs.Shared/Pages/Components/Input/SwitchPage.razor b/doc/TDesign.Docs.Shared/Pages/Components/Input/SwitchPage.razor
@@ -120,8 +120,7 @@ bool sizeValue2 { get; set; }
 bool sizeValue3 { get; set; }
 ```")
     </CodeContent>
-    </Example><div id="API"></div>
-<ComponentAPI Component="typeof(TSwitch)"></ComponentAPI>
+    </Example>
 </PageLayout>
 @code {
     bool sizeValue1 { get; set; } = true;

diff --git a/doc/TDesign.Docs.Shared/Pages/Components/Notification/PopConfirmPage.razor b/doc/TDesign.Docs.Shared/Pages/Components/Notification/PopConfirmPage.razor
@@ -2,9 +2,7 @@
 
 <PageLayout Title="Popconfirm 气泡确认框" Description="气泡确认框通常用于不会造成严重后果的二次确认场景，其会在点击元素上弹出浮层进行提示确认。气泡确认框没有蒙层，点击确认框以外的区域即可关闭。" ComponentType="typeof(TPopConfirm)"
 Anchors="@(new[]{"基础气泡确认框","不同图标的气泡确认框","带描述的气泡确认框"})">
-<PageHeader Title="Popconfirm 气泡确认框">
-    气泡确认框通常用于不会造成严重后果的二次确认场景，其会在点击元素上弹出浮层进行提示确认。气泡确认框没有蒙层，点击确认框以外的区域即可关闭。
-</PageHeader>
+
 <Example Title="基础气泡确认框">
     <Description>使用说明文字及操作按钮对较简单的操作进行二次确认。</Description>
     <RunContent>

diff --git a/doc/TDesign.Docs.Shared/Pages/Components/Notification/PopupPage.razor b/doc/TDesign.Docs.Shared/Pages/Components/Notification/PopupPage.razor
@@ -2,9 +2,6 @@
 <PageLayout Title="Popup 弹出层" Description="弹出层组件是其他弹窗类组件如气泡确认框实现的基础，当这些组件提供的能力不能满足定制需求时，可以在弹出层组件基础上封装" 
 ComponentType="typeof(TPopup)"
 Anchors="@(new[]{"基本弹出层","位置方向","触发方式"})">
-<PageHeader Title="Popup 弹出层">
-    弹出层组件是其他弹窗类组件如气泡确认框实现的基础，当这些组件提供的能力不能满足定制需求时，可以在弹出层组件基础上封装。
-</PageHeader>
 
 <Example Title="基本弹出层">
     <Description>由是让浮层内容和触发元素组成，两者均可自定义。设置 <code>Content</code> 自定义浮层内容。</Description>

diff --git a/src/TDesign/Components/Popup/PopperExtensions.cs b/src/TDesign/Components/Popup/PopperExtensions.cs
@@ -0,0 +1,24 @@
+using Microsoft.JSInterop;
+
+namespace TDesign;
+/// <summary>
+/// Popup 的 JS 扩展。
+/// </summary>
+public static class PopperExtensions
+{
+    /// <summary>
+    /// 调用 popup 组件
+    /// </summary>
+    /// <param name="js"></param>
+    /// <param name="selectorRef">触发 popup 组件的元素引用。</param>
+    /// <param name="popupRef">Popup组件元素的引用。</param>
+    /// <param name="options">Popup的配置。</param>
+    public static async ValueTask<Popper> InvokePopupAsync(this IJSRuntime js, ElementReference selectorRef, ElementReference popupRef, PopperOptions options,Func<Task> clickToHide)
+    {
+        var tdesignModule = await js.ImportTDesignModuleAsync("popup");
+
+        var popperModule = await tdesignModule.Module.InvokeAsync<IJSObjectReference>("popup.show", selectorRef, popupRef, options, DotNetObjectReference.Create(options),JSInvokeMethodFactory.Create(clickToHide));
+
+        return new(tdesignModule.Module, popperModule, options);
+    }
+}
diff --git a/src/TDesign/wwwroot/tdesign-blazor.css b/src/TDesign/wwwroot/tdesign-blazor.css
@@ -72,3 +72,4 @@
     left: 50%;
     transform: translate(-50%, -50%);
 }
+.t-input__tips{position:inherit!important;}