!3663 doc(#I67AZO): update Alert demo

* Merge branch 'main' into I67AZO-Alert
* update alert demo

src/BootstrapBlazor.Shared/Demos/Alert/AlertBorder.razor

@@ -0,0 +1,38 @@
+<Alert Icon="fa-solid fa-circle-check" Color="Color.Primary" ShowBorder="true">@AlertPrimaryText</Alert>
+<Alert Icon="fa-solid fa-circle-check" Color="Color.Success" ShowBorder="true">@AlertSuccessText</Alert>
+<Alert Icon="fa-solid fa-triangle-exclamation" Color="Color.Warning" ShowBorder="true">@AlertWarningText</Alert>
+<Alert Icon="fa-solid fa-circle-question" Color="Color.Info" ShowBorder="true">@AlertInfoText</Alert>
+<Alert Icon="fa-solid fa-circle-xmark" Color="Color.Danger" ShowBorder="true">@AlertDangerText</Alert>
+
+@code
+{
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<AlertBorder>? Localizer { get; set; }
+
+    [NotNull]
+    private string? AlertPrimaryText { get; set; }
+
+    [NotNull]
+    private string? AlertSuccessText { get; set; }
+
+    [NotNull]
+    private string? AlertDangerText { get; set; }
+
+    [NotNull]
+    private string? AlertWarningText { get; set; }
+
+    [NotNull]
+    private string? AlertInfoText { get; set; }
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        AlertPrimaryText ??= Localizer[nameof(AlertPrimaryText)];
+        AlertDangerText ??= Localizer[nameof(AlertDangerText)];
+        AlertSuccessText ??= Localizer[nameof(AlertSuccessText)];
+        AlertWarningText ??= Localizer[nameof(AlertWarningText)];
+        AlertInfoText ??= Localizer[nameof(AlertInfoText)];
+    }
+}

src/BootstrapBlazor.Shared/Demos/Alert/AlertClose.razor

@@ -0,0 +1,62 @@
+<Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Primary">@AlertPrimaryText</Alert>
+<Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Secondary">@AlertSecondaryText</Alert>
+<Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Success">@AlertSuccessText</Alert>
+<Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Danger">@AlertDangerText</Alert>
+<Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Warning">@AlertWarningText</Alert>
+<Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Info">@AlertInfoText</Alert>
+<Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Dark">@AlertDarkText</Alert>
+<BlockLogger @ref="Trace" class="mt-3" />
+
+@code
+{
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<AlertClose>? Localizer { get; set; }
+
+    [NotNull]
+    private string? AlertPrimaryText { get; set; }
+
+    [NotNull]
+    private string? AlertSecondaryText { get; set; }
+
+    [NotNull]
+    private string? AlertSuccessText { get; set; }
+
+    [NotNull]
+    private string? AlertDangerText { get; set; }
+
+    [NotNull]
+    private string? AlertWarningText { get; set; }
+
+    [NotNull]
+    private string? AlertInfoText { get; set; }
+
+    [NotNull]
+    private string? AlertDarkText { get; set; }
+
+    [NotNull]
+    private BlockLogger? Trace { get; set; }
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        AlertPrimaryText ??= Localizer[nameof(AlertPrimaryText)];
+        AlertSecondaryText ??= Localizer[nameof(AlertSecondaryText)];
+        AlertDangerText ??= Localizer[nameof(AlertDangerText)];
+        AlertSuccessText ??= Localizer[nameof(AlertSuccessText)];
+        AlertWarningText ??= Localizer[nameof(AlertWarningText)];
+        AlertInfoText ??= Localizer[nameof(AlertInfoText)];
+        AlertDarkText ??= Localizer[nameof(AlertDarkText)];
+    }
+
+    /// <summary>
+    /// 关闭警告框回调方法
+    /// </summary>
+    /// <returns></returns>
+    private Task DismissClick()
+    {
+        Trace.Log("Alert Dismissed");
+        return Task.CompletedTask;
+    }
+}

src/BootstrapBlazor.Shared/Demos/Alert/AlertIcon.razor

@@ -0,0 +1,32 @@
+<Alert Icon="fa-solid fa-circle-check" Color="Color.Success">@AlertPrimaryText</Alert>
+<Alert Icon="fa-solid fa-triangle-exclamation" Color="Color.Warning">@AlertWarningText</Alert>
+<Alert Icon="fa-solid fa-circle-question" Color="Color.Info">@AlertInfoText</Alert>
+<Alert Icon="fa-solid fa-circle-xmark" Color="Color.Danger">@AlertDangerText</Alert>
+
+@code
+{
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<AlertIcon>? Localizer { get; set; }
+
+    [NotNull]
+    private string? AlertPrimaryText { get; set; }
+
+    [NotNull]
+    private string? AlertWarningText { get; set; }
+
+    [NotNull]
+    private string? AlertInfoText { get; set; }
+
+    [NotNull]
+    private string? AlertDangerText { get; set; }
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        AlertPrimaryText ??= Localizer[nameof(AlertPrimaryText)];
+        AlertDangerText ??= Localizer[nameof(AlertDangerText)];
+        AlertWarningText ??= Localizer[nameof(AlertWarningText)];
+        AlertInfoText ??= Localizer[nameof(AlertInfoText)];
+    }
+}

src/BootstrapBlazor.Shared/Demos/Alert/AlertNormal.razor

@@ -0,0 +1,48 @@
+<Alert Color="Color.Primary">@AlertPrimaryText</Alert>
+<Alert Color="Color.Secondary">@AlertSecondaryText</Alert>
+<Alert Color="Color.Success">@AlertSuccessText</Alert>
+<Alert Color="Color.Danger">@AlertDangerText</Alert>
+<Alert Color="Color.Warning">@AlertWarningText</Alert>
+<Alert Color="Color.Info">@AlertInfoText</Alert>
+<Alert Color="Color.Dark">@AlertDarkText</Alert>
+
+@code
+{
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<AlertNormal>? Localizer { get; set; }
+
+    [NotNull]
+    private string? AlertPrimaryText { get; set; }
+
+    [NotNull]
+    private string? AlertSecondaryText { get; set; }
+
+    [NotNull]
+    private string? AlertSuccessText { get; set; }
+
+    [NotNull]
+    private string? AlertDangerText { get; set; }
+
+    [NotNull]
+    private string? AlertWarningText { get; set; }
+
+    [NotNull]
+    private string? AlertInfoText { get; set; }
+
+    [NotNull]
+    private string? AlertDarkText { get; set; }
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        AlertPrimaryText ??= Localizer[nameof(AlertPrimaryText)];
+        AlertSecondaryText ??= Localizer[nameof(AlertSecondaryText)];
+        AlertDangerText ??= Localizer[nameof(AlertDangerText)];
+        AlertSuccessText ??= Localizer[nameof(AlertSuccessText)];
+        AlertWarningText ??= Localizer[nameof(AlertWarningText)];
+        AlertInfoText ??= Localizer[nameof(AlertInfoText)];
+        AlertDarkText ??= Localizer[nameof(AlertDarkText)];
+    }
+}

src/BootstrapBlazor.Shared/Demos/Alert/AlertShadow.razor

@@ -0,0 +1,38 @@
+<Alert Icon="fa-solid fa-circle-check" Color="Color.Primary" ShowShadow="true">@AlertPrimaryText</Alert>
+<Alert Icon="fa-solid fa-circle-check" Color="Color.Success" ShowShadow="true">@AlertSuccessText</Alert>
+<Alert Icon="fa-solid fa-triangle-exclamation" Color="Color.Warning" ShowShadow="true">@AlertWarningText</Alert>
+<Alert Icon="fa-solid fa-circle-question" Color="Color.Info" ShowShadow="true">@AlertInfoText</Alert>
+<Alert Icon="fa-solid fa-circle-xmark" Color="Color.Danger" ShowShadow="true">@AlertDangerText</Alert>
+
+@code
+{
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<AlertShadow>? Localizer { get; set; }
+
+    [NotNull]
+    private string? AlertPrimaryText { get; set; }
+
+    [NotNull]
+    private string? AlertSuccessText { get; set; }
+
+    [NotNull]
+    private string? AlertDangerText { get; set; }
+
+    [NotNull]
+    private string? AlertWarningText { get; set; }
+
+    [NotNull]
+    private string? AlertInfoText { get; set; }
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        AlertPrimaryText ??= Localizer[nameof(AlertPrimaryText)];
+        AlertDangerText ??= Localizer[nameof(AlertDangerText)];
+        AlertSuccessText ??= Localizer[nameof(AlertSuccessText)];
+        AlertWarningText ??= Localizer[nameof(AlertWarningText)];
+        AlertInfoText ??= Localizer[nameof(AlertInfoText)];
+    }
+}

src/BootstrapBlazor.Shared/Demos/Alert/AlertShowBar.razor

@@ -0,0 +1,48 @@
+<Alert ShowBar="true" ShowBorder="true" Color="Color.Info">
+    <div>@AlertInfoText</div>
+</Alert>
+<Alert ShowBar="true" ShowBorder="true" Color="Color.Success">
+    <div>@AlertSuccessText</div>
+</Alert>
+<Alert ShowBar="true" ShowBorder="true" Color="Color.Primary">
+    <div>@AlertPrimaryText</div>
+</Alert>
+<Alert ShowBar="true" ShowBorder="true" Color="Color.Warning">
+    <div>@AlertWarningText</div>
+</Alert>
+<Alert ShowBar="true" ShowBorder="true" Color="Color.Danger">
+    <div>@AlertDangerText</div>
+</Alert>
+
+@code
+{
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<AlertShowBar>? Localizer { get; set; }
+
+    [NotNull]
+    private string? AlertPrimaryText { get; set; }
+
+    [NotNull]
+    private string? AlertSuccessText { get; set; }
+
+    [NotNull]
+    private string? AlertDangerText { get; set; }
+
+    [NotNull]
+    private string? AlertWarningText { get; set; }
+
+    [NotNull]
+    private string? AlertInfoText { get; set; }
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        AlertPrimaryText ??= Localizer[nameof(AlertPrimaryText)];
+        AlertDangerText ??= Localizer[nameof(AlertDangerText)];
+        AlertSuccessText ??= Localizer[nameof(AlertSuccessText)];
+        AlertWarningText ??= Localizer[nameof(AlertWarningText)];
+        AlertInfoText ??= Localizer[nameof(AlertInfoText)];
+    }
+}

src/BootstrapBlazor.Shared/Locales/en.json

@@ -4001,13 +4001,6 @@
     "SubTitle": "Displays important alert messages.",
     "BaseUsageText": "Basic usage",
     "IntroText1": "Alert components are non-overlay elements in the page that does not disappear automatically.",
-    "AlertPrimaryText": "A simple primary alert—check it out!",
-    "AlertSecondaryText": "A simple secondary alert—check it out!",
-    "AlertSuccessText": "A simple success alert—check it out!",
-    "AlertDangerText": "A simple danger alert—check it out!",
-    "AlertWarningText": "A simple warning alert—check it out!",
-    "AlertInfoText": "A simple info alert—check it out!",
-    "AlertDarkText": "A simple dark alert—check it out!",
     "CloseButtonUsageText": "Close button",
     "IntroText2": "Customize the close button as texts or other symbols.",
     "WithIconUsageText": "With Icon",
@@ -4019,6 +4012,51 @@
     "ShowShadowTitle": "Shadow",
     "ShowShadowIntro": "Set <code>ShowShadow=\"true\"</code> Show shadow"
   },
+  "BootstrapBlazor.Shared.Demos.Alert.AlertNormal": {
+    "AlertPrimaryText": "A simple primary alert—check it out!",
+    "AlertSecondaryText": "A simple secondary alert—check it out!",
+    "AlertSuccessText": "A simple success alert—check it out!",
+    "AlertDangerText": "A simple danger alert—check it out!",
+    "AlertWarningText": "A simple warning alert—check it out!",
+    "AlertInfoText": "A simple info alert—check it out!",
+    "AlertDarkText": "A simple dark alert—check it out!"
+  },
+  "BootstrapBlazor.Shared.Demos.Alert.AlertClose": {
+    "AlertPrimaryText": "A simple primary alert—check it out!",
+    "AlertSecondaryText": "A simple secondary alert—check it out!",
+    "AlertSuccessText": "A simple success alert—check it out!",
+    "AlertDangerText": "A simple danger alert—check it out!",
+    "AlertWarningText": "A simple warning alert—check it out!",
+    "AlertInfoText": "A simple info alert—check it out!",
+    "AlertDarkText": "A simple dark alert—check it out!"
+  },
+  "BootstrapBlazor.Shared.Demos.Alert.AlertIcon": {
+    "AlertPrimaryText": "A simple primary alert—check it out!",
+    "AlertWarningText": "A simple warning alert—check it out!",
+    "AlertInfoText": "A simple info alert—check it out!",
+    "AlertDangerText": "A simple danger alert—check it out!"
+  },
+  "BootstrapBlazor.Shared.Demos.Alert.AlertBorder": {
+    "AlertPrimaryText": "A simple primary alert—check it out!",
+    "AlertSuccessText": "A simple success alert—check it out!",
+    "AlertWarningText": "A simple warning alert—check it out!",
+    "AlertInfoText": "A simple info alert—check it out!",
+    "AlertDangerText": "A simple danger alert—check it out!"
+  },
+  "BootstrapBlazor.Shared.Demos.Alert.AlertShadow": {
+    "AlertInfoText": "A simple info alert—check it out!",
+    "AlertSuccessText": "A simple success alert—check it out!",
+    "AlertPrimaryText": "A simple primary alert—check it out!",
+    "AlertWarningText": "A simple warning alert—check it out!",
+    "AlertDangerText": "A simple danger alert—check it out!"
+  },
+  "BootstrapBlazor.Shared.Demos.Alert.AlertShowBar": {
+    "AlertPrimaryText": "A simple primary alert—check it out!",
+    "AlertSuccessText": "A simple success alert—check it out!",
+    "AlertWarningText": "A simple warning alert—check it out!",
+    "AlertInfoText": "A simple info alert—check it out!",
+    "AlertDangerText": "A simple danger alert—check it out!"
+  },
   "BootstrapBlazor.Shared.Samples.RibbonTabs": {
     "H1": "RibbonTab",
     "P1": "Office menu tab",

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -4000,13 +4000,6 @@
     "SubTitle": "用于页面中展示重要的提示信息。",
     "BaseUsageText": "基础用法",
     "IntroText1": "页面中的非浮层元素，不会自动消失。",
-    "AlertPrimaryText": "主要的警告框",
-    "AlertSecondaryText": "次要的警告框",
-    "AlertSuccessText": "成功的警告框",
-    "AlertDangerText": "危险的警告框",
-    "AlertWarningText": "警告的警告框",
-    "AlertInfoText": "信息的警告框",
-    "AlertDarkText": "黑暗的警告框",
     "CloseButtonUsageText": "关闭按钮",
     "IntroText2": "提供关闭按钮的警告框",
     "WithIconUsageText": "带 Icon",
@@ -4018,6 +4011,51 @@
     "ShowShadowTitle": "阴影效果",
     "ShowShadowIntro": "设置 <code>ShowShadow=\"true\"</code> 开启阴影效果"
   },
+  "BootstrapBlazor.Shared.Demos.Alert.AlertNormal": {
+    "AlertPrimaryText": "主要的警告框",
+    "AlertSecondaryText": "次要的警告框",
+    "AlertSuccessText": "成功的警告框",
+    "AlertDangerText": "危险的警告框",
+    "AlertWarningText": "警告的警告框",
+    "AlertInfoText": "信息的警告框",
+    "AlertDarkText": "黑暗的警告框"
+  },
+  "BootstrapBlazor.Shared.Demos.Alert.AlertClose": {
+    "AlertPrimaryText": "主要的警告框",
+    "AlertSecondaryText": "次要的警告框",
+    "AlertSuccessText": "成功的警告框",
+    "AlertDangerText": "危险的警告框",
+    "AlertWarningText": "警告的警告框",
+    "AlertInfoText": "信息的警告框",
+    "AlertDarkText": "黑暗的警告框"
+  },
+  "BootstrapBlazor.Shared.Demos.Alert.AlertIcon": {
+    "AlertPrimaryText": "主要的警告框",
+    "AlertWarningText": "警告的警告框",
+    "AlertInfoText": "信息的警告框",
+    "AlertDangerText": "危险的警告框"
+  },
+  "BootstrapBlazor.Shared.Demos.Alert.AlertBorder": {
+    "AlertPrimaryText": "主要的警告框",
+    "AlertSuccessText": "成功的警告框",
+    "AlertWarningText": "警告的警告框",
+    "AlertInfoText": "信息的警告框",
+    "AlertDangerText": "危险的警告框"
+  },
+  "BootstrapBlazor.Shared.Demos.Alert.AlertShadow": {
+    "AlertInfoText": "信息的警告框",
+    "AlertSuccessText": "成功的警告框",
+    "AlertPrimaryText": "主要的警告框",
+    "AlertWarningText": "警告的警告框",
+    "AlertDangerText": "危险的警告框"
+  },
+  "BootstrapBlazor.Shared.Demos.Alert.AlertShowBar": {
+    "AlertPrimaryText": "主要的警告框",
+    "AlertSuccessText": "成功的警告框",
+    "AlertWarningText": "警告的警告框",
+    "AlertInfoText": "信息的警告框",
+    "AlertDangerText": "危险的警告框"
+  },
   "BootstrapBlazor.Shared.Samples.RibbonTabs": {
     "H1": "RibbonTab 选项卡",
     "P1": "Office 菜单选项卡",

src/BootstrapBlazor.Shared/Samples/Alerts.razor

@@ -4,68 +4,155 @@
 
 <h4>@SubTitle</h4>
 
-<DemoBlock Title="@BaseUsageText" Introduction="@IntroText1" Name="Normal">
-    <Alert Color="Color.Primary">@AlertPrimaryText</Alert>
-    <Alert Color="Color.Secondary">@AlertSecondaryText</Alert>
-    <Alert Color="Color.Success">@AlertSuccessText</Alert>
-    <Alert Color="Color.Danger">@AlertDangerText</Alert>
-    <Alert Color="Color.Warning">@AlertWarningText</Alert>
-    <Alert Color="Color.Info">@AlertInfoText</Alert>
-    <Alert Color="Color.Dark">@AlertDarkText</Alert>
-</DemoBlock>
+<DemoBlock Title="@BaseUsageText" Introduction="@IntroText1" Name="Normal" Demo="Alert.AlertNormal" />
 
-<DemoBlock Title="@CloseButtonUsageText" Introduction="@IntroText2" Name="Close">
-    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Primary">@AlertPrimaryText</Alert>
-    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Secondary">@AlertSecondaryText</Alert>
-    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Success">@AlertSuccessText</Alert>
-    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Danger">@AlertDangerText</Alert>
-    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Warning">@AlertWarningText</Alert>
-    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Info">@AlertInfoText</Alert>
-    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Dark">@AlertDarkText</Alert>
-    <BlockLogger @ref="Trace" class="mt-3" />
-</DemoBlock>
+<DemoBlock Title="@CloseButtonUsageText" Introduction="@IntroText2" Name="Close" Demo="Alert.AlertClose" />
 
-<DemoBlock Title="@WithIconUsageText" Introduction="@IntroText3" Name="Icon">
-    <Alert Icon="fa-solid fa-circle-check" Color="Color.Success">@AlertPrimaryText</Alert>
-    <Alert Icon="fa-solid fa-triangle-exclamation" Color="Color.Warning">@AlertWarningText</Alert>
-    <Alert Icon="fa-solid fa-circle-question" Color="Color.Info">@AlertInfoText</Alert>
-    <Alert Icon="fa-solid fa-circle-xmark" Color="Color.Danger">@AlertDangerText</Alert>
-</DemoBlock>
+<DemoBlock Title="@WithIconUsageText" Introduction="@IntroText3" Name="Icon" Demo="Alert.AlertIcon" />
 
-<DemoBlock Title="@Localizer["ShowBorderTitle"]" Introduction="@Localizer["ShowBorderIntro"]" Name="Shadow">
-    <Alert Icon="fa-solid fa-circle-check" Color="Color.Primary" ShowBorder="true">@AlertPrimaryText</Alert>
-    <Alert Icon="fa-solid fa-circle-check" Color="Color.Success" ShowBorder="true">@AlertPrimaryText</Alert>
-    <Alert Icon="fa-solid fa-triangle-exclamation" Color="Color.Warning" ShowBorder="true">@AlertWarningText</Alert>
-    <Alert Icon="fa-solid fa-circle-question" Color="Color.Info" ShowBorder="true">@AlertInfoText</Alert>
-    <Alert Icon="fa-solid fa-circle-xmark" Color="Color.Danger" ShowBorder="true">@AlertDangerText</Alert>
-</DemoBlock>
+<DemoBlock Title="@Localizer["ShowBorderTitle"]" Introduction="@Localizer["ShowBorderIntro"]" Name="Border" Demo="Alert.AlertBorder" />
 
-<DemoBlock Title="@Localizer["ShowShadowTitle"]" Introduction="@Localizer["ShowShadowIntro"]" Name="Shadow">
-    <Alert Icon="fa-solid fa-circle-check" Color="Color.Primary" ShowBorder="true" ShowShadow="true">@AlertPrimaryText</Alert>
-    <Alert Icon="fa-solid fa-circle-check" Color="Color.Success" ShowBorder="true" ShowShadow="true">@AlertPrimaryText</Alert>
-    <Alert Icon="fa-solid fa-triangle-exclamation" Color="Color.Warning" ShowBorder="true" ShowShadow="true">@AlertWarningText</Alert>
-    <Alert Icon="fa-solid fa-circle-question" Color="Color.Info" ShowBorder="true" ShowShadow="true">@AlertInfoText</Alert>
-    <Alert Icon="fa-solid fa-circle-xmark" Color="Color.Danger" ShowBorder="true" ShowShadow="true">@AlertDangerText</Alert>
-</DemoBlock>
+<DemoBlock Title="@Localizer["ShowShadowTitle"]" Introduction="@Localizer["ShowShadowIntro"]" Name="Shadow" Demo="Alert.AlertShadow" />
 
-<DemoBlock Title="@ShowBarUsageText" Introduction="@IntroText4" Name="ShowBar">
-    <Alert ShowBar="true" ShowBorder="true" Color="Color.Info">
-        <div>@AlertInfoText</div>
-    </Alert>
-    <Alert ShowBar="true" ShowBorder="true" Color="Color.Success">
-        <div>@AlertSuccessText</div>
-    </Alert>
-    <Alert ShowBar="true" ShowBorder="true" Color="Color.Primary">
-        <div>@AlertPrimaryText</div>
-    </Alert>
-    <Alert ShowBar="true" ShowBorder="true" Color="Color.Warning">
-        <div>@AlertWarningText</div>
-    </Alert>
-    <Alert ShowBar="true" ShowBorder="true" Color="Color.Danger">
-        <div>@AlertDangerText</div>
-    </Alert>
-</DemoBlock>
+<DemoBlock Title="@ShowBarUsageText" Introduction="@IntroText4" Name="ShowBar" Demo="Alert.AlertShowBar" />
 
 <AttributeTable Items="@GetAttributes()" />
 
 <EventTable Items="@GetEvents()" />
+
+@code
+{
+    [NotNull]
+    private string? Title { get; set; }
+
+    [NotNull]
+    private string? SubTitle { get; set; }
+
+    [NotNull]
+    private string? BaseUsageText { get; set; }
+
+    [NotNull]
+    private string? CloseButtonUsageText { get; set; }
+
+    [NotNull]
+    private string? WithIconUsageText { get; set; }
+
+    [NotNull]
+    private string? ShowBarUsageText { get; set; }
+
+    [NotNull]
+    private string? IntroText1 { get; set; }
+
+    [NotNull]
+    private string? IntroText2 { get; set; }
+
+    [NotNull]
+    private string? IntroText3 { get; set; }
+
+    [NotNull]
+    private string? IntroText4 { get; set; }
+
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<Alerts>? Localizer { get; set; }
+
+    /// <summary>
+    /// OnInitialized 方法
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        Title ??= Localizer[nameof(Title)];
+        SubTitle ??= Localizer[nameof(SubTitle)];
+        BaseUsageText ??= Localizer[nameof(BaseUsageText)];
+        IntroText1 ??= Localizer[nameof(IntroText1)];
+
+        CloseButtonUsageText ??= Localizer[nameof(CloseButtonUsageText)];
+        IntroText2 ??= Localizer[nameof(IntroText2)];
+
+        WithIconUsageText ??= Localizer[nameof(WithIconUsageText)];
+        IntroText3 ??= Localizer[nameof(IntroText3)];
+
+        ShowBarUsageText ??= Localizer[nameof(ShowBarUsageText)];
+        IntroText4 ??= Localizer[nameof(IntroText4)];
+    }
+
+    /// <summary>
+    /// 获得事件方法
+    /// </summary>
+    /// <returns></returns>
+    private static IEnumerable<EventItem> GetEvents() => new EventItem[]
+    {
+        new EventItem()
+        {
+            Name = "OnDismiss",
+            Description="Close the alert box callback method",
+            Type ="EventCallback<MouseEventArgs>"
+        }
+    };
+
+    /// <summary>
+    /// 获得属性方法
+    /// </summary>
+    /// <returns></returns>
+    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
+    {
+        new AttributeItem() {
+            Name = "ChildContent",
+            Description = "Content",
+            Type = "RenderFragment",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new AttributeItem() {
+            Name = "Class",
+            Description = "Style",
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new AttributeItem() {
+            Name = "Color",
+            Description = "Color",
+            Type = "Color",
+            ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
+            DefaultValue = "Primary"
+        },
+        new AttributeItem() {
+            Name = "Icon",
+            Description = "Icon",
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new AttributeItem() {
+            Name = "ShowDismiss",
+            Description = "Close Button",
+            Type = "bool",
+            ValueList = " — ",
+            DefaultValue = "false"
+        },
+        new AttributeItem() {
+            Name = "ShowBar",
+            Description = "Show the left Bar",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new AttributeItem() {
+            Name = "ShowBorder",
+            Description = "Show border",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new AttributeItem() {
+            Name = "ShowShadow",
+            Description = "Show Shadow",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        }
+    };
+}

src/BootstrapBlazor.Shared/Samples/Alerts.razor.cs

@@ -1,185 +0,0 @@
-// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
-// 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.Shared.Samples;
-
-/// <summary>
-/// 
-/// </summary>
-public sealed partial class Alerts
-{
-    [NotNull]
-    private string? Title { get; set; }
-
-    [NotNull]
-    private string? SubTitle { get; set; }
-
-    [NotNull]
-    private string? BaseUsageText { get; set; }
-
-    [NotNull]
-    private string? IntroText1 { get; set; }
-
-    [NotNull]
-    private string? AlertPrimaryText { get; set; }
-
-    [NotNull]
-    private string? AlertSecondaryText { get; set; }
-
-    [NotNull]
-    private string? AlertSuccessText { get; set; }
-
-    [NotNull]
-    private string? AlertDangerText { get; set; }
-
-    [NotNull]
-    private string? AlertWarningText { get; set; }
-
-    [NotNull]
-    private string? AlertInfoText { get; set; }
-
-    [NotNull]
-    private string? AlertDarkText { get; set; }
-
-    [NotNull]
-    private string? CloseButtonUsageText { get; set; }
-
-    [NotNull]
-    private string? IntroText2 { get; set; }
-
-    [NotNull]
-    private string? WithIconUsageText { get; set; }
-
-    [NotNull]
-    private string? IntroText3 { get; set; }
-
-    [NotNull]
-    private string? ShowBarUsageText { get; set; }
-
-    [NotNull]
-    private string? IntroText4 { get; set; }
-
-    [Inject]
-    [NotNull]
-    private IStringLocalizer<Alerts>? Localizer { get; set; }
-
-    [NotNull]
-    private BlockLogger? Trace { get; set; }
-
-    /// <summary>
-    /// OnInitialized 方法
-    /// </summary>
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-
-        Title ??= Localizer[nameof(Title)];
-        SubTitle ??= Localizer[nameof(SubTitle)];
-        BaseUsageText ??= Localizer[nameof(BaseUsageText)];
-        IntroText1 ??= Localizer[nameof(IntroText1)];
-        AlertPrimaryText ??= Localizer[nameof(AlertPrimaryText)];
-        AlertSecondaryText ??= Localizer[nameof(AlertSecondaryText)];
-        AlertDangerText ??= Localizer[nameof(AlertDangerText)];
-        AlertSuccessText ??= Localizer[nameof(AlertSuccessText)];
-        AlertWarningText ??= Localizer[nameof(AlertWarningText)];
-        AlertInfoText ??= Localizer[nameof(AlertInfoText)];
-        AlertDarkText ??= Localizer[nameof(AlertDarkText)];
-
-        CloseButtonUsageText ??= Localizer[nameof(CloseButtonUsageText)];
-        IntroText2 ??= Localizer[nameof(IntroText2)];
-
-        WithIconUsageText ??= Localizer[nameof(WithIconUsageText)];
-        IntroText3 ??= Localizer[nameof(IntroText3)];
-
-        ShowBarUsageText ??= Localizer[nameof(ShowBarUsageText)];
-        IntroText4 ??= Localizer[nameof(IntroText4)];
-    }
-
-    /// <summary>
-    /// 
-    /// </summary>
-    private Task DismissClick()
-    {
-        Trace.Log("Alert Dismissed");
-        return Task.CompletedTask;
-    }
-
-    /// <summary>
-    /// 获得事件方法
-    /// </summary>
-    /// <returns></returns>
-    private static IEnumerable<EventItem> GetEvents() => new EventItem[]
-    {
-        new EventItem()
-        {
-            Name = "OnDismiss",
-            Description="Close the alert box callback method",
-            Type ="EventCallback<MouseEventArgs>"
-        }
-    };
-
-    /// <summary>
-    /// 获得属性方法
-    /// </summary>
-    /// <returns></returns>
-    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
-    {
-        new AttributeItem() {
-            Name = "ChildContent",
-            Description = "Content",
-            Type = "RenderFragment",
-            ValueList = " — ",
-            DefaultValue = " — "
-        },
-        new AttributeItem() {
-            Name = "Class",
-            Description = "Style",
-            Type = "string",
-            ValueList = " — ",
-            DefaultValue = " — "
-        },
-        new AttributeItem() {
-            Name = "Color",
-            Description = "Color",
-            Type = "Color",
-            ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
-            DefaultValue = "Primary"
-        },
-        new AttributeItem() {
-            Name = "Icon",
-            Description = "Icon",
-            Type = "string",
-            ValueList = " — ",
-            DefaultValue = " — "
-        },
-        new AttributeItem() {
-            Name = "ShowDismiss",
-            Description = "Close Button",
-            Type = "bool",
-            ValueList = " — ",
-            DefaultValue = "false"
-        },
-        new AttributeItem() {
-            Name = "ShowBar",
-            Description = "Show the left Bar",
-            Type = "bool",
-            ValueList = "true|false",
-            DefaultValue = "false"
-        },
-        new AttributeItem() {
-            Name = "ShowBorder",
-            Description = "Show border",
-            Type = "bool",
-            ValueList = "true|false",
-            DefaultValue = "false"
-        },
-        new AttributeItem() {
-            Name = "ShowShadow",
-            Description = "Show Shadow",
-            Type = "bool",
-            ValueList = "true|false",
-            DefaultValue = "false"
-        }
-    };
-}