Skip to content

Commit cd0284c

Browse files
ArgoZhangArgoZhang
authored
doc(FullScreenButton): add FullScreenOption documentation (#6005)
* refactor: 增加全屏按钮源码映射配置 * chore: 更新本地化文件 * chore: 增加全屏按钮菜单 * refactor: 更新全屏服务文档 * doc: 增加全屏按钮示例 * doc: 更新文档 * feat: 增加 Selector 支持 * doc: 增加 FullScreenOption 说明 * test: 增加单元测试
1 parent 56b9907 commit cd0284c

File tree

12 files changed

+127
-24
lines changed

12 files changed

+127
-24
lines changed

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@page "/fullscreen-button"
2+
@inject IStringLocalizer<FullScreenButtons> Localizer
3+
4+
<h3>@Localizer["FullScreenButtonTitle"]</h3>
5+
6+
<h4>@((MarkupString)Localizer["FullScreenButtonIntro"].Value)</h4>
7+
8+
<DemoBlock Title="@Localizer["FullScreenButtonNormalTitle"]" Introduction="@Localizer["FullScreenButtonNormalIntro"]" Name="Normal">
9+
<section ignore>
10+
<ul class="ul-demo mb-3">
11+
<li>@((MarkupString)Localizer["FullScreenTitleLi1"].Value)</li>
12+
<li>@((MarkupString)Localizer["FullScreenTitleLi2"].Value)</li>
13+
</ul>
14+
</section>
15+
<FullScreenButton Icon="fa-solid fa-font-awesome"></FullScreenButton>
16+
</DemoBlock>
17+
18+
<AttributeTable Items="@GetAttributes()" />

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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.Samples;
7+
8+
/// <summary>
9+
/// 全屏按钮代码示例
10+
/// </summary>
11+
public partial class FullScreenButtons
12+
{
13+
/// <summary>
14+
/// GetAttributes
15+
/// </summary>
16+
/// <returns></returns>
17+
private static AttributeItem[] GetAttributes() =>
18+
[
19+
new()
20+
{
21+
Name = nameof(FullScreenButton.Icon),
22+
Description = "全屏图标",
23+
Type = "string",
24+
ValueList = " — ",
25+
DefaultValue = " — "
26+
},
27+
new()
28+
{
29+
Name = nameof(FullScreenButton.FullScreenExitIcon),
30+
Description = "退出全屏图标",
31+
Type = "string",
32+
ValueList = " — ",
33+
DefaultValue = " — "
34+
},
35+
new()
36+
{
37+
Name = nameof(FullScreenButton.TargetId),
38+
Description = "全屏元素 Id",
39+
Type = "string",
40+
ValueList = " — ",
41+
DefaultValue = " — "
42+
},
43+
new()
44+
{
45+
Name = nameof(FullScreenButton.Text),
46+
Description = "显示文字",
47+
Type = "string",
48+
ValueList = " — ",
49+
DefaultValue = " — "
50+
}
51+
];
52+
}

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

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,8 @@
77
<h4>@((MarkupString)Localizer["FullScreensDescription"].Value)</h4>
88

99
<DemoBlock Title="@Localizer["FullScreenNormalTitle"]" Introduction="@Localizer["FullScreenNormalIntro"]" Name="Normal">
10-
<Button Text="@Localizer["FullScreenNormalButtonText1"]" OnClick="() => FullScreenService.Toggle()"></Button>
11-
</DemoBlock>
12-
13-
<DemoBlock Title="@Localizer["FullScreenTitleTitle"]" Introduction="@Localizer["FullScreenTitleIntro"]" Name="Title">
1410
<section ignore>
15-
<ul class="ul-demo mb-3">
16-
<li>@((MarkupString)Localizer["FullScreenTitleLi1"].Value)</li>
17-
<li>@((MarkupString)Localizer["FullScreenTitleLi3"].Value)</li>
18-
</ul>
11+
<div>@((MarkupString)Localizer["FullScreenOptionDesc"].Value)</div>
1912
</section>
20-
<FullScreenButton Icon="fa-solid fa-font-awesome"></FullScreenButton>
13+
<Button Text="@Localizer["FullScreenNormalButtonText1"]" OnClick="() => FullScreenService.Toggle()"></Button>
2114
</DemoBlock>

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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.Samples;
7+
8+
/// <summary>
9+
/// FullScreen Service
10+
/// </summary>
11+
public partial class FullScreens
12+
{
13+
14+
}

‎src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1182,6 +1182,12 @@ void AddNotice(DemoMenuItem item)
11821182
Url = "flip-clock"
11831183
},
11841184
new()
1185+
{
1186+
IsNew = true,
1187+
Text = Localizer["FullScreenButton"],
1188+
Url = "fullscreen-button"
1189+
},
1190+
new()
11851191
{
11861192
Text = Localizer["Light"],
11871193
Url = "light"

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

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2251,14 +2251,18 @@
22512251
"BootstrapBlazor.Server.Components.Samples.FullScreens": {
22522252
"FullScreensTitle": "FullScreen",
22532253
"FullScreensDescription": "Human-computer interaction by injecting service calls <code>Show</code> method pop-ups",
2254-
"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:",
22552254
"FullScreenNormalTitle": "Basic usage",
22562255
"FullScreenNormalIntro": "The entire page is fully screened by calling the <code>Show</code> method that <code>FullScreenService</code> service instance",
22572256
"FullScreenNormalButtonText1": "FullScreen",
2258-
"FullScreenTitleTitle": "Button",
2259-
"FullScreenTitleIntro": "The full screen of the entire web page is component <code>FullScreenButton</code>",
2260-
"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",
2261-
"FullScreenTitleLi3": "Use the <code>Text</code> property to set current page title"
2257+
"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>"
2258+
},
2259+
"BootstrapBlazor.Server.Components.Samples.FullScreenButtons": {
2260+
"FullScreenButtonTitle": "FullScreenButton",
2261+
"FullScreenButtonIntro": "Use the <code>FullScreenButton</code> component to make the entire web page or a specified element full screen",
2262+
"FullScreenButtonNormalTitle": "Basic usage",
2263+
"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",
2264+
"FullScreenTitleLi1": "Set the fullscreen element ID through the <code>TargetId</code> parameter",
2265+
"FullScreenTitleLi2": "Set the current page title text through the <code>Text</code> property"
22622266
},
22632267
"BootstrapBlazor.Server.Components.Samples.Buttons": {
22642268
"Title": "Button",
@@ -4923,7 +4927,8 @@
49234927
"OtpInput": "OtpInput",
49244928
"TotpService": "ITotpService",
49254929
"VideoDevice": "IVideoDevice",
4926-
"AudioDevice": "IAudioDevice"
4930+
"AudioDevice": "IAudioDevice",
4931+
"FullScreenButton": "FullScreenButton"
49274932
},
49284933
"BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
49294934
"TablesHeaderTitle": "Header grouping function",

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

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

‎src/BootstrapBlazor.Server/docs.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,8 @@
232232
"opt-input": "OtpInputs",
233233
"otp-service": "OtpServices",
234234
"video-device": "VideoDevices",
235-
"audio-device": "AudioDevices"
235+
"audio-device": "AudioDevices",
236+
"fullscreen-button": "FullScreenButtons"
236237
},
237238
"video": {
238239
"table": "BV1ap4y1x7Qn?p=1",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ namespace BootstrapBlazor.Components;
1111
public partial class FullScreenButton
1212
{
1313
/// <summary>
14-
/// 获得/设置 退出全屏图标 默认 fa-solid fa-maximize
14+
/// 获得/设置 全屏图标 默认 fa-solid fa-maximize
1515
/// </summary>
1616
[Parameter]
1717
[Obsolete("已弃用，请使用 Icon 参数；Deprecated. Please use Icon parameter")]

‎src/BootstrapBlazor/Components/FullScreen/FullScreenOption.cs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,9 @@ public class FullScreenOption
1919
/// 获得/设置 要全屏的 HTML Element Id
2020
/// </summary>
2121
public string? Id { get; set; }
22+
23+
/// <summary>
24+
/// 获得/设置 要全屏的 HTML css selector
25+
/// </summary>
26+
public string? Selector { get; set; }
2227
}

0 commit comments

Comments
 (0)