feat(IFrame): update default style (#4556)

* chore: 增加字典

* doc: 增加 IFrame 文档链接

* feat: 增加 Height 参数

* doc: 增加 IFrame 示例

* doc: 增加参数文档

* refactor: 更新文档

* chore: 更新 IFrame 默认样式

Author: ArgoZhang

exclusion.dic

@@ -107,3 +107,4 @@ noselect
 Urls
 Pharmacode
 bluetooth
+iframe

src/BootstrapBlazor.Server/Components/Samples/IFrames.razor

@@ -0,0 +1,14 @@
+@page "/iframe"
+@inject IStringLocalizer<IFrames> Localizer
+
+<h3>@Localizer["IFrameTitle"]</h3>
+
+<h4>@Localizer["IFrameDescription"]</h4>
+
+<DemoBlock Title="@Localizer["IFrameNormalTitle"]"
+           Introduction="@Localizer["IFrameNormalIntro"]" Height="600px"
+           Name="Normal">
+    <IFrame Src="https://pro.blazor.zone"></IFrame>
+</DemoBlock>
+
+<AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Server/Components/Samples/IFrames.razor.cs

@@ -0,0 +1,40 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// IFrame 示例文档
+/// </summary>
+public partial class IFrames
+{
+    private AttributeItem[] GetAttributes() =>
+    [
+        new()
+        {
+            Name = "Src",
+            Description = Localizer["AttributeSrc"],
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "Data",
+            Description = Localizer["AttributeData"],
+            Type = "object",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "OnPostDataAsync",
+            Description = Localizer["AttributeOnPostDataAsync"],
+            Type = "Func<object?, Task>",
+            ValueList = " — ",
+            DefaultValue = " — "
+        }
+    ];
+}

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -627,6 +627,11 @@ void AddData(DemoMenuItem item)
                     Url = "icon"
                 },
                 new()
+                {
+                    Text = Localizer["IFrame"],
+                    Url = "iframe"
+                },
+                new()
                 {
                     Text = Localizer["LinkButton"],
                     Url = "link-button"

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

@@ -4635,6 +4635,7 @@
     "ListGroup": "ListGroup",
     "Locator": "IpLocatorFactory",
     "Icon": "Icon",
+    "IFrame": "IFrame",
     "ImageViewer": "ImageViewer",
     "FileIcon": "FileIcon",
     "Popover": "Popover",
@@ -6827,5 +6828,14 @@
   "BootstrapBlazor.Server.Data.CustomValidateCollectionModel": {
     "Telephone1": "Telephone 1",
     "Telephone2": "Telephone 2"
+  },
+  "BootstrapBlazor.Server.Components.Samples.IFrames": {
+    "IFrameTitle": "IFrame",
+    "IFrameDescription": "Allows embedding documents, videos and interactive media in a page. By doing so, a secondary page can be displayed on the main page. The iFrame element allows including content from other sources, it can integrate content anywhere on the page.",
+    "IFrameNormalTitle": "Basic usage",
+    "IFrameNormalIntro": "Use the <code>Src</code> parameter to set the URL of other website pages and inline their content into this page",
+    "AttributeSrc": "Frame load url",
+    "AttributeData": "Data passed",
+    "AttributeOnPostDataAsync": "Passed back data"
   }
 }

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

@@ -4635,6 +4635,7 @@
     "ListGroup": "列表框 ListGroup",
     "Locator": "位置定位 IpLocatorFactory",
     "Icon": "图标 Icon",
+    "IFrame": "内嵌框架 IFrame",
     "ImageViewer": "图片 ImageViewer",
     "FileIcon": "文件图标 FileIcon",
     "Popover": "弹出窗 Popover",
@@ -6827,5 +6828,14 @@
   "BootstrapBlazor.Server.Data.CustomValidateCollectionModel": {
     "Telephone1": "联系电话1",
     "Telephone2": "联系电话2"
+  },
+  "BootstrapBlazor.Server.Components.Samples.IFrames": {
+    "IFrameTitle": "IFrame 内联框架",
+    "IFrameDescription": "允许在页面中嵌入文档、视频和交互式媒体。 通过这样做可以在主页上显示一个辅助页面。 iFrame 元素允许包含来自其他源的内容，它可以在页面的任何地方集成内容。",
+    "IFrameNormalTitle": "基础用法",
+    "IFrameNormalIntro": "通过 <code>Src</code>参数设置其他网站页面地址，内联其内容到本页面中",
+    "AttributeSrc": "Frame 加载网页路径",
+    "AttributeData": "传递的数据",
+    "AttributeOnPostDataAsync": "Frame 加载页面传递过来的数据"
   }
 }

src/BootstrapBlazor/Components/IFrame/IFrame.razor.scss

@@ -1,4 +1,4 @@
-.bb-frame {
-    height: calc(100% - 8px);
+.bb-frame {
+    height: 100%;
     width: 100%;
 }