Adds: CssPosition and Z-Index to BSToaster #560

Updates: Docs
chanan · Dec 5, 2022 · 62f178b · 62f178b
1 parent d5150a2
commit 62f178b
Show file tree

Hide file tree

Showing 37 changed files with 150 additions and 53 deletions.
diff --git a/docs/VNext/_framework/BlazorStrap-Docs.dll b/docs/VNext/_framework/BlazorStrap-Docs.dll
diff --git a/docs/VNext/_framework/BlazorStrap-Docs.dll.br b/docs/VNext/_framework/BlazorStrap-Docs.dll.br
diff --git a/docs/VNext/_framework/BlazorStrap-Docs.dll.gz b/docs/VNext/_framework/BlazorStrap-Docs.dll.gz
diff --git a/docs/VNext/_framework/BlazorStrap-Docs.pdb.gz b/docs/VNext/_framework/BlazorStrap-Docs.pdb.gz
diff --git a/docs/VNext/_framework/BlazorStrap.V4.dll b/docs/VNext/_framework/BlazorStrap.V4.dll
diff --git a/docs/VNext/_framework/BlazorStrap.V4.dll.br b/docs/VNext/_framework/BlazorStrap.V4.dll.br
diff --git a/docs/VNext/_framework/BlazorStrap.V4.dll.gz b/docs/VNext/_framework/BlazorStrap.V4.dll.gz
diff --git a/docs/VNext/_framework/BlazorStrap.V4.pdb.gz b/docs/VNext/_framework/BlazorStrap.V4.pdb.gz
diff --git a/docs/VNext/_framework/BlazorStrap.V5.dll b/docs/VNext/_framework/BlazorStrap.V5.dll
diff --git a/docs/VNext/_framework/BlazorStrap.V5.dll.br b/docs/VNext/_framework/BlazorStrap.V5.dll.br
diff --git a/docs/VNext/_framework/BlazorStrap.V5.dll.gz b/docs/VNext/_framework/BlazorStrap.V5.dll.gz
diff --git a/docs/VNext/_framework/BlazorStrap.V5.pdb.gz b/docs/VNext/_framework/BlazorStrap.V5.pdb.gz
diff --git a/docs/VNext/_framework/BlazorStrap.WASM.dll b/docs/VNext/_framework/BlazorStrap.WASM.dll
diff --git a/docs/VNext/_framework/BlazorStrap.WASM.dll.br b/docs/VNext/_framework/BlazorStrap.WASM.dll.br
diff --git a/docs/VNext/_framework/BlazorStrap.WASM.dll.gz b/docs/VNext/_framework/BlazorStrap.WASM.dll.gz
diff --git a/docs/VNext/_framework/BlazorStrap.WASM.pdb.gz b/docs/VNext/_framework/BlazorStrap.WASM.pdb.gz
diff --git a/docs/VNext/_framework/BlazorStrap.dll b/docs/VNext/_framework/BlazorStrap.dll
diff --git a/docs/VNext/_framework/BlazorStrap.dll.br b/docs/VNext/_framework/BlazorStrap.dll.br
diff --git a/docs/VNext/_framework/BlazorStrap.dll.gz b/docs/VNext/_framework/BlazorStrap.dll.gz
diff --git a/docs/VNext/_framework/BlazorStrap.pdb.gz b/docs/VNext/_framework/BlazorStrap.pdb.gz
diff --git a/docs/VNext/_framework/blazor.boot.json b/docs/VNext/_framework/blazor.boot.json
@@ -8,13 +8,13 @@
   "resources": {
     "assembly": {
       "BlazorComponentUtilities.dll": "sha256-UapksNiQg3lu5QM9uVSLyjEuzRH\/7o22fmcmxcLAAeI=",
-      "BlazorStrap-Docs.dll": "sha256-mZv2LVnEhPa448a4OJYCWNtSTIU\/R\/KT10d0xGdth0A=",
-      "BlazorStrap.dll": "sha256-PGLnKMIJqRoW9iuEG2fZrqPOzFeN7uWLIw\/E8o+1GpM=",
+      "BlazorStrap-Docs.dll": "sha256-p\/l+9Rquu\/yz9VspXlLHXkrIRQZNJ\/iaz9GM93KX3+M=",
+      "BlazorStrap.dll": "sha256-qtYsxYjq9SZ4uZYESOIy+GtCSqSubnDgXMMPGi5E\/6Q=",
       "BlazorStrap.Extensions.FluentValidation.dll": "sha256-Xio62sN4IJ1mAFowVVQ78Sw++Lhx+7jplG\/s\/HPfzhs=",
       "BlazorStrap.Extensions.TreeView.dll": "sha256-heGt\/ize8gzArvkWQQP6nSAfC0wWyEaMOd9in8XWAc4=",
-      "BlazorStrap.V4.dll": "sha256-4Hnq4rlS2wDivR0I77aEWuFnqXf3Lqvm+g3db\/8tSV0=",
-      "BlazorStrap.V5.dll": "sha256-WbppZa3O\/5noRVO6awBhUt3U\/tae7gfCn7JaSxcvEVg=",
-      "BlazorStrap.WASM.dll": "sha256-yzpUN6oxVsf0eU6WvbtPnHjvy3EmUoMNr+Eqy8\/3dGQ=",
+      "BlazorStrap.V4.dll": "sha256-B2zBSReCxpvxS6SlBc+Gemme1L78yuXxRZWrlTowbNA=",
+      "BlazorStrap.V5.dll": "sha256-9Dz3YGuPASYQ9nuU8Nc+RDR0Y2dtXSVViNcM7Ad346A=",
+      "BlazorStrap.WASM.dll": "sha256-5bdMbey+w+YSF+cWlV3VrlafvqJq\/QYq8DvuHA5sSCY=",
       "ColorCode.dll": "sha256-hF07ps23in9mbwaN4uSoZklQVfyJIw2Ep4R448bfkOk=",
       "FluentValidation.dll": "sha256-NflrIQKcfYxeVjrVYw+AP1+xnZJp67Wq9L5Vsd5Cr\/8=",
       "Markdig.dll": "sha256-9\/ICq2gSL+hjhMdZXNoIRs8wyZFtZpr3yFSW+RQVdoQ=",

diff --git a/docs/VNext/_framework/blazor.boot.json.br b/docs/VNext/_framework/blazor.boot.json.br
diff --git a/docs/VNext/_framework/blazor.boot.json.gz b/docs/VNext/_framework/blazor.boot.json.gz
diff --git a/docs/VNext/docs/Samples/V4/Components/Toast/Toast3.md b/docs/VNext/docs/Samples/V4/Components/Toast/Toast3.md
@@ -6,6 +6,17 @@
 <!--\\-->
 </div>
 <!--//-->
+<div class="input-group">
+    <span class="input-group-text">Toaster Position</span>
+    <BSInput InputType="InputType.Select" @bind-Value="ToastPosition">
+        @foreach (var item in  Enum.GetNames(typeof(CssPosition)).ToList())
+        {
+            <option value="@item">@item</option>
+        }
+    </BSInput>
+    <span class="input-group-text">Toaster Z-Index</span>
+    <BSInput InputType="InputType.Text" @bind-Value="ZIndex"/>
+</div>
 <div class="input-group">
     <span class="input-group-text">Toast Placement</span>
     <BSInput InputType="InputType.Select" @bind-Value="ToastPlacement">
@@ -31,6 +42,8 @@
 @code
 {
     private Toast ToastPlacement { get; set; }
+    private int ZIndex { get; set; } = 1025;
+    private CssPosition ToastPosition { get; set; } = CssPosition.Fixed;
     private BSColor Color { get; set; }
     private int Time { get; set; } = 0;
     private int i = 0;

diff --git a/docs/VNext/docs/Samples/V5/Components/Toast/Toast3.md b/docs/VNext/docs/Samples/V5/Components/Toast/Toast3.md
@@ -2,10 +2,21 @@
 <!--\\-->
 <div aria-live="polite" aria-atomic="true" class="position-relative bd-example-toasts" style="overflow-y: scroll ">
 <!--//-->
-    <BSToaster/>
+    <BSToaster Position="ToastPosition" ZIndex="ZIndex"/>
 <!--\\-->
 </div>
 <!--//-->
+<div class="input-group">
+    <span class="input-group-text">Toaster Position</span>
+    <BSInput InputType="InputType.Select" @bind-Value="ToastPosition">
+        @foreach (var item in  Enum.GetNames(typeof(CssPosition)).ToList())
+        {
+            <option value="@item">@item</option>
+        }
+    </BSInput>
+    <span class="input-group-text">Toaster Z-Index</span>
+    <BSInput InputType="InputType.Text" @bind-Value="ZIndex"/>
+</div>
 <div class="input-group">
     <span class="input-group-text">Toast Placement</span>
     <BSInput InputType="InputType.Select" @bind-Value="ToastPlacement">
@@ -27,10 +38,11 @@
     <BSInput InputType="InputType.Text" @bind-Value="Time"/>
     <BSButton @onclick="Show" Color="BSColor.Primary">Show</BSButton>
 </div>
-
 @code
 {
     private Toast ToastPlacement { get; set; }
+    private int ZIndex { get; set; } = 1025;
+    private CssPosition ToastPosition { get; set; } = CssPosition.Fixed;
     private BSColor Color { get; set; }
     private int Time { get; set; } = 0;
     private int i = 0;

diff --git a/docs/VNext/docs/Static/V4/Components/Toast.md b/docs/VNext/docs/Static/V4/Components/Toast.md
@@ -27,10 +27,12 @@ See [shared](layout/shared) for additional parameters
 
 ### Toaster Example
 #### Component \<BSToaster\>
-| Parameter    | Type    | Valid            | Remarks/Output                  | 
-|--------------|---------|------------------|---------------------------------|
-| WrapperClass | string  | css class string | Adds your class(es) to wrapper  | {.table-striped .p-2}
-| WrapperStyle | string? | style string     | Adds your styles to wrapper     | 
+| Parameter    | Type    | Valid            | Remarks/Output                                  | 
+|--------------|---------|------------------|-------------------------------------------------|
+| Position     | Enum    | CssPosition      | sets position fixed, static, absolute, relative | {.table-striped .p-2}
+| WrapperClass | string  | css class string | Adds your class(es) to wrapper                  | 
+| WrapperStyle | string? | style string     | Adds your styles to wrapper                     |
+| ZIndex       | int     | int              | sets z-index style                              |
 
 <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. 
 

diff --git a/docs/VNext/docs/Static/V5/Components/Toast.md b/docs/VNext/docs/Static/V5/Components/Toast.md
@@ -27,10 +27,12 @@ See [shared](layout/shared) for additional parameters
 
 ### Toaster Example
 #### Component \<BSToaster\>
-| Parameter    | Type    | Valid            | Remarks/Output                  | 
-|--------------|---------|------------------|---------------------------------|
-| WrapperClass | string  | css class string | Adds your class(es) to wrapper  | {.table-striped .p-2}
-| WrapperStyle | string? | style string     | Adds your styles to wrapper     | 
+| Parameter    | Type    | Valid            | Remarks/Output                                  | 
+|--------------|---------|------------------|-------------------------------------------------|
+| Position     | Enum    | CssPosition      | sets position fixed, static, absolute, relative | {.table-striped .p-2}
+| WrapperClass | string  | css class string | Adds your class(es) to wrapper                  | 
+| WrapperStyle | string? | style string     | Adds your styles to wrapper                     |
+| ZIndex       | int     | int              | sets z-index style                              |
 
 <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. 
 

diff --git a/src/BlazorStrap-Docs/Samples/V4/Components/Toast/Toast3.razor b/src/BlazorStrap-Docs/Samples/V4/Components/Toast/Toast3.razor
@@ -6,6 +6,17 @@
 <!--\\-->
 </div>
 <!--//-->
+<div class="input-group">
+    <span class="input-group-text">Toaster Position</span>
+    <BSInput InputType="InputType.Select" @bind-Value="ToastPosition">
+        @foreach (var item in  Enum.GetNames(typeof(CssPosition)).ToList())
+        {
+            <option value="@item">@item</option>
+        }
+    </BSInput>
+    <span class="input-group-text">Toaster Z-Index</span>
+    <BSInput InputType="InputType.Text" @bind-Value="ZIndex"/>
+</div>
 <div class="input-group">
     <span class="input-group-text">Toast Placement</span>
     <BSInput InputType="InputType.Select" @bind-Value="ToastPlacement">
@@ -31,6 +42,8 @@
 @code
 {
     private Toast ToastPlacement { get; set; }
+    private int ZIndex { get; set; } = 1025;
+    private CssPosition ToastPosition { get; set; } = CssPosition.Fixed;
     private BSColor Color { get; set; }
     private int Time { get; set; } = 0;
     private int i = 0;

diff --git a/src/BlazorStrap-Docs/Samples/V5/Components/Toast/Toast3.razor b/src/BlazorStrap-Docs/Samples/V5/Components/Toast/Toast3.razor
@@ -2,10 +2,21 @@
 <!--\\-->
 <div aria-live="polite" aria-atomic="true" class="position-relative bd-example-toasts" style="overflow-y: scroll ">
 <!--//-->
-    <BSToaster/>
+    <BSToaster Position="ToastPosition" ZIndex="ZIndex"/>
 <!--\\-->
 </div>
 <!--//-->
+<div class="input-group">
+    <span class="input-group-text">Toaster Position</span>
+    <BSInput InputType="InputType.Select" @bind-Value="ToastPosition">
+        @foreach (var item in  Enum.GetNames(typeof(CssPosition)).ToList())
+        {
+            <option value="@item">@item</option>
+        }
+    </BSInput>
+    <span class="input-group-text">Toaster Z-Index</span>
+    <BSInput InputType="InputType.Text" @bind-Value="ZIndex"/>
+</div>
 <div class="input-group">
     <span class="input-group-text">Toast Placement</span>
     <BSInput InputType="InputType.Select" @bind-Value="ToastPlacement">
@@ -27,10 +38,11 @@
     <BSInput InputType="InputType.Text" @bind-Value="Time"/>
     <BSButton @onclick="Show" Color="BSColor.Primary">Show</BSButton>
 </div>
-
 @code
 {
     private Toast ToastPlacement { get; set; }
+    private int ZIndex { get; set; } = 1025;
+    private CssPosition ToastPosition { get; set; } = CssPosition.Fixed;
     private BSColor Color { get; set; }
     private int Time { get; set; } = 0;
     private int i = 0;

diff --git a/src/BlazorStrap-Docs/wwwroot/Samples/V4/Components/Toast/Toast3.md b/src/BlazorStrap-Docs/wwwroot/Samples/V4/Components/Toast/Toast3.md
@@ -6,6 +6,17 @@
 <!--\\-->
 </div>
 <!--//-->
+<div class="input-group">
+    <span class="input-group-text">Toaster Position</span>
+    <BSInput InputType="InputType.Select" @bind-Value="ToastPosition">
+        @foreach (var item in  Enum.GetNames(typeof(CssPosition)).ToList())
+        {
+            <option value="@item">@item</option>
+        }
+    </BSInput>
+    <span class="input-group-text">Toaster Z-Index</span>
+    <BSInput InputType="InputType.Text" @bind-Value="ZIndex"/>
+</div>
 <div class="input-group">
     <span class="input-group-text">Toast Placement</span>
     <BSInput InputType="InputType.Select" @bind-Value="ToastPlacement">
@@ -31,6 +42,8 @@
 @code
 {
     private Toast ToastPlacement { get; set; }
+    private int ZIndex { get; set; } = 1025;
+    private CssPosition ToastPosition { get; set; } = CssPosition.Fixed;
     private BSColor Color { get; set; }
     private int Time { get; set; } = 0;
     private int i = 0;

diff --git a/src/BlazorStrap-Docs/wwwroot/Samples/V5/Components/Toast/Toast3.md b/src/BlazorStrap-Docs/wwwroot/Samples/V5/Components/Toast/Toast3.md
@@ -2,10 +2,21 @@
 <!--\\-->
 <div aria-live="polite" aria-atomic="true" class="position-relative bd-example-toasts" style="overflow-y: scroll ">
 <!--//-->
-    <BSToaster/>
+    <BSToaster Position="ToastPosition" ZIndex="ZIndex"/>
 <!--\\-->
 </div>
 <!--//-->
+<div class="input-group">
+    <span class="input-group-text">Toaster Position</span>
+    <BSInput InputType="InputType.Select" @bind-Value="ToastPosition">
+        @foreach (var item in  Enum.GetNames(typeof(CssPosition)).ToList())
+        {
+            <option value="@item">@item</option>
+        }
+    </BSInput>
+    <span class="input-group-text">Toaster Z-Index</span>
+    <BSInput InputType="InputType.Text" @bind-Value="ZIndex"/>
+</div>
 <div class="input-group">
     <span class="input-group-text">Toast Placement</span>
     <BSInput InputType="InputType.Select" @bind-Value="ToastPlacement">
@@ -27,10 +38,11 @@
     <BSInput InputType="InputType.Text" @bind-Value="Time"/>
     <BSButton @onclick="Show" Color="BSColor.Primary">Show</BSButton>
 </div>
-
 @code
 {
     private Toast ToastPlacement { get; set; }
+    private int ZIndex { get; set; } = 1025;
+    private CssPosition ToastPosition { get; set; } = CssPosition.Fixed;
     private BSColor Color { get; set; }
     private int Time { get; set; } = 0;
     private int i = 0;

diff --git a/src/BlazorStrap-Docs/wwwroot/Static/V4/Components/Toast.md b/src/BlazorStrap-Docs/wwwroot/Static/V4/Components/Toast.md
@@ -27,10 +27,12 @@ See [shared](layout/shared) for additional parameters
 
 ### Toaster Example
 #### Component \<BSToaster\>
-| Parameter    | Type    | Valid            | Remarks/Output                  | 
-|--------------|---------|------------------|---------------------------------|
-| WrapperClass | string  | css class string | Adds your class(es) to wrapper  | {.table-striped .p-2}
-| WrapperStyle | string? | style string     | Adds your styles to wrapper     | 
+| Parameter    | Type    | Valid            | Remarks/Output                                  | 
+|--------------|---------|------------------|-------------------------------------------------|
+| Position     | Enum    | CssPosition      | sets position fixed, static, absolute, relative | {.table-striped .p-2}
+| WrapperClass | string  | css class string | Adds your class(es) to wrapper                  | 
+| WrapperStyle | string? | style string     | Adds your styles to wrapper                     |
+| ZIndex       | int     | int              | sets z-index style                              |
 
 <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. 
 

diff --git a/src/BlazorStrap-Docs/wwwroot/Static/V5/Components/Toast.md b/src/BlazorStrap-Docs/wwwroot/Static/V5/Components/Toast.md
@@ -27,10 +27,12 @@ See [shared](layout/shared) for additional parameters
 
 ### Toaster Example
 #### Component \<BSToaster\>
-| Parameter    | Type    | Valid            | Remarks/Output                  | 
-|--------------|---------|------------------|---------------------------------|
-| WrapperClass | string  | css class string | Adds your class(es) to wrapper  | {.table-striped .p-2}
-| WrapperStyle | string? | style string     | Adds your styles to wrapper     | 
+| Parameter    | Type    | Valid            | Remarks/Output                                  | 
+|--------------|---------|------------------|-------------------------------------------------|
+| Position     | Enum    | CssPosition      | sets position fixed, static, absolute, relative | {.table-striped .p-2}
+| WrapperClass | string  | css class string | Adds your class(es) to wrapper                  | 
+| WrapperStyle | string? | style string     | Adds your styles to wrapper                     |
+| ZIndex       | int     | int              | sets z-index style                              |
 
 <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. 
 

diff --git a/src/BlazorStrap.V4/Components/BSToaster.cs b/src/BlazorStrap.V4/Components/BSToaster.cs
@@ -27,15 +27,15 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
                         builder.CloseElement();
                         builder.OpenElement(i, "div");
                         builder.AddAttribute(i + 1, "class", GetClass(toast.Placement));
-                        builder.AddAttribute(i + 2, "style", GetStyle(toast.Placement));
+                        builder.AddAttribute(i + 2, "style", $"z-index:{ZIndex};{GetStyle(toast.Placement)}{WrapperStyle}");
                     }
 
                     //Open first wrapper
                     if (i == 0)
                     {
                         builder.OpenElement(i, "div");
                         builder.AddAttribute(i + 1, "class", GetClass(toast.Placement));
-                        builder.AddAttribute(i + 2, "style", GetStyle(toast.Placement));
+                        builder.AddAttribute(i + 2, "style", $"z-index:{ZIndex};{GetStyle(toast.Placement)}{WrapperStyle}");
                     }
 
                     builder.OpenElement(i + 3, "div");
@@ -56,25 +56,26 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
 
         protected override string GetClass(Toast pos)
         {
+            var position = $"position-{Position.NameToLower()}";
             var rootClassBuilder = new CssBuilder("blazorstrap-toaster")
              .AddClass(WrapperClass, !string.IsNullOrEmpty(WrapperClass))
              .Build().ToNullString();
-            return rootClassBuilder + " position-absolute";
+            return rootClassBuilder + $" {position}";
         }
 
         protected string GetStyle(Toast pos)
         {
             return WrapperStyle + pos switch
             {
-                Toast.TopLeft => "top:0;left:0",
-                Toast.TopCenter => "top:0;left:50%;transform:translateX(-50%)",
-                Toast.TopRight => "top:0;right:0",
+                Toast.TopLeft => "top:0;left:0;",
+                Toast.TopCenter => "top:0;left:50%;transform:translateX(-50%);",
+                Toast.TopRight => "top:0;right:0;",
                 Toast.MiddleLeft => "top:50%;left:0;transform: translateY(-50%)!important;",
                 Toast.MiddleCenter => "top:50%;left:50%;transform: translate(-50%,-50%)!important;",
                 Toast.MiddleRight => "top:50%;right:0;transform: translateY(-50%)!important;",
-                Toast.BottomLeft => "bottom:0;left:0",
+                Toast.BottomLeft => "bottom:0;left:0;",
                 Toast.BottomCenter => "bottom:0;left:50%;transform: translateX(-50%)!important;",
-                _ => "bottom:0;right:0"
+                _ => "bottom:0;right:0;"
             };
         }