New Feature: BSToaster see https://blazorstrap.io/V5/components/toast

Fixes: Inputs outside of edit contexts
chanan · Dec 31, 2021 · e11989c · e11989c
1 parent c51d0c9
commit e11989c
Show file tree

Hide file tree

Showing 75 changed files with 684 additions and 60 deletions.
diff --git a/docs/V5/_content/BlazorStrap/blazorstrap.js b/docs/V5/_content/BlazorStrap/blazorstrap.js
@@ -17,8 +17,50 @@ if (!Element.prototype.closest) {
         return null;
     };
 }
-
 window.blazorStrap = {
+    ToastTimer: function(element, time, timeRemaining, rendered)
+    {
+        if(rendered === false)
+        {
+            element.classList.add("showing");
+        }
+        if(time === 0)
+        {
+
+            setTimeout(function (){
+                element.classList.remove("showing");
+            },100)
+        }
+        if(time !== 0) {
+
+            const dflex = element.querySelector(".d-flex");
+            const wrapper = document.createElement("div");
+            wrapper.className = "w-100 p-0 m-0 position-relative border-bottom-1 border-dark";
+            wrapper.style.top = "-1px";
+            const timeEl = document.createElement("div")
+            wrapper.appendChild(timeEl);
+            element.insertBefore(wrapper, dflex);
+            timeEl.classList.add("bg-dark");
+            timeEl.style.height = "4px";
+            timeEl.style.opacity = ".4";
+            if (timeRemaining === 0) {
+                timeEl.style.width = "0";
+                timeEl.style["transition"] = "linear " + (time - timeRemaining) / 1000 + "s";
+                timeEl.style["-webkit-transition"] = "linear " + (time - timeRemaining) / 1000 + "s";
+            } else {
+                timeRemaining = time-timeRemaining;
+                console.log(((timeRemaining / time) * 100));
+                timeEl.style.width = ((timeRemaining / time) * 100) + "%";
+                timeEl.style["transition"] = "linear" + (time - timeRemaining) / 1000 + "s";
+                timeEl.style["-webkit-transition"] = "linear " + (time - timeRemaining) / 1000 + "s";
+            }
+
+            setTimeout(function () {
+                element.classList.remove("showing");
+                timeEl.style.width = "100%";
+            }, 100);
+        }
+    },
     EventHandlers: [],
     AddEvent: async function (id, name, type, isDocument = false, ignoreChildren = false, filter = "") {
         return new Promise(function (resolve) {

diff --git a/docs/V5/_content/BlazorStrap/blazorstrap.min.js b/docs/V5/_content/BlazorStrap/blazorstrap.min.js
diff --git a/docs/V5/_framework/BlazorStrap-Docs.dll b/docs/V5/_framework/BlazorStrap-Docs.dll
diff --git a/docs/V5/_framework/BlazorStrap-Docs.dll.br b/docs/V5/_framework/BlazorStrap-Docs.dll.br
diff --git a/docs/V5/_framework/BlazorStrap-Docs.dll.gz b/docs/V5/_framework/BlazorStrap-Docs.dll.gz
diff --git a/docs/V5/_framework/BlazorStrap-Docs.pdb.gz b/docs/V5/_framework/BlazorStrap-Docs.pdb.gz
diff --git a/docs/V5/_framework/BlazorStrap.WASM.dll b/docs/V5/_framework/BlazorStrap.WASM.dll
diff --git a/docs/V5/_framework/BlazorStrap.WASM.dll.br b/docs/V5/_framework/BlazorStrap.WASM.dll.br
diff --git a/docs/V5/_framework/BlazorStrap.WASM.dll.gz b/docs/V5/_framework/BlazorStrap.WASM.dll.gz
diff --git a/docs/V5/_framework/BlazorStrap.WASM.pdb.gz b/docs/V5/_framework/BlazorStrap.WASM.pdb.gz
diff --git a/docs/V5/_framework/BlazorStrap.dll b/docs/V5/_framework/BlazorStrap.dll
diff --git a/docs/V5/_framework/BlazorStrap.dll.br b/docs/V5/_framework/BlazorStrap.dll.br
diff --git a/docs/V5/_framework/BlazorStrap.dll.gz b/docs/V5/_framework/BlazorStrap.dll.gz
diff --git a/docs/V5/_framework/BlazorStrap.pdb.gz b/docs/V5/_framework/BlazorStrap.pdb.gz
diff --git a/docs/V5/_framework/Microsoft.Extensions.DependencyInjection.Abstractions.dll b/docs/V5/_framework/Microsoft.Extensions.DependencyInjection.Abstractions.dll
diff --git a/docs/V5/_framework/Microsoft.Extensions.DependencyInjection.Abstractions.dll.br b/docs/V5/_framework/Microsoft.Extensions.DependencyInjection.Abstractions.dll.br
diff --git a/docs/V5/_framework/Microsoft.Extensions.DependencyInjection.Abstractions.dll.gz b/docs/V5/_framework/Microsoft.Extensions.DependencyInjection.Abstractions.dll.gz
diff --git a/docs/V5/_framework/System.ComponentModel.TypeConverter.dll b/docs/V5/_framework/System.ComponentModel.TypeConverter.dll
diff --git a/docs/V5/_framework/System.ComponentModel.TypeConverter.dll.br b/docs/V5/_framework/System.ComponentModel.TypeConverter.dll.br
diff --git a/docs/V5/_framework/System.ComponentModel.TypeConverter.dll.gz b/docs/V5/_framework/System.ComponentModel.TypeConverter.dll.gz
diff --git a/docs/V5/_framework/System.Linq.dll b/docs/V5/_framework/System.Linq.dll
diff --git a/docs/V5/_framework/System.Linq.dll.br b/docs/V5/_framework/System.Linq.dll.br
diff --git a/docs/V5/_framework/System.Linq.dll.gz b/docs/V5/_framework/System.Linq.dll.gz
diff --git a/docs/V5/_framework/System.Private.CoreLib.dll b/docs/V5/_framework/System.Private.CoreLib.dll
diff --git a/docs/V5/_framework/System.Private.CoreLib.dll.br b/docs/V5/_framework/System.Private.CoreLib.dll.br
diff --git a/docs/V5/_framework/System.Private.CoreLib.dll.gz b/docs/V5/_framework/System.Private.CoreLib.dll.gz
diff --git a/docs/V5/_framework/System.Runtime.dll b/docs/V5/_framework/System.Runtime.dll
diff --git a/docs/V5/_framework/System.Runtime.dll.br b/docs/V5/_framework/System.Runtime.dll.br
diff --git a/docs/V5/_framework/System.Runtime.dll.gz b/docs/V5/_framework/System.Runtime.dll.gz
diff --git a/docs/V5/_framework/blazor.boot.json b/docs/V5/_framework/blazor.boot.json
@@ -8,9 +8,9 @@
   "resources": {
     "assembly": {
       "BlazorComponentUtilities.dll": "sha256-UapksNiQg3lu5QM9uVSLyjEuzRH\/7o22fmcmxcLAAeI=",
-      "BlazorStrap-Docs.dll": "sha256-ybRqne2g7ex\/SWVMn757gJv9tyIPkY3V2+sU6k9HkaM=",
-      "BlazorStrap.dll": "sha256-f+A8N5wF\/f28OF\/6gw8BCbdUzgpemm0IAI0IV0qqCZM=",
-      "BlazorStrap.WASM.dll": "sha256-tSxombxlko70pUNE3V7PQLq8Hh3h6oytQLpETnVa+Iw=",
+      "BlazorStrap-Docs.dll": "sha256-cI7aZhYy4RtcTF+\/ww\/RphkpGkRAElsAxwRV9WDuihY=",
+      "BlazorStrap.dll": "sha256-yPMokOuUlpXlUmdjDgDpzVM4x4zkb\/vGrxwxQPNkm54=",
+      "BlazorStrap.WASM.dll": "sha256-Q6oEQyX2h7Kyu+ikx5zM\/CCNecNGbD9xcblnl\/wQayc=",
       "ColorCode.dll": "sha256-hF07ps23in9mbwaN4uSoZklQVfyJIw2Ep4R448bfkOk=",
       "Markdig.dll": "sha256-9\/ICq2gSL+hjhMdZXNoIRs8wyZFtZpr3yFSW+RQVdoQ=",
       "Markdig.SyntaxHighlighting.dll": "sha256-qkuHEt7805bTVSkNsvDi5CT5M3Q4VSK619BHVC+FdKs=",
@@ -21,7 +21,7 @@
       "Microsoft.Extensions.Configuration.Abstractions.dll": "sha256-zhFtW4kE16TdrpPne9I1Cu9o0KYzrS50VE9MVSifJg4=",
       "Microsoft.Extensions.Configuration.dll": "sha256-QPR+1IXNcA28b\/gXw3uZ8aRigHIZUJ1KWSH02kkCg7Q=",
       "Microsoft.Extensions.Configuration.Json.dll": "sha256-fF3xaP+hT6R3GYUctLIY1ixaXQ8mrHzwWHHf2dKfueU=",
-      "Microsoft.Extensions.DependencyInjection.Abstractions.dll": "sha256-vC4mkjLTXB\/\/Q6WHS8k5K3x0AyO+rT9Ke2+F61FxC08=",
+      "Microsoft.Extensions.DependencyInjection.Abstractions.dll": "sha256-9NBc1v25bmGPMfh3GyZx7VZBnJ6kYGKMxDVQxa1ZgSE=",
       "Microsoft.Extensions.DependencyInjection.dll": "sha256-pYDNELbgbO60zgvgH5SP8004wkA0+o\/KlQxFXl\/uS2A=",
       "Microsoft.Extensions.Logging.Abstractions.dll": "sha256-kf3HUdScrQ5nL65UDxYlJFd\/T8L6DhfmXHEbgYzDzLg=",
       "Microsoft.Extensions.Logging.dll": "sha256-aj8Tk1BLrOE4y41oBvw\/VGDdmvACVEpGmiEDNrA7Hco=",
@@ -37,23 +37,23 @@
       "System.ComponentModel.Annotations.dll": "sha256-6r9iwdAnBtysz9haltJNdABxqWfxanSkBEPJwWwxPvg=",
       "System.ComponentModel.dll": "sha256-0wL1XbOGv224hyXbnGmWwnRc11am9UKqeKk+awaJjtY=",
       "System.ComponentModel.Primitives.dll": "sha256-PvqyT5I1GKoVqfIT\/uXxPKmwME1OnT3AY6Ue1BYX\/30=",
-      "System.ComponentModel.TypeConverter.dll": "sha256-SveLSn\/FKuBLtsTUPSHQAdYkHXvCYBIzKqRnLyTzjog=",
+      "System.ComponentModel.TypeConverter.dll": "sha256-fgJC5sbhtKm\/71eTviuvVqC9iPVOtD\/oFMNo7725z\/E=",
       "System.Console.dll": "sha256-TfTAQMv06zIUpAKHTHGIK8To1YWG9gKoMuVGgfjBBRI=",
       "System.Diagnostics.Debug.dll": "sha256-U2y0huiMO3ZeM+XG0eJwKzjBEjHreWOD0JO5uiDnb\/8=",
       "System.Diagnostics.Tools.dll": "sha256-HK\/LdlEAbjgx+20V33z1JaO0vc+NzCCG1e2nhY9nbHc=",
       "System.dll": "sha256-Pxo\/he5qzWqd3FOuTUdr7TWZhdwxb76SsWaDfUinYZA=",
-      "System.Linq.dll": "sha256-vyk2vIwfRadXm1o+yV+FXaDvvA6jf3micY4ChOCEpmM=",
+      "System.Linq.dll": "sha256-FLHs6ymOE3rFTYei83LhO782t\/lliKFB5eWZDYBU8XU=",
       "System.Linq.Expressions.dll": "sha256-9F7Xz4GNtZAewikeeq74Jp2hI1Jcjot1UnnzJ06Xo4g=",
       "System.Memory.dll": "sha256-a5YXuYV7pA7Oa6IJ5lATOkRjPWfM9Nam6RazXw2pHTw=",
       "System.Net.Http.dll": "sha256-X3OQQ2oofjxOwiaiSwt\/X92xGkh6bbIFU2f3\/Und3w4=",
       "System.Net.Primitives.dll": "sha256-ypruf1U7Twj2DVFyMoZeTMLBGKUgYa\/XzAE5Cy89H2Q=",
       "System.ObjectModel.dll": "sha256-JIZSFphYJlXi5aMxEo7CNVLnstjC8IGt\/Kx1PIvN9Uw=",
-      "System.Private.CoreLib.dll": "sha256-uGqTfQqjw59E3KQ7FXTjHagZdTxlM+D2+warrGE4Npc=",
+      "System.Private.CoreLib.dll": "sha256-+KcXnjKJJx+cNlSLO+YHyPheW70pQ49ZolZpS2STpQM=",
       "System.Private.Runtime.InteropServices.JavaScript.dll": "sha256-zJ3Yx6UxponX132tHKrlidd3E2\/H+TK2tr1Rado77Rs=",
       "System.Private.Uri.dll": "sha256-PHXK467Olt4bFPbXX2j7XBfGd9QYYNCXz1UvH4Rrujw=",
       "System.Resources.ResourceManager.dll": "sha256-BZO591fHqh7HsEr0l6sznbwMZC2E5P4IUACW4+7s42Q=",
       "System.Runtime.CompilerServices.Unsafe.dll": "sha256-TmdWDj0dUcfN4ghwQbWVmEJINQ1ktSi\/MyMS+MstA70=",
-      "System.Runtime.dll": "sha256-9XcKbpizIKYD4mFX9qBz9NYbqE+HmB6XpxFxe\/3NL3Q=",
+      "System.Runtime.dll": "sha256-x95xAY5SRH1FQAqhLenFcMC1DpANrz56VLyCFZHXxWo=",
       "System.Runtime.Extensions.dll": "sha256-HaPz2zXUVzODhmQYT7Q7XMYa9yUJSF8TK53pca1Kt1k=",
       "System.Text.Encodings.Web.dll": "sha256-8MgxqGsBjU\/FR\/ntwAQr0x\/AG7jJ9f8Kn9shBpC23Dc=",
       "System.Text.Json.dll": "sha256-DwdIhzW54oelTQabQh6elU59XD8WRkKjUkBXgOtdJ\/s=",
@@ -67,7 +67,7 @@
     "runtime": {
       "dotnet.6.0.1.43ksstohgd.js": "sha256-K6NdlZMRC4GybVB2WGnotmzl8TnnWkRSUsGSSyZWvT0=",
       "dotnet.timezones.blat": "sha256-2kYo2V\/aZ7htYEvY5PVJlrMYhFf1jH8\/VS+SP7B7QUg=",
-      "dotnet.wasm": "sha256-TdXzHUkkiTOjUEzSp54tC5zessup1rPspglwpTF3408="
+      "dotnet.wasm": "sha256-WAWqziyhVG676k929KbbXPDm6lZ7DQinNB6SMqBHC18="
     },
     "satelliteResources": null
   }

diff --git a/docs/V5/_framework/blazor.boot.json.br b/docs/V5/_framework/blazor.boot.json.br
diff --git a/docs/V5/_framework/blazor.boot.json.gz b/docs/V5/_framework/blazor.boot.json.gz
diff --git a/docs/V5/_framework/dotnet.wasm b/docs/V5/_framework/dotnet.wasm
diff --git a/docs/V5/_framework/dotnet.wasm.br b/docs/V5/_framework/dotnet.wasm.br
diff --git a/docs/V5/_framework/dotnet.wasm.gz b/docs/V5/_framework/dotnet.wasm.gz
diff --git a/docs/V5/docs/Samples/Components/Toast/Toast1.md b/docs/V5/docs/Samples/Components/Toast/Toast1.md
@@ -1,4 +1,4 @@
-<BSToast HeaderClass="bg-primary text-white" ButtonClass="btn-close-white">
+<BSToast Color="BSColor.Primary">
     <Header><strong>BlazorStarp</strong></Header>
     <Content>Hello, world!</Content>
 </BSToast>
diff --git a/docs/V5/docs/Samples/Components/Toast/Toast2.md b/docs/V5/docs/Samples/Components/Toast/Toast2.md
@@ -0,0 +1,3 @@
+<BSToast Color="BSColor.Primary">
+    <Content>Hello, world!</Content>
+</BSToast>
diff --git a/docs/V5/docs/Samples/Components/Toast/Toast3.md b/docs/V5/docs/Samples/Components/Toast/Toast3.md
@@ -0,0 +1,43 @@
+@inject IBlazorStrap _blazorStrap
+<div aria-live="polite" aria-atomic="true" class="position-relative bd-example-toasts" style="overflow-y: scroll ">
+    <BSToaster/>
+</div>
+
+<div class="input-group">
+    <span class="input-group-text">Toast Placement</span>
+    <BSInput InputType="InputType.Select" @bind-Value="ToastPlacement">
+        @foreach (var item in  Enum.GetNames(typeof(Toast)).ToList())
+        {
+            <option value="@item">@item</option>
+        }
+    </BSInput>
+    <span class="input-group-text">Background Color</span>
+    <BSInput InputType="InputType.Select" @bind-Value="Color">
+        @foreach (var item in  Enum.GetNames(typeof(BSColor)).ToList())
+        {
+            <option value="@item">@item</option>
+        }
+    </BSInput>
+</div>
+<div class="input-group">
+    <span class="input-group-text">Close Time in milliseconds</span>
+    <BSInput InputType="InputType.Text" @bind-Value="Time"/>
+    <BSButton @onclick="Show" Color="BSColor.Primary">Show</BSButton>
+</div>
+@code
+{
+    private Toast ToastPlacement { get; set; }
+    private BSColor Color { get; set; }
+    private int Time { get; set; } = 0;
+    private int i = 0;
+    private void Show()
+    {
+        _blazorStrap.Toaster.Add("Live Example " + @i, "Live Example Text", o =>
+        {
+            o.Color = Color;
+            o.CloseAfter = Time;
+            o.Toast = ToastPlacement;
+        });
+        ++i;
+    }
+}
diff --git a/docs/V5/docs/Samples/Forms/FormControls/FormControls1.md b/docs/V5/docs/Samples/Forms/FormControls/FormControls1.md
@@ -2,7 +2,7 @@
     <BSLabel>Email address</BSLabel>
     <BSInput InputType="InputType.Email" placeholder="[email protected]" Value="@("")"/>
 </div>
-<div class="mb-3">>
+<div class="mb-3">
     <BSLabel>Example Textarea</BSLabel>
     <BSInput InputType="InputType.TextArea" Value="@("")"/>
 </div>
diff --git a/docs/V5/docs/Samples/Forms/Validation/ValidationMain.md b/docs/V5/docs/Samples/Forms/Validation/ValidationMain.md
@@ -1,5 +1,5 @@
 @using System.ComponentModel.DataAnnotations
-<BSForm Model="Modal" IsRow="true" Gutters="Gutters.Medium" OnValidSubmit="OnSubmit">
+<BSForm Model="Modal" IsRow="true" Gutters="Gutters.Medium" OnValidSubmit="OnSubmit" OnReset="Reset">
     <DataAnnotationsValidator/>
     <BSCol Position="Position.Relative" ColumnMedium="12">
         @_message
@@ -32,10 +32,9 @@
     </BSCol>
     <BSCol Column="12">
         <BSButton Color="BSColor.Primary" IsSubmit="true">Submit</BSButton>
-        <BSButton Color="BSColor.Primary" IsReset="true">Reset</BSButton>
+        <BSButton Color="BSColor.Primary" IsReset="true" @onclick="Reset">Reset</BSButton>
     </BSCol>
 </BSForm>
-
 @code {
     private EmployeeModal Modal { get; set; } = new EmployeeModal();
     private string _message = "";
@@ -70,4 +69,8 @@
         public bool? HasPendingPhoto { get; set; }
         public string? PhotoName { get; set; }
     }
+    public void Reset ()
+    {
+        Modal = new EmployeeModal();
+    }
 }
diff --git a/docs/V5/docs/Static/Components/Toast.md b/docs/V5/docs/Static/Components/Toast.md
@@ -22,3 +22,11 @@ See [shared](layout/shared) for additional parameters
 ### Example
 
 {{sample=Components/Toast/Toast1}}
+
+### Without header
+{{sample=Components/Toast/Toast2}}
+
+### Toaster Example
+<BSToaster/> should be placed before you `@Body` in your layout. Exact placement depends on your requirements for where you want the toasts to show up. 
+
+{{sample=Components/Toast/Toast3}}
diff --git a/docs/V5/docs/Static/Forms/Formcontrols.md b/docs/V5/docs/Static/Forms/Formcontrols.md
@@ -14,7 +14,7 @@ See [shared](forms/shared) for additional parameters
 | NoColorClass  | bool | true/false | Removes `.form-control-color`     |
 
 :::
-`@("value")` is not required it's a line declaration of a string to make the demo work
+`Value="@("X")"` is so the demo has a type and compile with adding code blocks. You will want to use `@bind-Value="YourRealVar""`
 
 ### Example
 

diff --git a/docs/V5/docs/Static/Forms/Inputgroup.md b/docs/V5/docs/Static/Forms/Inputgroup.md
@@ -3,5 +3,6 @@ Only one example provided see https://getbootstrap.com/docs/5.1/forms/input-grou
 See [shared](layout/shared) for additional parameters    
 
 ### Example with `BS` Class Helper
+`Value="@("X")"` is so the demo has a type and compile with adding code blocks. You will want to use `@bind-Value="YourRealVar""`
 
 {{sample=Forms/InputGroup/InputGroup1}}
diff --git a/docs/V5/docs/Static/Forms/Range.md b/docs/V5/docs/Static/Forms/Range.md
@@ -14,7 +14,7 @@ See [shared](forms/shared) for additional parameters
 | NoColorClass  | bool | true/false | Removes `.form-control-color`     |
 
 :::
-`@("value")` is not required it's a line declaration of a string to make the demo work
+`Value="@("X")"` is so the demo has a type and compile with adding code blocks. You will want to use `@bind-Value="YourRealVar""`
 
 ### Overview
 

diff --git a/docs/V5/docs/Static/Forms/Select.md b/docs/V5/docs/Static/Forms/Select.md
@@ -13,7 +13,7 @@ See [shared](forms/shared) for additional parameters
 | NoColorClass  | bool | true/false | Removes `.form-control-color`     |
 
 :::
-`@("value")` is not required it's a line declaration of a string to make the demo work
+`Value="@("X")"` is so the demo has a type and compile with adding code blocks. You will want to use `@bind-Value="YourRealVar""`
 
 ### Example
 

diff --git a/src/BlazorStrap-Docs/ObjectExtensions.cs b/src/BlazorStrap-Docs/ObjectExtensions.cs
@@ -0,0 +1,10 @@
+namespace BlazorStrap_Docs
+{
+    public static class ObjectExtensions
+    {
+        public static T? Clone<T>(this T source)
+        {
+            return System.Text.Json.JsonSerializer.Deserialize<T>(System.Text.Json.JsonSerializer.Serialize(source));
+        }
+    }
+}
diff --git a/src/BlazorStrap-Docs/Samples/Components/Toast/Toast1.razor b/src/BlazorStrap-Docs/Samples/Components/Toast/Toast1.razor
@@ -1,4 +1,4 @@
-<BSToast HeaderClass="bg-primary text-white" ButtonClass="btn-close-white">
+<BSToast Color="BSColor.Primary">
     <Header><strong>BlazorStarp</strong></Header>
     <Content>Hello, world!</Content>
 </BSToast>
diff --git a/src/BlazorStrap-Docs/Samples/Components/Toast/Toast2.razor b/src/BlazorStrap-Docs/Samples/Components/Toast/Toast2.razor
@@ -0,0 +1,3 @@
+<BSToast Color="BSColor.Primary">
+    <Content>Hello, world!</Content>
+</BSToast>
diff --git a/src/BlazorStrap-Docs/Samples/Components/Toast/Toast3.razor b/src/BlazorStrap-Docs/Samples/Components/Toast/Toast3.razor
@@ -0,0 +1,43 @@
+@inject IBlazorStrap _blazorStrap
+<div aria-live="polite" aria-atomic="true" class="position-relative bd-example-toasts" style="overflow-y: scroll ">
+    <BSToaster/>
+</div>
+
+<div class="input-group">
+    <span class="input-group-text">Toast Placement</span>
+    <BSInput InputType="InputType.Select" @bind-Value="ToastPlacement">
+        @foreach (var item in  Enum.GetNames(typeof(Toast)).ToList())
+        {
+            <option value="@item">@item</option>
+        }
+    </BSInput>
+    <span class="input-group-text">Background Color</span>
+    <BSInput InputType="InputType.Select" @bind-Value="Color">
+        @foreach (var item in  Enum.GetNames(typeof(BSColor)).ToList())
+        {
+            <option value="@item">@item</option>
+        }
+    </BSInput>
+</div>
+<div class="input-group">
+    <span class="input-group-text">Close Time in milliseconds</span>
+    <BSInput InputType="InputType.Text" @bind-Value="Time"/>
+    <BSButton @onclick="Show" Color="BSColor.Primary">Show</BSButton>
+</div>
+@code
+{
+    private Toast ToastPlacement { get; set; }
+    private BSColor Color { get; set; }
+    private int Time { get; set; } = 0;
+    private int i = 0;
+    private void Show()
+    {
+        _blazorStrap.Toaster.Add("Live Example " + @i, "Live Example Text", o =>
+        {
+            o.Color = Color;
+            o.CloseAfter = Time;
+            o.Toast = ToastPlacement;
+        });
+        ++i;
+    }
+}
diff --git a/src/BlazorStrap-Docs/Samples/Forms/FormControls/FormControls1.razor b/src/BlazorStrap-Docs/Samples/Forms/FormControls/FormControls1.razor
@@ -2,7 +2,7 @@
     <BSLabel>Email address</BSLabel>
     <BSInput InputType="InputType.Email" placeholder="[email protected]" Value="@("")"/>
 </div>
-<div class="mb-3">>
+<div class="mb-3">
     <BSLabel>Example Textarea</BSLabel>
     <BSInput InputType="InputType.TextArea" Value="@("")"/>
 </div>
diff --git a/src/BlazorStrap-Docs/Samples/Forms/Validation/ValidationMain.razor b/src/BlazorStrap-Docs/Samples/Forms/Validation/ValidationMain.razor
@@ -1,5 +1,5 @@
 @using System.ComponentModel.DataAnnotations
-<BSForm Model="Modal" IsRow="true" Gutters="Gutters.Medium" OnValidSubmit="OnSubmit">
+<BSForm Model="Modal" IsRow="true" Gutters="Gutters.Medium" OnValidSubmit="OnSubmit" OnReset="Reset">
     <DataAnnotationsValidator/>
     <BSCol Position="Position.Relative" ColumnMedium="12">
         @_message
@@ -32,10 +32,9 @@
     </BSCol>
     <BSCol Column="12">
         <BSButton Color="BSColor.Primary" IsSubmit="true">Submit</BSButton>
-        <BSButton Color="BSColor.Primary" IsReset="true">Reset</BSButton>
+        <BSButton Color="BSColor.Primary" IsReset="true" @onclick="Reset">Reset</BSButton>
     </BSCol>
 </BSForm>
-
 @code {
     private EmployeeModal Modal { get; set; } = new EmployeeModal();
     private string _message = "";
@@ -70,4 +69,8 @@
         public bool? HasPendingPhoto { get; set; }
         public string? PhotoName { get; set; }
     }
+    public void Reset ()
+    {
+        Modal = new EmployeeModal();
+    }
 }
diff --git a/src/BlazorStrap-Docs/wwwroot/Samples/Components/Toast/Toast1.md b/src/BlazorStrap-Docs/wwwroot/Samples/Components/Toast/Toast1.md
@@ -1,4 +1,4 @@
-<BSToast HeaderClass="bg-primary text-white" ButtonClass="btn-close-white">
+<BSToast Color="BSColor.Primary">
     <Header><strong>BlazorStarp</strong></Header>
     <Content>Hello, world!</Content>
 </BSToast>
diff --git a/src/BlazorStrap-Docs/wwwroot/Samples/Components/Toast/Toast2.md b/src/BlazorStrap-Docs/wwwroot/Samples/Components/Toast/Toast2.md
@@ -0,0 +1,3 @@
+<BSToast Color="BSColor.Primary">
+    <Content>Hello, world!</Content>
+</BSToast>