From 54a180c81f0d2c5a75a019d7ec97826ee1a63a9f Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 11 Aug 2024 14:29:21 +0800 Subject: [PATCH] doc(DrawerService): add documentation for DrawerService (#4027) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: 移动 Icon 组件位置 * doc: 更新文档配置 * doc: 增加 DrawerService 文档 * doc: 增加抽屉服务文档 * doc: 更新文档状态 --- .../Samples/BootstrapBlazorIcons.razor | 29 ++++++++++ .../{Icons => }/BootstrapBlazorIcons.razor.cs | 2 +- .../Components/Samples/DrawerServices.razor | 54 +++++++++++++++++++ .../Samples/DrawerServices.razor.css | 7 +++ .../Samples/Icons/BootstrapBlazorIcons.razor | 26 --------- .../Icons/BootstrapBlazorIcons.razor.css | 8 --- .../Extensions/MenusLocalizerExtensions.cs | 42 +++++---------- src/BootstrapBlazor.Server/Locales/en-US.json | 5 +- src/BootstrapBlazor.Server/Locales/zh-CN.json | 5 +- src/BootstrapBlazor.Server/docs.json | 2 +- 10 files changed, 110 insertions(+), 70 deletions(-) create mode 100644 src/BootstrapBlazor.Server/Components/Samples/BootstrapBlazorIcons.razor rename src/BootstrapBlazor.Server/Components/Samples/{Icons => }/BootstrapBlazorIcons.razor.cs (85%) create mode 100644 src/BootstrapBlazor.Server/Components/Samples/DrawerServices.razor create mode 100644 src/BootstrapBlazor.Server/Components/Samples/DrawerServices.razor.css delete mode 100644 src/BootstrapBlazor.Server/Components/Samples/Icons/BootstrapBlazorIcons.razor delete mode 100644 src/BootstrapBlazor.Server/Components/Samples/Icons/BootstrapBlazorIcons.razor.css diff --git a/src/BootstrapBlazor.Server/Components/Samples/BootstrapBlazorIcons.razor b/src/BootstrapBlazor.Server/Components/Samples/BootstrapBlazorIcons.razor new file mode 100644 index 00000000000..3e4935cc602 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/BootstrapBlazorIcons.razor @@ -0,0 +1,29 @@ +@page "/icon" +@inject IStringLocalizer Localizer + +

@Localizer["IconsTitle"]

+ +

@Localizer["IconsDescription"]

+ + + + + + + + + + + + + + + + img + + diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/BootstrapBlazorIcons.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/BootstrapBlazorIcons.razor.cs similarity index 85% rename from src/BootstrapBlazor.Server/Components/Samples/Icons/BootstrapBlazorIcons.razor.cs rename to src/BootstrapBlazor.Server/Components/Samples/BootstrapBlazorIcons.razor.cs index c42c186f141..964e7cc6bd8 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Icons/BootstrapBlazorIcons.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/BootstrapBlazorIcons.razor.cs @@ -2,7 +2,7 @@ // 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.Server.Components.Samples.Icons; +namespace BootstrapBlazor.Server.Components.Samples; /// /// Icon 组件 diff --git a/src/BootstrapBlazor.Server/Components/Samples/DrawerServices.razor b/src/BootstrapBlazor.Server/Components/Samples/DrawerServices.razor new file mode 100644 index 00000000000..b68e7e9a055 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/DrawerServices.razor @@ -0,0 +1,54 @@ +@page "/drawer-service" +@layout MainLayout +@inject IStringLocalizer Localizer + +

抽屉弹窗服务 DrawerService

+

组件库内置了抽屉弹窗服务

+ +

1. 服务注入

+ +
[Inject]
+[NotNull]
+private DrawerService? DrawerService { get; set; }
+ +

2. 使用服务

+

调用 DrawerService 实例方法 Show 即可

+ +
DrawerService.Show(new DrawerOption()
+{
+    ChildContent = BootstrapDynamicComponent.Create<Count>().Render()
+})
+ +

3. 设计思路

+ +
    +
  • 弹窗服务仅仅负责弹出弹窗，并且提供 Close 关窗功能
    • +
  • 显示内容通过 DrawerOption 类参数 ChildContent 自行指定
    • +
  • 其他更多参数可参见 DrawerOption 类定义 [传送门]
    • +
+ +

4. 常见问题

+ +
+ +

在使用弹窗的过程中基本都是需要根据自己的业务需求放置一些业务逻辑处理按钮的，比如放置 关闭 保存 应用 等等，这些按钮逻辑有些是需要处理业务逻辑结束后，根据业务逻辑处理结果决定是否关闭弹窗，代码关闭弹窗我们组件库内置了一下几种办法

+ +
    +
  • 弹窗关闭按钮 DialogCloseButton
    • +

    这个组件时专门为弹窗设计的按钮组件，此组件内置了关闭所在弹窗功能，无需任何代码

    + 
    <DialogCloseButton>
    +

    业务逻辑可使用 OnClick 或者 OnClickWithoutRender 处理，结束后自动关闭弹窗

    +
  • 关闭回调方法
    • + 
    [CascadingParameter]
+private Func<Task>? OnCloseAsync { get; set; }
    +

    弹窗内部任何组件中均可以通过此级联参数获得一个关闭弹窗的方法，可以根据自己的业务逻辑需求自行调用关闭弹窗

    +

    注意：级联参数定义可以随意不一定是 OnCloseAsync 也可以根据自己需要更改为 CloseDrawerAsync

    +
+
    +
  • 关闭按钮 DialogCloseButton
    • +

    点击后直接关窗，不进行业务逻辑处理

    +
  • 保存按钮 DialogSaveButton
    • +

    点击后触发 Table 组件内置的保存逻辑，此按钮实际为 submit 按钮，提交表单后触发表单验证逻辑，通过数据有效性验证后调用表格组件 OnSaveAsync 回调方法，控制权再次转移到开发者

    +
+ +
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DrawerServices.razor.css b/src/BootstrapBlazor.Server/Components/Samples/DrawerServices.razor.css new file mode 100644 index 00000000000..5886c88fcfa --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/DrawerServices.razor.css @@ -0,0 +1,7 @@ +::deep .legend { + font-weight: bolder; +} + +::deep .groupbox .ul-demo > li { + font-weight: bolder; +} diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/BootstrapBlazorIcons.razor b/src/BootstrapBlazor.Server/Components/Samples/Icons/BootstrapBlazorIcons.razor deleted file mode 100644 index c9b07b51061..00000000000 --- a/src/BootstrapBlazor.Server/Components/Samples/Icons/BootstrapBlazorIcons.razor +++ /dev/null @@ -1,26 +0,0 @@ -@page "/icon" -@inject IStringLocalizer Localizer - -

@Localizer["IconsTitle"]

- -

@Localizer["IconsDescription"]

- - -
- -
- - - -
- -
- - - -
- - img - -
- diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/BootstrapBlazorIcons.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Icons/BootstrapBlazorIcons.razor.css deleted file mode 100644 index d0caa921d7b..00000000000 --- a/src/BootstrapBlazor.Server/Components/Samples/Icons/BootstrapBlazorIcons.razor.css +++ /dev/null @@ -1,8 +0,0 @@ -.bb-icon-list { - display: flex; -} - -::deep .bb-icon { - --bb-icon-width: 24px; - --bb-icon-color: var(--bs-body-color); -} diff --git a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs index 211fc14aeb6..4d75bae582c 100644 --- a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs +++ b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs @@ -163,7 +163,6 @@ void AddOtherComponent(DemoMenuItem item) }, new() { - IsNew = true, Text = Localizer["Splitting"], Url = "splitting" }, @@ -332,7 +331,6 @@ void AddForm(DemoMenuItem item) }, new() { - IsNew = true, Text = Localizer["ClockPicker"], Url = "clock-picker" }, @@ -364,7 +362,6 @@ void AddForm(DemoMenuItem item) }, new() { - IsNew = true, Text = Localizer["ListGroup"], Url = "list-group" }, @@ -432,13 +429,11 @@ void AddForm(DemoMenuItem item) }, new() { - IsNew = true, Text = Localizer["SelectObject"], Url = "select-object" }, new() { - IsNew = true, Text = Localizer["SelectTable"], Url = "select-table" }, @@ -507,7 +502,6 @@ void AddData(DemoMenuItem item) }, new() { - IsNew = true, Text = Localizer["AzureOpenAI"], Url = "ai-chat" }, @@ -573,13 +567,11 @@ void AddData(DemoMenuItem item) }, new() { - IsNew = true, Text = Localizer["CountUp"], Url = "count-up" }, new() { - IsNew = true, Text = Localizer["CodeEditor"], Url = "code-editors" }, @@ -595,7 +587,6 @@ void AddData(DemoMenuItem item) }, new () { - IsNew = true, Text=Localizer["ExportPdfButton"], Url = "export-pdf-button" }, @@ -606,7 +597,6 @@ void AddData(DemoMenuItem item) }, new () { - IsNew = true, Text=Localizer["EyeDropper"], Url = "eye-dropper" }, @@ -628,8 +618,7 @@ void AddData(DemoMenuItem item) new() { Text = Localizer["Gantt"], - Url = "gantt", - IsNew = true + Url = "gantt" }, new() { @@ -663,7 +652,6 @@ void AddData(DemoMenuItem item) }, new() { - IsNew = true, Text = Localizer["MindMap"], Url = "mind-map" }, @@ -679,7 +667,6 @@ void AddData(DemoMenuItem item) }, new() { - IsNew = true, Text = Localizer["QueryBuilder"], Url = "query-builder" }, @@ -700,7 +687,6 @@ void AddData(DemoMenuItem item) }, new() { - IsNew = true, Text = Localizer["Segmented"], Url = "segmented" }, @@ -717,8 +703,7 @@ void AddData(DemoMenuItem item) new() { Text = Localizer["SvgEditor"], - Url = "svg-editors", - IsNew = true, + Url = "svg-editors" }, new() { @@ -757,19 +742,16 @@ void AddData(DemoMenuItem item) }, new() { - IsNew = true, Text = Localizer["Waterfall"], Url = "tutorials/waterfall" }, new() { - IsNew = true, Text = Localizer["WebSerial"], Url = "web-serial" }, new() { - IsNew = true, Text = Localizer["WebSpeech"], Url = "web-speech" } @@ -1119,19 +1101,16 @@ void AddNotice(DemoMenuItem item) }, new() { - IsNew = true, Text = Localizer["ContextMenu"], Url = "context-menu" }, new() { - IsNew = true, Text = Localizer["CountButton"], Url = "count-button" }, new() { - IsNew = true, Text = Localizer["DialButton"], Url = "dial-button" }, @@ -1152,7 +1131,6 @@ void AddNotice(DemoMenuItem item) }, new() { - IsNew = true, Text = Localizer["FlipClock"], Url = "flip-clock" }, @@ -1175,7 +1153,6 @@ void AddNotice(DemoMenuItem item) }, new() { - IsNew = true, Text = Localizer["Marquee"], Url = "marquee" }, @@ -1226,7 +1203,6 @@ void AddNotice(DemoMenuItem item) }, new() { - IsNew = true, Text = Localizer["SlideButton"], Url = "slide-button" }, @@ -1379,7 +1355,6 @@ void AddLayout(DemoMenuItem item) }, new() { - IsNew = true, Text = Localizer["Stack"], Url = "stack" } @@ -1422,6 +1397,11 @@ void AddServices(DemoMenuItem item) Url = "connection-service" }, new() + { + Text = Localizer["DialogService"], + Url = "dialog-service" + }, + new() { Text = Localizer["Dispatch"], Url = "dispatch" @@ -1433,8 +1413,9 @@ void AddServices(DemoMenuItem item) }, new() { - Text = Localizer["DialogService"], - Url = "dialog-service" + IsNew = true, + Text = Localizer["DrawerService"], + Url = "drawer-service" }, new() { @@ -1488,7 +1469,6 @@ void AddServices(DemoMenuItem item) }, new() { - IsNew = true, Text = Localizer["ThemeProvider"], Url = "theme-provider" }, @@ -1527,11 +1507,13 @@ void AddIcons(DemoMenuItem item) }, new() { + IsNew = true, Text = Localizer["AntDesignIcon"], Url = "ant-design-icon" }, new() { + IsNew = true, Text = Localizer["ElementIcon"], Url = "element-icon" }, diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 604cc8a9e42..41178f96ce0 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -4726,7 +4726,8 @@ "Icons": "Icons", "BootstrapIcon": "Bootstrap Icons", "MaterialIcon": "Material Icons", - "ElementIcon": "Element Icon" + "ElementIcon": "Element Icon", + "DrawerService": "DrawerService" }, "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": { "TablesHeaderTitle": "Header grouping function", @@ -6599,7 +6600,7 @@ "AntDesignIconDescription": "Semantic vector graphics.", "CopiedTooltipText": "Copied" }, - "BootstrapBlazor.Server.Components.Samples.Icons.BootstrapBlazorIcons": { + "BootstrapBlazor.Server.Components.Samples.BootstrapBlazorIcons": { "IconsTitle": "Icon", "IconsDescription": "Supports font icons, vector SVG icons, and Image pictures", "FATitle": "Font Icons", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 7b0fea2a5b5..d390dc924d3 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -4726,7 +4726,8 @@ "Icons": "内置图标", "BootstrapIcon": "Bootstrap Icons", "MaterialIcon": "Material Icons", - "ElementIcon": "饿了么图标 ElementIcon" + "ElementIcon": "饿了么图标 ElementIcon", + "DrawerService": "抽屉服务 DrawerService" }, "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": { "TablesHeaderTitle": "表头分组功能", @@ -6599,7 +6600,7 @@ "AntDesignIconDescription": "语义化的矢量图形", "CopiedTooltipText": "拷贝成功" }, - "BootstrapBlazor.Server.Components.Samples.Icons.BootstrapBlazorIcons": { + "BootstrapBlazor.Server.Components.Samples.BootstrapBlazorIcons": { "IconsTitle": "Icon 图标", "IconsDescription": "同时支持字体图标、矢量 Svg 图标、以及 Image 图片", "FATitle": "字体图标", diff --git a/src/BootstrapBlazor.Server/docs.json b/src/BootstrapBlazor.Server/docs.json index 6a53a077878..2baf9594f11 100644 --- a/src/BootstrapBlazor.Server/docs.json +++ b/src/BootstrapBlazor.Server/docs.json @@ -99,7 +99,7 @@ "live2d-display": "Live2DDisplays", "locator": "Locators", "logout": "Logouts", - "icon": "Icons", + "icon": "BootstrapBlazorIcons", "icon-park": "IconParks", "ant-design-icon": "AntDesignIconList", "image-viewer": "ImageViewers",