doc(FullScreenButton): add FullScreenOption documentation

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

@@ -0,0 +1,18 @@
+@page "/fullscreen-button"
+@inject IStringLocalizer<FullScreenButtons> Localizer
+
+<h3>@Localizer["FullScreenButtonTitle"]</h3>
+
+<h4>@((MarkupString)Localizer["FullScreenButtonIntro"].Value)</h4>
+
+<DemoBlock Title="@Localizer["FullScreenButtonNormalTitle"]" Introduction="@Localizer["FullScreenButtonNormalIntro"]" Name="Normal">
+    <section ignore>
+        <ul class="ul-demo mb-3">
+            <li>@((MarkupString)Localizer["FullScreenTitleLi1"].Value)</li>
+            <li>@((MarkupString)Localizer["FullScreenTitleLi2"].Value)</li>
+        </ul>
+    </section>
+    <FullScreenButton Icon="fa-solid fa-font-awesome"></FullScreenButton>
+</DemoBlock>
+
+<AttributeTable Items="@GetAttributes()" />

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

@@ -0,0 +1,52 @@
+// 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(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// 全屏按钮代码示例
+/// </summary>
+public partial class FullScreenButtons
+{
+    /// <summary>
+    /// GetAttributes
+    /// </summary>
+    /// <returns></returns>
+    private static AttributeItem[] GetAttributes() =>
+    [
+        new()
+        {
+            Name = nameof(FullScreenButton.Icon),
+            Description = "全屏图标",
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(FullScreenButton.FullScreenExitIcon),
+            Description = "退出全屏图标",
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(FullScreenButton.TargetId),
+            Description = "全屏元素 Id",
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(FullScreenButton.Text),
+            Description = "显示文字",
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        }
+    ];
+}

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

@@ -7,15 +7,8 @@
 <h4>@((MarkupString)Localizer["FullScreensDescription"].Value)</h4>
 
 <DemoBlock Title="@Localizer["FullScreenNormalTitle"]" Introduction="@Localizer["FullScreenNormalIntro"]" Name="Normal">
-    <Button Text="@Localizer["FullScreenNormalButtonText1"]" OnClick="() => FullScreenService.Toggle()"></Button>
-</DemoBlock>
-
-<DemoBlock Title="@Localizer["FullScreenTitleTitle"]" Introduction="@Localizer["FullScreenTitleIntro"]" Name="Title">
     <section ignore>
-        <ul class="ul-demo mb-3">
-            <li>@((MarkupString)Localizer["FullScreenTitleLi1"].Value)</li>
-            <li>@((MarkupString)Localizer["FullScreenTitleLi3"].Value)</li>
-        </ul>
+        <div>@((MarkupString)Localizer["FullScreenOptionDesc"].Value)</div>
     </section>
-    <FullScreenButton Icon="fa-solid fa-font-awesome"></FullScreenButton>
+    <Button Text="@Localizer["FullScreenNormalButtonText1"]" OnClick="() => FullScreenService.Toggle()"></Button>
 </DemoBlock>

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

@@ -0,0 +1,14 @@
+// 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(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// FullScreen Service
+/// </summary>
+public partial class FullScreens
+{
+
+}

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -1182,6 +1182,12 @@ void AddNotice(DemoMenuItem item)
                     Url = "flip-clock"
                 },
                 new()
+                {
+                    IsNew = true,
+                    Text = Localizer["FullScreenButton"],
+                    Url = "fullscreen-button"
+                },
+                new()
                 {
                     Text = Localizer["Light"],
                     Url = "light"

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

@@ -2251,14 +2251,18 @@
   "BootstrapBlazor.Server.Components.Samples.FullScreens": {
     "FullScreensTitle": "FullScreen",
     "FullScreensDescription": "Human-computer interaction by injecting service calls <code>Show</code> method pop-ups",
-    "Tips": "This component provides functionality in the form of injection services, the user experience is very comfortable to use, anytime, anywhere calls, need to be built into the page using this component <code>FullScreen</code> component, or in the main layout component of <code>MainLayout</code>, the sample code is as follows:",
     "FullScreenNormalTitle": "Basic usage",
     "FullScreenNormalIntro": "The entire page is fully screened by calling the <code>Show</code> method that <code>FullScreenService</code> service instance",
     "FullScreenNormalButtonText1": "FullScreen",
-    "FullScreenTitleTitle": "Button",
-    "FullScreenTitleIntro": "The full screen of the entire web page is component <code>FullScreenButton</code>",
-    "FullScreenTitleLi1": "The button default icon can be set through the <code>ButtonIcon</code>, and the full-screen icon can be set through the <code>FullScreenIcon</code> property",
-    "FullScreenTitleLi3": "Use the <code>Text</code> property to set current page title"
+    "FullScreenOptionDesc": "You can set the full-screen window by setting <code>FullScreenOption</code>, and specify the page element by <code>ElementReference</code> <code>Id</code> <code>Selector</code>"
+  },
+  "BootstrapBlazor.Server.Components.Samples.FullScreenButtons": {
+    "FullScreenButtonTitle": "FullScreenButton",
+    "FullScreenButtonIntro": "Use the <code>FullScreenButton</code> component to make the entire web page or a specified element full screen",
+    "FullScreenButtonNormalTitle": "Basic usage",
+    "FullScreenButtonNormalIntro": "You can set the default icon of the button through <code>Icon</code>, and set the icon when exiting full screen through the <code>FullScreenExitIcon</code> property",
+    "FullScreenTitleLi1": "Set the fullscreen element ID through the <code>TargetId</code> parameter",
+    "FullScreenTitleLi2": "Set the current page title text through the <code>Text</code> property"
   },
   "BootstrapBlazor.Server.Components.Samples.Buttons": {
     "Title": "Button",
@@ -4923,7 +4927,8 @@
     "OtpInput": "OtpInput",
     "TotpService": "ITotpService",
     "VideoDevice": "IVideoDevice",
-    "AudioDevice": "IAudioDevice"
+    "AudioDevice": "IAudioDevice",
+    "FullScreenButton": "FullScreenButton"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",

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

@@ -2251,14 +2251,18 @@
   "BootstrapBlazor.Server.Components.Samples.FullScreens": {
     "FullScreensTitle": "FullScreen 全屏",
     "FullScreensDescription": "通过注入服务调用 <code>Show</code> 方法弹出窗口进行人机交互",
-    "Tips": "本组件使用注入服务的形式提供功能，使用时用户体验效果非常舒适，随时随地的调用，需要在使用本组件的页面中内置 <code>FullScreen</code> 组件，或者在 <code>MainLayout</code> 主布局组件中内置，示例代码如下：",
     "FullScreenNormalTitle": "基础用法",
     "FullScreenNormalIntro": "通过调用<code>FullScreenService</code> 服务实例的 <code>Show</code> 方法将整个网页进行全屏化",
     "FullScreenNormalButtonText1": "全屏",
-    "FullScreenTitleTitle": "按钮组件",
-    "FullScreenTitleIntro": "通过 <code>FullScreenButton</code> 组件将整个网页进行全屏化",
-    "FullScreenTitleLi1": "可通过 <code>ButtonIcon</code> 设置按钮默认图标，通过 <code>FullScreenIcon</code> 属性设置全屏时图标",
-    "FullScreenTitleLi3": "通过 <code>Text</code> 属性设置当前页标题文字"
+    "FullScreenOptionDesc": "通过设置 <code>FullScreenOption</code> 对全屏化的窗口进行设置，可通过 <code>ElementReference</code> <code>Id</code> <code>Selector</code> 指定页面元素"
+  },
+  "BootstrapBlazor.Server.Components.Samples.FullScreenButtons": {
+    "FullScreenButtonTitle": "FullScreenButton 全屏按钮",
+    "FullScreenButtonIntro": "通过 <code>FullScreenButton</code> 组件将整个网页或者指定元素进行全屏化",
+    "FullScreenButtonNormalTitle": "基础用法",
+    "FullScreenButtonNormalIntro": "可通过 <code>Icon</code> 设置按钮默认图标，通过 <code>FullScreenExitIcon</code> 属性设置退出全屏时图标",
+    "FullScreenTitleLi1": "通过 <code>TargetId</code> 参数设置全屏元素 Id",
+    "FullScreenTitleLi2": "通过 <code>Text</code> 属性设置当前页标题文字"
   },
   "BootstrapBlazor.Server.Components.Samples.Buttons": {
     "Title": "Button 按钮",
@@ -4923,7 +4927,8 @@
     "OtpInput": "验证码输入框 OtpInput",
     "TotpService": "时间密码验证服务 ITotpService",
     "VideoDevice": "视频设备服务 IVideoDevice",
-    "AudioDevice": "音频设备服务 IAudioDevice"
+    "AudioDevice": "音频设备服务 IAudioDevice",
+    "FullScreenButton": "全屏按钮 FullScreenButton"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",

src/BootstrapBlazor.Server/docs.json

@@ -232,7 +232,8 @@
     "opt-input": "OtpInputs",
     "otp-service": "OtpServices",
     "video-device": "VideoDevices",
-    "audio-device": "AudioDevices"
+    "audio-device": "AudioDevices",
+    "fullscreen-button": "FullScreenButtons"
   },
   "video": {
     "table": "BV1ap4y1x7Qn?p=1",

src/BootstrapBlazor/Components/FullScreen/FullScreenButton.razor.cs

@@ -11,7 +11,7 @@ namespace BootstrapBlazor.Components;
 public partial class FullScreenButton
 {
     /// <summary>
-    /// 获得/设置 退出全屏图标 默认 fa-solid fa-maximize
+    /// 获得/设置 全屏图标 默认 fa-solid fa-maximize
     /// </summary>
     [Parameter]
     [Obsolete("已弃用，请使用 Icon 参数；Deprecated. Please use Icon parameter")]

src/BootstrapBlazor/Components/FullScreen/FullScreenOption.cs

@@ -19,4 +19,9 @@ public class FullScreenOption
     /// 获得/设置 要全屏的 HTML Element Id
     /// </summary>
     public string? Id { get; set; }
+
+    /// <summary>
+    /// 获得/设置 要全屏的 HTML css selector
+    /// </summary>
+    public string? Selector { get; set; }
 }

src/BootstrapBlazor/wwwroot/modules/fullscreen.js

@@ -6,6 +6,9 @@ export async function toggle(options) {
     if (options.id) {
         el = document.getElementById(options.id);
     }
+    else if (options.selector) {
+        el = document.querySelector(options.selector);
+    }
     else if (isElement(options.element)) {
         el = options.element;
     }

test/UnitTest/Services/FullScreenServiceTest.cs

@@ -88,9 +88,10 @@ public async Task Toggle_Ok()
     [Fact]
     public void FullScreenOption_Ok()
     {
-        var option = new FullScreenOption() { Element = new("test01", null), Id = "test" };
+        var option = new FullScreenOption() { Element = new("test01", null), Id = "test", Selector = "test-selector" };
         Assert.NotNull(option.Id);
         Assert.Null(option.Element.Context);
+        Assert.Null(option.Selector);
     }
 
     private class MockFullScreen : ComponentBase