!3732 doc(#I69BTX): update drawer demos

* update drawer demos
2024-12-04 04:59:38 +08:00 · 2023-01-07 06:55:26 +00:00 · 2023-01-07 06:55:26 +00:00 · 68641880f3
commit 68641880f3
parent 5bd94e7e74
7 changed files with 137 additions and 103 deletions
--- a/src/BootstrapBlazor.Shared/Demos/Drawer/DrawerNoBackdrop.razor
+++ b/src/BootstrapBlazor.Shared/Demos/Drawer/DrawerNoBackdrop.razor
@ -0,0 +1,22 @@
+@inject IStringLocalizer<DrawerNoBackdrop> Localizer
+
+<div>
+    <p>
+        <button type="button" class="btn btn-primary" @onclick="@OpenNoBackdropDrawer">@Localizer["Open"]</button>
+    </p>
+    <Drawer Placement="Placement.Left" @bind-IsOpen="@IsShowBackdropOpen" ShowBackdrop="false">
+        <div class="d-flex justify-content-center align-items-center flex-column" style="height: 290px;">
+            <p>@Localizer["Description"]</p>
+            <button type="button" class="btn btn-primary" @onclick="@(e => IsShowBackdropOpen = false)">@Localizer["Close"]</button>
+        </div>
+    </Drawer>
+</div>
+
+@code {
+    private bool IsShowBackdropOpen { get; set; }
+
+    private void OpenNoBackdropDrawer()
+    {
+        IsShowBackdropOpen = true;
+    }
+}
--- a/src/BootstrapBlazor.Shared/Demos/Drawer/DrawerNormal.razor
+++ b/src/BootstrapBlazor.Shared/Demos/Drawer/DrawerNormal.razor
@ -0,0 +1,47 @@
+@inject IStringLocalizer<DrawerNormal> Localizer
+
+<div>
+    <p class="d-flex flex-wrap drawer-demo">
+        <RadioList TValue="SelectedItem" Items="@DrawerDirection" OnSelectedChanged="@OnStateChanged" />
+    </p>
+    <p>
+        <button type="button" class="btn btn-primary" @onclick="@(e => IsOpen = true)">@Localizer["Open"]</button>
+    </p>
+    <Drawer Placement="@DrawerAlign" IsOpen="@IsOpen">
+        <div class="d-flex justify-content-center align-items-center flex-column" style="height: 290px;">
+            <p>@Localizer["Description"]</p>
+            <button type="button" class="btn btn-primary" @onclick="@(e => IsOpen = false)">@Localizer["Close"]</button>
+        </div>
+    </Drawer>
+</div>
+
+@code {
+    private bool IsOpen { get; set; }
+
+    private Placement DrawerAlign { get; set; }
+
+    private IEnumerable<SelectedItem> DrawerDirection { get; } = new SelectedItem[]
+    {
+        new SelectedItem("left", "left to right")
+        {
+            Active = true
+        },
+        new SelectedItem("right", "right to left"),
+        new SelectedItem("top", "top to bottom"),
+        new SelectedItem("bottom", "bottom to top")
+    };
+
+    private Task OnStateChanged(IEnumerable<SelectedItem> values, SelectedItem val)
+    {
+        DrawerAlign = val.Value switch
+        {
+            "right" => Placement.Right,
+            "top" => Placement.Top,
+            "bottom" => Placement.Bottom,
+            _ => Placement.Left
+        };
+        IsOpen = false;
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+}
--- a/src/BootstrapBlazor.Shared/Demos/Drawer/DrawerPlacement.razor
+++ b/src/BootstrapBlazor.Shared/Demos/Drawer/DrawerPlacement.razor
@ -0,0 +1,21 @@
+@inject IStringLocalizer<DrawerPlacement> Localizer
+
+<div>
+    <p>
+        <button type="button" class="btn btn-primary" @onclick="@OpenDrawer">@Localizer["Open"]</button>
+    </p>
+    <Drawer Placement="Placement.Left" @bind-IsOpen="@IsBackdropOpen" IsBackdrop="true">
+        <p class="mt-3 text-center">
+            @Localizer["PlacementContent"]
+        </p>
+    </Drawer>
+</div>
+
+@code {
+    private bool IsBackdropOpen { get; set; }
+
+    private void OpenDrawer()
+    {
+        IsBackdropOpen = true;
+    }
+}
--- a/src/BootstrapBlazor.Shared/Locales/en.json
+++ b/src/BootstrapBlazor.Shared/Locales/en.json
@ -869,20 +869,29 @@
    "DispatchNoticeMessage": "Test dispatch message"
  },
  "BootstrapBlazor.Shared.Samples.Drawers": {
-    "H1": "Drawer",
-    "H2": "Sometimes, the Dialog component does not meet our needs. For example, your form is very long, or you need to temporarily display some documents. Drawer has almost the same API as Dialog, which brings a different experience to the UI.",
-    "P1": "Basic usage",
-    "P2": "Call out a temporary sidebar that can be called out from multiple directions",
-    "P3": "click me to open",
-    "P4": "The layout, components, etc. in the drawer are fully customizable",
-    "P5": "close the drawer",
-    "P6": "Click to close the mask",
-    "P7": "By setting the <code>IsBackdrop</code> property to <code>true</code>, the drawer is automatically closed when the mask part is clicked",
-    "P8": "click me to open",
-    "P9": "Click on the shaded part of the mask to automatically close the drawer",
+    "Title": "Drawer",
+    "Description": "Sometimes, the Dialog component does not meet our needs. For example, your form is very long, or you need to temporarily display some documents. Drawer has almost the same API as Dialog, which brings a different experience to the UI.",
+    "NormalTitle": "Basic usage",
+    "NormalIntro": "Call out a temporary sidebar that can be called out from multiple directions",
+    "PlacementTitle": "Click to close the mask",
+    "PlacementIntro": "By setting the <code>IsBackdrop</code> property to <code>true</code>, the drawer is automatically closed when the mask part is clicked",
    "NoBackdropTitle": "No backdrop",
    "NoBackdropIntro": "By setting the <code>ShowBackdrop=\"false\"</code> do not show the backdrop"
  },
+  "BootstrapBlazor.Shared.Demos.Drawer.DrawerNormal": {
+    "Open": "click me to open",
+    "Description": "The layout, components, etc. in the drawer are fully customizable",
+    "Close": "close the drawer"
+  },
+  "BootstrapBlazor.Shared.Demos.Drawer.DrawerPlacement": {
+    "Open": "click me to open",
+    "PlacementContent": "Click on the shaded part of the mask to automatically close the drawer"
+  },
+  "BootstrapBlazor.Shared.Demos.Drawer.DrawerNoBackdrop": {
+    "Open": "click me to open",
+    "Description": "The layout, components, etc. in the drawer are fully customizable",
+    "Close": "close the drawer"
+  },
  "BootstrapBlazor.Shared.Samples.Consoles": {
    "Title": "Console",
    "Description": "Console component, generally used for the output of background tasks",
--- a/src/BootstrapBlazor.Shared/Locales/zh.json
+++ b/src/BootstrapBlazor.Shared/Locales/zh.json
@ -870,20 +870,29 @@
    "DispatchNoticeMessage": "测试通知消息"
  },
  "BootstrapBlazor.Shared.Samples.Drawers": {
-    "H1": "Drawer 抽屉",
-    "H2": "有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验",
-    "P1": "基本用法",
-    "P2": "呼出一个临时的侧边栏, 可以从多个方向呼出",
-    "P3": "点我打开",
-    "P4": "抽屉内布局、组件等完全可以自定义",
-    "P5": "关闭抽屉",
-    "P6": "点击遮罩关闭",
-    "P7": "通过设置 <code>IsBackdrop</code> 属性为 <code>true</code>，点击遮罩部分时自动关闭抽屉",
-    "P8": "点我打开",
-    "P9": "点击遮罩阴影部分自动关闭抽屉",
+    "Title": "Drawer 抽屉",
+    "Description": "有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验",
+    "NormalTitle": "基本用法",
+    "NormalIntro": "呼出一个临时的侧边栏, 可以从多个方向呼出",
+    "PlacementTitle": "点击遮罩关闭",
+    "PlacementIntro": "通过设置 <code>IsBackdrop</code> 属性为 <code>true</code>，点击遮罩部分时自动关闭抽屉",
    "NoBackdropTitle": "无遮罩效果",
    "NoBackdropIntro": "通过设置 <code>ShowBackdrop=\"false\"</code> 不显示遮罩，这种模式下可以与抽屉下面网页元素进行交互操作"
  },
+  "BootstrapBlazor.Shared.Demos.Drawer.DrawerNormal": {
+    "Open": "点我打开",
+    "Description": "抽屉内布局、组件等完全可以自定义",
+    "Close": "关闭抽屉"
+  },
+  "BootstrapBlazor.Shared.Demos.Drawer.DrawerPlacement": {
+    "Open": "点我打开",
+    "PlacementContent": "点击遮罩阴影部分自动关闭抽屉"
+  },
+  "BootstrapBlazor.Shared.Demos.Drawer.DrawerNoBackdrop": {
+    "Open": "点我打开",
+    "Description": "抽屉内布局、组件等完全可以自定义",
+    "Close": "关闭抽屉"
+  },
  "BootstrapBlazor.Shared.Samples.Consoles": {
    "Title": "Console 控制台",
    "Description": "控制台组件，一般用于后台任务的输出",
--- a/src/BootstrapBlazor.Shared/Samples/Drawers.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Drawers.razor
@ -1,44 +1,13 @@
@page "/drawers"
+@inject IStringLocalizer<Drawers> Localizer

-<h3>@Localizer["H1"]</h3>
-<h4>@Localizer["H2"]</h4>
+<h3>@Localizer["Title"]</h3>
+<h4>@Localizer["Description"]</h4>

-<DemoBlock Title="@Localizer["P1"]" Introduction="@Localizer["P2"]" Name="Normal">
-    <p class="d-flex flex-wrap drawer-demo">
-        <RadioList TValue="SelectedItem" Items="@DrawerDirection" OnSelectedChanged="@OnStateChanged" />
-    </p>
-    <p>
-        <button type="button" class="btn btn-primary" @onclick="@(e => IsOpen = true)">@Localizer["P3"]</button>
-    </p>
-    <Drawer Placement="@DrawerAlign" IsOpen="@IsOpen">
-        <div class="d-flex justify-content-center align-items-center flex-column" style="height: 290px;">
-            <p>@Localizer["P4"]</p>
-            <button type="button" class="btn btn-primary" @onclick="@(e => IsOpen = false)">@Localizer["P5"]</button>
-        </div>
-    </Drawer>
-</DemoBlock>
+<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal" Demo="typeof(Demos.Drawer.DrawerNormal)" />

-<DemoBlock Title="@Localizer["P6"]" Introduction="@Localizer["P7"]" Name="Placement">
-    <p>
-        <button type="button" class="btn btn-primary" @onclick="@OpenDrawer">@Localizer["P8"]</button>
-    </p>
-    <Drawer Placement="Placement.Left" @bind-IsOpen="@IsBackdropOpen" IsBackdrop="true">
-        <p class="mt-3 text-center">
-            @Localizer["P9"]
-        </p>
-    </Drawer>
-</DemoBlock>
+<DemoBlock Title="@Localizer["PlacementTitle"]" Introduction="@Localizer["PlacementIntro"]" Name="Placement" Demo="typeof(Demos.Drawer.DrawerPlacement)" />

-<DemoBlock Title="@Localizer["NoBackdropTitle"]" Introduction="@Localizer["NoBackdropIntro"]" Name="NoBackdrop">
-    <p>
-        <button type="button" class="btn btn-primary" @onclick="@OpenNoBackdropDrawer">@Localizer["P8"]</button>
-    </p>
-    <Drawer Placement="Placement.Left" @bind-IsOpen="@IsShowBackdropOpen" ShowBackdrop="false">
-        <div class="d-flex justify-content-center align-items-center flex-column" style="height: 290px;">
-            <p>@Localizer["P4"]</p>
-            <button type="button" class="btn btn-primary" @onclick="@(e => IsShowBackdropOpen = false)">@Localizer["P5"]</button>
-        </div>
-    </Drawer>
-</DemoBlock>
+<DemoBlock Title="@Localizer["NoBackdropTitle"]" Introduction="@Localizer["NoBackdropIntro"]" Name="NoBackdrop" Demo="typeof(Demos.Drawer.DrawerNoBackdrop)" />

 <AttributeTable Items="@GetAttributes()" />
--- a/src/BootstrapBlazor.Shared/Samples/Drawers.razor.cs
+++ b/src/BootstrapBlazor.Shared/Samples/Drawers.razor.cs
@ -5,53 +5,10 @@
 namespace BootstrapBlazor.Shared.Samples;

 /// <summary>
-/// 
+/// Drawers
 /// </summary>
 public sealed partial class Drawers
 {
-    [Inject]
-    [NotNull]
-    private IStringLocalizer<Drawers>? Localizer { get; set; }
-
-    private IEnumerable<SelectedItem> DrawerDirection { get; } = new SelectedItem[] {
-        new SelectedItem("left", "left to right") { Active = true },
-        new SelectedItem("right", "right to left"),
-        new SelectedItem("top", "top to bottom"),
-        new SelectedItem("bottom", "bottom to top")
-    };
-
-    private Placement DrawerAlign { get; set; }
-
-    private Task OnStateChanged(IEnumerable<SelectedItem> values, SelectedItem val)
-    {
-        DrawerAlign = val.Value switch
-        {
-            "right" => Placement.Right,
-            "top" => Placement.Top,
-            "bottom" => Placement.Bottom,
-            _ => Placement.Left
-        };
-        IsOpen = false;
-        StateHasChanged();
-        return Task.CompletedTask;
-    }
-
-    private bool IsOpen { get; set; }
-
-    private bool IsBackdropOpen { get; set; }
-
-    private bool IsShowBackdropOpen { get; set; }
-
-    private void OpenDrawer()
-    {
-        IsBackdropOpen = true;
-    }
-
-    private void OpenNoBackdropDrawer()
-    {
-        IsShowBackdropOpen = true;
-    }
-
    /// <summary>
    /// Get property method
    /// </summary>