Add RenderFragment content to ToastMessage (#965)

* Add RenderFragment content to ToastMessage

* Toasts demo updated.

---------

Co-authored-by: Nathan Phillips <[email protected]>
Co-authored-by: Vikram Reddy <[email protected]>

Author: NathanJPhillips

BlazorBootstrap.Demo.RCL/Components/Pages/Toasts/ToastsDocumentation.razor

@@ -28,6 +28,10 @@
     <Demo Type="typeof(Toasts_Demo_02_Toast_Without_Title)" />
 </Section>
 
+<Section Size="HeadingSize.H2" Name="Toast with templated content" PageUrl="@pageUrl" Link="toast-with-content">
+    <Demo Type="typeof(Toasts_Demo_07_Toast_With_Content)" />
+</Section>
+
 <Section Size="HeadingSize.H2" Name="Auto hide" PageUrl="@pageUrl" Link="auto-hide">
     <div>Add <code>AutoHide="true"</code> parameter to hide the Blazor Toasts after the delay. The default delay is 5000 milliseconds, be sure to update the delay timeout so that users have enough time to read the toast.</div>
     <Demo Type="typeof(Toasts_Demo_03_A_Auto_Hide)" />

BlazorBootstrap.Demo.RCL/Components/Pages/Toasts/Toasts_Demo_07_Toast_With_Content.razor

@@ -0,0 +1,16 @@
+<Toasts class="p-3" Messages="messages" />
+
+<Button Class="btn btn-primary" @onclick="ShowToast">Toast with Content</Button>
+
+@code {
+    List<ToastMessage> messages = [];
+
+    private void ShowToast() =>
+        messages.Add(
+            new ToastMessage
+            {
+                Type = ToastType.Info,
+                Title = "Blazor Bootstrap",
+                Content = @<div>Hello, world! This is a toast message. <button class="btn btn-sm btn-primary mt-2" @onclick="ShowToast">Show more toast</button></div>,
+            });
+}

blazorbootstrap/Components/Toasts/SimpleToast.razor

@@ -6,6 +6,7 @@
         <div class="d-flex">
             <div class="toast-body">
                 @ToastMessage?.Message
+                @ToastMessage?.Content
             </div>
             @if (!AutoHide || ShowCloseButton)
             {

blazorbootstrap/Components/Toasts/Toast.razor

@@ -13,6 +13,7 @@
     </div>
     <div class="toast-body">
         @ToastMessage.Message
+        @ToastMessage.Content
     </div>
     <Progress Height="3">
         <ProgressBar @ref="toastProgressBar" Color="@progressColor" Width="toastProgressBarWidth"/>

blazorbootstrap/Models/ToastMessage.cs

@@ -102,6 +102,8 @@ public ToastMessage(ToastType type, string customIconName, string title, string
 
     public string? Message { get; set; }
 
+    public RenderFragment? Content { get; set; }
+
     public string? Title { get; set; }
 
     public ToastType Type { get; set; }