feat(Message): support ChildContent parameter (dotnetcore#2904)

* feat: 支持 ChildContent 自定义模板

* doc: 更新自定义模板示例

* test: 更新单元测试

Author: ArgoZhang

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

@@ -76,6 +76,22 @@ private MessageService? MessageService { get; set; }
     <Message @ref="Message1" Placement="Placement.Bottom" />
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["MessagesTemplateTitle"]"
+           Introduction="@Localizer["MessagesTemplateIntro"]"
+           Name="Template">
+    <button class="btn btn-primary" @onclick="@ShowTemplateMessage">@Localizer["MessagesTemplatePrompt"]</button>
+    <Message @ref="Message1" Placement="Placement.Bottom" />
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />
 
 <AttributeTable Title="@Localizer["MessagesItem"]" Items="@GetMessageItemAttributes()" />
+
+@code {
+    private RenderFragment RenderContent =>
+    @<div class="message-custom">
+        <p class="text-primary">Message Header</p>
+        <p>Message Body</p>
+        <div class="text-warning">Message Footer</div>
+    </div>;
+}

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

@@ -77,6 +77,15 @@ await MessageService.Show(new MessageOption()
         }, Message1);
     }
 
+    private async Task ShowTemplateMessage()
+    {
+        await MessageService.Show(new MessageOption()
+        {
+            Icon = "fa-solid fa-circle-info",
+            ChildContent = RenderContent
+        });
+    }
+
     private static AttributeItem[] GetAttributes() =>
     [
         new()
@@ -104,14 +113,6 @@ private static AttributeItem[] GetMessageItemAttributes() =>
             DefaultValue = " — "
         },
         new()
-        {
-            Name = "Class",
-            Description = "Style",
-            Type = "string",
-            ValueList = " — ",
-            DefaultValue = " — "
-        },
-        new()
         {
             Name = "Color",
             Description = "Color",
@@ -142,6 +143,30 @@ private static AttributeItem[] GetMessageItemAttributes() =>
             Type = "bool",
             ValueList = "true|false",
             DefaultValue = "false"
+        },
+        new()
+        {
+            Name = "ShowShadow",
+            Description = "Whether to show the shadow",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
+        {
+            Name = "ShowBorder",
+            Description = "Whether to show the border",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
+        {
+            Name = "OnDismiss",
+            Description = "The callback when click close button",
+            Type = "Func<Task>",
+            ValueList = " — ",
+            DefaultValue = " — "
         }
     ];
 }

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

@@ -468,7 +468,10 @@
     "MessagesDifferentColorSecondary": "Secondary message",
     "MessagesPositionTitle": "message box pop-up location",
     "MessagesPositionIntro": "Specify the <code>Message</code> component that has set the bottom display position by setting the component parameter of the <code>MessageService</code> service",
-    "MessagesItem": "MessageItem property"
+    "MessagesItem": "MessageOption property",
+    "MessagesTemplateTitle": "Custom template",
+    "MessagesTemplateIntro": "By setting the <code>ChildContent</code> template, rich custom styles and content prompt information can be achieved",
+    "MessagesTemplatePrompt": "Custom message"
   },
   "BootstrapBlazor.Server.Components.Samples.Lights": {
     "LightsTitle": "Light indicator",

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

@@ -468,7 +468,10 @@
     "MessagesDifferentColorSecondary": "Secondary 消息",
     "MessagesPositionTitle": "消息框弹出位置",
     "MessagesPositionIntro": "通过设置 <code>MessageService</code> 服务的组件参数，指定已经设置底部显示位置的 <code>Message</code> 组件",
-    "MessagesItem": "MessageItem 属性"
+    "MessagesItem": "MessageOption 属性",
+    "MessagesTemplateTitle": "自定义模板",
+    "MessagesTemplateIntro": "通过设置 <code>ChildContent</code> 模板可以实现丰富的自定义样式与内容的提示信息",
+    "MessagesTemplatePrompt": "自定义消息"
   },
   "BootstrapBlazor.Server.Components.Samples.Lights": {
     "LightsTitle": "Light 指示灯",

src/BootstrapBlazor/Components/Message/Message.razor

@@ -12,7 +12,16 @@
                 {
                     <i class="@item.Icon"></i>
                 }
-                <span>@item.Content</span>
+                <div>
+                    @if (item.ChildContent != null)
+                    {
+                        @item.ChildContent
+                    }
+                    else
+                    {
+                        @item.Content
+                    }
+                </div>
                 @if (item.ShowDismiss)
                 {
                     <button type="button" class="btn-close" aria-label="close"></button>
@@ -30,7 +39,16 @@
                 {
                     <i class="@item.Icon"></i>
                 }
-                <span>@item.Content</span>
+                <div>
+                    @if (item.ChildContent != null)
+                    {
+                        @item.ChildContent
+                    }
+                    else
+                    {
+                        @item.Content
+                    }
+                </div>
                 @if (item.ShowDismiss)
                 {
                     <button type="button" class="btn-close" aria-label="close"></button>

src/BootstrapBlazor/Components/Message/Message.razor.scss

@@ -1,12 +1,11 @@
-.message {
+.message {
     position: fixed;
     left: 1rem;
     right: 1rem;
     z-index: 1090;
     pointer-events: none;
-}
 
-    .message .alert {
+    .alert {
         display: flex;
         align-items: baseline;
         min-width: 160px;
@@ -18,30 +17,31 @@
         margin: 1rem auto 0 auto;
         transition: opacity .3s linear, top .3s linear, bottom .3s linear;
         pointer-events: auto;
-    }
 
-        .message .alert.show {
+        &.show {
             opacity: 1;
             bottom: unset;
             top: 20px;
         }
 
-        .message .alert > i + span {
+        > i + div {
             margin-left: .5rem;
         }
 
-        .message .alert > span {
+        > div {
             flex: 1;
             flex-wrap: wrap;
             word-break: break-all;
         }
+    }
 
-    .message.is-bottom .alert {
+    &.is-bottom .alert {
         top: unset;
         bottom: -20px;
     }
 
-        .message.is-bottom .alert.show {
-            top: unset;
-            bottom: 20px;
-        }
+    &.is-bottom .alert.show {
+        top: unset;
+        bottom: 20px;
+    }
+}

src/BootstrapBlazor/Components/Message/MessageOption.cs

@@ -43,4 +43,9 @@ public class MessageOption : PopupOptionBase
     /// 获得/设置 关闭当前 MessageItem 回调委托 默认 null
     /// </summary>
     public Func<Task>? OnDismiss { get; set; }
+
+    /// <summary>
+    /// 获得/设置 内容模板 默认 null 设置此参数后 <see cref="PopupOptionBase.Content"/> 将失效
+    /// </summary>
+    public RenderFragment? ChildContent { get; set; }
 }

test/UnitTest/Components/MessageTest.cs

@@ -97,5 +97,24 @@ await cut.InvokeAsync(() => service.Show(new MessageOption()
 
         await cut.Instance.Dismiss(alert.Id);
         await cut.Instance.Dismiss("test_id");
+        await cut.InvokeAsync(() => cut.Instance.Clear());
+
+        await cut.InvokeAsync(() => service.Show(new MessageOption()
+        {
+            ChildContent = builder => builder.AddContent(0, new MarkupString("<div class=\"custom-message-template\">Custom Message</div>"))
+        }, cut.Instance));
+        Assert.Contains("<div class=\"custom-message-template\">Custom Message</div>", cut.Markup);
+    }
+
+    [Fact]
+    public async Task ChildContent_Ok()
+    {
+        var service = Context.Services.GetRequiredService<MessageService>();
+        var cut = Context.RenderComponent<Message>();
+        await cut.InvokeAsync(() => service.Show(new MessageOption()
+        {
+            ChildContent = builder => builder.AddContent(0, new MarkupString("<div class=\"custom-message-template\">Custom Message</div>"))
+        }, cut.Instance));
+        Assert.Contains("<div class=\"custom-message-template\">Custom Message</div>", cut.Markup);
     }
 }