Update docs and fix the overing thinking on progress bar math

chanan · Dec 27, 2021 · 018a26c · 018a26c
1 parent 2e0322e
commit 018a26c
Show file tree

Hide file tree

Showing 113 changed files with 1,263 additions and 124 deletions.
diff --git a/docs/V5/BlazorStrap.WASM.styles.css b/docs/V5/BlazorStrap.WASM.styles.css
@@ -1,2 +1,3 @@
+@import 'docs/BlazorStrap-Docs.bundle.scp.css';
 @import '_content/BlazorStrap/BlazorStrap.bundle.scp.css';
 
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/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.Text.RegularExpressions.dll b/docs/V5/_framework/System.Text.RegularExpressions.dll
diff --git a/docs/V5/_framework/System.Text.RegularExpressions.dll.br b/docs/V5/_framework/System.Text.RegularExpressions.dll.br
diff --git a/docs/V5/_framework/System.Text.RegularExpressions.dll.gz b/docs/V5/_framework/System.Text.RegularExpressions.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-6SmotuhRL59w4d8XcAQnT6Ns02rCHJq5su75AeGKSe0=",
-      "BlazorStrap.dll": "sha256-tAg9k0+qvPQHdvtLaBvVlMPBjl\/DgDzq\/l5SSAcOuZg=",
-      "BlazorStrap.WASM.dll": "sha256-o6WSeV1yhA4RncpWhtM1dnDA1n0z7G6pbALILSEH4X8=",
+      "BlazorStrap-Docs.dll": "sha256-QPsBBm3ID+Ljd1DXCkbxx19xTCFvPARHwxrFFoJWA68=",
+      "BlazorStrap.dll": "sha256-zhaNXMlq591uel9LGwiLg1mg74cxKGP1GaZXWQT95qk=",
+      "BlazorStrap.WASM.dll": "sha256-1Obwaj0xMRDR3w8Fsc+SNIzL+\/0DDD9chAumFXbWLpc=",
       "ColorCode.dll": "sha256-hF07ps23in9mbwaN4uSoZklQVfyJIw2Ep4R448bfkOk=",
       "Markdig.dll": "sha256-9\/ICq2gSL+hjhMdZXNoIRs8wyZFtZpr3yFSW+RQVdoQ=",
       "Markdig.SyntaxHighlighting.dll": "sha256-qkuHEt7805bTVSkNsvDi5CT5M3Q4VSK619BHVC+FdKs=",
@@ -48,7 +48,7 @@
       "System.Net.Http.dll": "sha256-SG1ErxalwWL+oTNjRbGYkVXkuk1onIlIJTlyaGj\/d44=",
       "System.Net.Primitives.dll": "sha256-3sI1NNIqa\/NbsiwoB9ge3te+b4FnMCiOJO1UBN3PeUA=",
       "System.ObjectModel.dll": "sha256-UG4O9ciL695mY+vsFCa\/RG7XLv2tIXBQF2ChiVBasFE=",
-      "System.Private.CoreLib.dll": "sha256-7CS2MxOH9nrW6zKJUFrgQsHiqsVmoyuF2e1hVlPDQ14=",
+      "System.Private.CoreLib.dll": "sha256-BssDLPaUB6rCJJ2BEhbhF71aPR\/00S4IiunH18MN0E4=",
       "System.Private.Runtime.InteropServices.JavaScript.dll": "sha256-C00EjhH1PgivSevy5JGkGQ6O6iWgPnZ6YYi9\/nQBPa4=",
       "System.Private.Uri.dll": "sha256-S5HrTdUD7cIVcEOhVBdvWtQkO2n5w9JKWvt0tJQJHeQ=",
       "System.Resources.ResourceManager.dll": "sha256-gzbrKVMiTK1iPLy43DV1yztdRJ7ai4r7P0dbHJgXLjE=",
@@ -57,7 +57,7 @@
       "System.Runtime.Extensions.dll": "sha256-86NAVOpK5\/GQ2C1DX7ZuekbgQlBEscXP4cMkAkOCjqI=",
       "System.Text.Encodings.Web.dll": "sha256-wpoIHsG+HQYfKV\/LKarpVXK2PbZYvgTPWpbVVJq210Y=",
       "System.Text.Json.dll": "sha256-HMBYGXVQ+t7wMbKPaoLSwA1ckk304a+PfRaNrtmMPRM=",
-      "System.Text.RegularExpressions.dll": "sha256-OQ5DPeTuHKGXWcEXYjwSHz2IiDaN6xrGXb2mfqbPDYU=",
+      "System.Text.RegularExpressions.dll": "sha256-RbA+qwbxqD3VjxNNeMPC3kY61fh5iPzv43lT8Bcb3qE=",
       "System.Threading.dll": "sha256-p4CYU7JQH61ZxpDuI1oa0NU+Mz931l7kZUJ\/ehgDL5w="
     },
     "extensions": 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/css/docs.css b/docs/V5/css/docs.css
@@ -5,6 +5,23 @@
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
+text#svg-text  {
+    animation-name: animateSvg;
+    transform-origin: 50% 50%;
+    animation-duration: 5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+}
+
+@keyframes animateSvg  {
+    from  {
+        transform: rotate(0deg);
+    }
+
+    to  {
+        transform: rotate(360deg);
+    }
+}
 
 .nav-link.active
 {

diff --git a/docs/V5/docs/BlazorStrap-Docs.bundle.scp.css b/docs/V5/docs/BlazorStrap-Docs.bundle.scp.css
@@ -0,0 +1,18 @@
+/* docs/Samples/Content/Images/Images6.razor.rz.scp.css */
+text#svg-text[b-1lgjffb7c2]  {
+    animation-name: animateSvg-b-1lgjffb7c2;
+    transform-origin: 50% 50%;
+    animation-duration: 5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+}
+
+@keyframes animateSvg-b-1lgjffb7c2  {
+    from  {
+        transform: rotate(0deg);
+    }
+
+    to  {
+        transform: rotate(360deg);
+    }
+}
diff --git a/docs/V5/docs/FigurePlaceHolder.svg b/docs/V5/docs/FigurePlaceHolder.svg
diff --git a/docs/V5/docs/Sample.svg b/docs/V5/docs/Sample.svg
diff --git a/docs/V5/docs/Samples/Content/Figures/Figures1.md b/docs/V5/docs/Samples/Content/Figures/Figures1.md
@@ -0,0 +1,4 @@
+<BSFigure>
+    <BSImage Source="400x300" IsRounded="true" IsFluid="true" IsPlaceholder="true" />
+    <BSFigureCaption>A caption for the above image.</BSFigureCaption>
+</BSFigure>
diff --git a/docs/V5/docs/Samples/Content/Figures/Figures2.md b/docs/V5/docs/Samples/Content/Figures/Figures2.md
@@ -0,0 +1,7 @@
+<BSFigure>
+    <BSSvg IsRounded="true" Class="bd-placeholder-img" width="400" height="300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 400x300" preserveAspectRatio="xMidYMid slice" focusable="false">
+        <rect width="100%" height="100%" fill="#868e96"></rect>
+        <text x="50%" y="50%" fill="#dee2e6" dy=".3em">400x300</text>
+    </BSSvg>
+    <BSFigureCaption Class="@BS.Text_End">A caption for the above image to the right.</BSFigureCaption>
+</BSFigure>
diff --git a/docs/V5/docs/Samples/Content/Figures/Figures3.md b/docs/V5/docs/Samples/Content/Figures/Figures3.md
@@ -0,0 +1,4 @@
+<BSFigure>
+    <BSSvg Source="docs/FigurePlaceHolder.svg"/>
+    <BSFigureCaption>SVG Loader</BSFigureCaption>
+</BSFigure>
diff --git a/docs/V5/docs/Samples/Content/Images/Images1.md b/docs/V5/docs/Samples/Content/Images/Images1.md
@@ -0,0 +1 @@
+<BSImage Source="1200x250xResponsive image" IsFluid="true"  IsPlaceholder="true"/>
diff --git a/docs/V5/docs/Samples/Content/Images/Images2.md b/docs/V5/docs/Samples/Content/Images/Images2.md
@@ -0,0 +1,2 @@
+<!-- Width Set so high for the demo -->
+<BSImage Source="200x200" IsFluid="true" IsThumbnail="true"  IsPlaceholder="true"/>
diff --git a/docs/V5/docs/Samples/Content/Images/Images3.md b/docs/V5/docs/Samples/Content/Images/Images3.md
@@ -0,0 +1,2 @@
+<BSImage Source="200x200" IsRounded="true" IsPlaceholder="true" Align="Align.Start"/>
+<BSImage Source="200x200" IsRounded="true" IsThumbnail="true"  IsPlaceholder="true"  Align="Align.End"/>
diff --git a/docs/V5/docs/Samples/Content/Images/Images4.md b/docs/V5/docs/Samples/Content/Images/Images4.md
@@ -0,0 +1 @@
+<BSImage Source="200x200" IsRounded="true" IsPlaceholder="true"  Align="Align.Center" />
diff --git a/docs/V5/docs/Samples/Content/Images/Images5.md b/docs/V5/docs/Samples/Content/Images/Images5.md
@@ -0,0 +1,3 @@
+<BSDiv Class="@BS.Text_Center">
+    <BSImage Source="200x200" IsFluid="true" IsThumbnail="true" IsPlaceholder="true"/>
+</BSDiv>
diff --git a/docs/V5/docs/Samples/Content/Images/Images6.md b/docs/V5/docs/Samples/Content/Images/Images6.md
@@ -0,0 +1 @@
+<BSSvg Source="docs/Sample.svg" IsFluid="true"/>
diff --git a/docs/V5/docs/Samples/Content/Images/Images6.razor.md b/docs/V5/docs/Samples/Content/Images/Images6.razor.md
@@ -0,0 +1,17 @@
+text#svg-text  {
+    animation-name: animateSvg;
+    transform-origin: 50% 50%;
+    animation-duration: 5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+}
+
+@keyframes animateSvg  {
+    from  {
+        transform: rotate(0deg);
+    }
+
+    to  {
+        transform: rotate(360deg);
+    }
+}
diff --git a/docs/V5/docs/Samples/Content/Tables/Tables1.md b/docs/V5/docs/Samples/Content/Tables/Tables1.md
@@ -0,0 +1,114 @@
+<BSTable Color="OTableColor" IsBordered="OIsBordered" IsBorderLess="OIsBorderLess" IsCaptionTop="OIsCaptionTop" IsStriped="OIsStriped">
+    <caption>List of users</caption>
+    <BSTHead>
+        <BSTR>
+            <BSTD>#</BSTD>
+            <BSTD>First</BSTD>
+            <BSTD>Last</BSTD>
+            <BSTD>Handle</BSTD>
+        </BSTR>
+    </BSTHead>
+    <BSTBody>
+        <BSTR>
+            <BSTD AlignRow="OAlignRow" Color="OTDColor" IsActive="OIsActive">1</BSTD>
+            <BSTD>John</BSTD>
+            <BSTD>Doe</BSTD>
+            <BSTD>JohnDoe <br/>media.com</BSTD>
+        </BSTR>
+        <BSTR AlignRow="OTRAlignRow" Color="OTRColor" IsActive="OTRIsActive">
+            <BSTD>2</BSTD>
+            <BSTD>Jane</BSTD>
+            <BSTD>Doe</BSTD>
+            <BSTD>JaneDoe <br/>media.com</BSTD>
+        </BSTR>
+    </BSTBody>
+    <BSTFoot>
+        <BSTR>
+            <BSTD ColSpan="4">Spanned Table Footer Here</BSTD>
+        </BSTR>
+
+    </BSTFoot>
+</BSTable>
+<!--\\-->
+<BSDiv class="@BS.Input_Group" MarginBottom="Margins.Medium">
+    <span class="@BS.Input_Group_Text">Table Backgroud Color</span>
+    <BSInput InputType="InputType.Select" @bind-Value="OTableColor">
+        <option value="@BSColor.Default">None</option>
+        <option value="@BSColor.Primary">Primary</option>
+        <option value="@BSColor.Secondary">Secondary</option>
+        <option value="@BSColor.Success">Success</option>
+        <option value="@BSColor.Danger">Danger</option>
+        <option value="@BSColor.Warning">Warning</option>
+        <option value="@BSColor.Info">Info</option>
+        <option value="@BSColor.Light">Light</option>
+        <option value="@BSColor.Dark">Dark</option>
+    </BSInput>
+    <BSInputCheckbox @bind-Value="OIsBordered" IsToggle="true" IsOutlined="true" Color="BSColor.Primary" CheckedValue="true" UnCheckedValue="false">IsBordered</BSInputCheckbox>
+    <BSInputCheckbox @bind-Value="OIsBorderLess" IsToggle="true" IsOutlined="true" Color="BSColor.Secondary" CheckedValue="true" UnCheckedValue="false">IsBorderLess</BSInputCheckbox>
+    <BSInputCheckbox @bind-Value="OIsCaptionTop" IsToggle="true" IsOutlined="true" Color="BSColor.Success" CheckedValue="true" UnCheckedValue="false">IsCaptionTop</BSInputCheckbox>
+    <BSInputCheckbox @bind-Value="OIsStriped" IsToggle="true" IsOutlined="true" Color="BSColor.Danger" CheckedValue="true" UnCheckedValue="false">IsStriped</BSInputCheckbox>
+</BSDiv>
+<BSDiv class="@BS.Input_Group" MarginBottom="Margins.Medium">
+    <span class="@BS.Input_Group_Text">Row 2 Backgroud Color</span>
+    <BSInput InputType="InputType.Select" @bind-Value="OTRColor">
+        <option value="@BSColor.Default">None</option>
+        <option value="@BSColor.Primary">Primary</option>
+        <option value="@BSColor.Secondary">Secondary</option>
+        <option value="@BSColor.Success">Success</option>
+        <option value="@BSColor.Danger">Danger</option>
+        <option value="@BSColor.Warning">Warning</option>
+        <option value="@BSColor.Info">Info</option>
+        <option value="@BSColor.Light">Light</option>
+        <option value="@BSColor.Dark">Dark</option>
+    </BSInput>
+    <span class="@BS.Input_Group_Text"> Align</span>
+    <BSInput InputType="InputType.Select" @bind-Value="OTRAlignRow">
+        <option value="@AlignRow.Default">None</option>
+        <option value="@AlignRow.Top">Top</option>
+        <option value="@AlignRow.Middle">Middle</option>
+        <option value="@AlignRow.Bottom">Bottom</option>
+    </BSInput>
+    <BSInputCheckbox @bind-Value="OTRIsActive" IsToggle="true" IsOutlined="true" Color="BSColor.Primary" CheckedValue="true" UnCheckedValue="false">TRIsActive</BSInputCheckbox>
+</BSDiv>
+<BSDiv class="@BS.Input_Group" MarginBottom="Margins.Medium">
+    <span class="@BS.Input_Group_Text">Row 1 Col 1 Backgroud Color</span>
+    <BSInput InputType="InputType.Select" @bind-Value="OTDColor">
+        <option value="@BSColor.Default">None</option>
+        <option value="@BSColor.Primary">Primary</option>
+        <option value="@BSColor.Secondary">Secondary</option>
+        <option value="@BSColor.Success">Success</option>
+        <option value="@BSColor.Danger">Danger</option>
+        <option value="@BSColor.Warning">Warning</option>
+        <option value="@BSColor.Info">Info</option>
+        <option value="@BSColor.Light">Light</option>
+        <option value="@BSColor.Dark">Dark</option>
+    </BSInput>
+    <span class="@BS.Input_Group_Text"> Align</span>
+        <BSInput InputType="InputType.Select" @bind-Value="OAlignRow">
+            <option value="@AlignRow.Default">None</option>
+            <option value="@AlignRow.Top">Top</option>
+            <option value="@AlignRow.Middle">Middle</option>
+            <option value="@AlignRow.Bottom">Bottom</option>
+        </BSInput>
+    <BSInputCheckbox @bind-Value="OIsActive" IsToggle="true" IsOutlined="true" Color="BSColor.Primary" CheckedValue="true" UnCheckedValue="false">TRIsActive</BSInputCheckbox>
+</BSDiv>
+<!--//-->
+<!-- Options Form not shown
+@code {
+    // BSTable Parameters
+    private BSColor OTableColor { get; set; } = BSColor.Default; // Not Set
+    private bool OIsBordered { get; set; } 
+    private bool OIsBorderLess { get; set; }
+    private bool OIsCaptionTop { get; set; }
+    private bool OIsStriped { get; set; }
+    
+    // BSTR Parameters
+    private AlignRow OTRAlignRow { get; set; }
+    private BSColor OTRColor { get; set; } = BSColor.Default; // Not Set
+    private bool OTRIsActive { get; set; }
+    // BSTD Parameters
+    private AlignRow OAlignRow { get; set; }
+    private BSColor OTDColor { get; set; } = BSColor.Default; // Not Set
+    private bool OIsActive { get; set; }
+}
+
diff --git a/docs/V5/docs/Static/Components/Buttons.md b/docs/V5/docs/Static/Components/Buttons.md
@@ -3,8 +3,8 @@
 **Work inprogress** Documentation is still being written for this component
 :::
 #### Component \<BSButton\>
+See [shared](layout/shared) for additional parameters   
 
-See [shared](layout/shared) for additional parameters    
 :::
 
 | Parameter  | Type          | Valid          | Remarks/Output               | 

diff --git a/docs/V5/docs/Static/Components/Card.md b/docs/V5/docs/Static/Components/Card.md
@@ -1,6 +1,14 @@
 ## Cards
-:::{.bd-callout .bd-callout-info}
-**Work inprogress** Documentation is still being written for this component
+
+#### Components \<BSCard\> \<BSCardBody\> \<BSCardHeader\> \<BSCardFooter\>
+See [shared](layout/shared) for additional parameters
+
+:::
+
+| Parameter | Type | Valid   | Remarks/Output | 
+|-----------|------|---------|----------------|
+| Color     | Enum | BSColor | `.bg-[]`       | {.table-striped .p-2}
+
 :::
 
-#### Component \<BSCard\>
+For examples of cards inuse see bootstraps official documentation
diff --git a/docs/V5/docs/Static/Components/Pagination.md b/docs/V5/docs/Static/Components/Pagination.md
@@ -3,4 +3,26 @@
 **Work inprogress** Documentation is still being written for this component
 :::
 
-#### Component \<BSPagination\>
+#### Component \<BSPagination\>
+See [shared](layout/shared) for additional parameters    
+
+:::
+
+| Parameter | Type | Valid   | Remarks/Output        | 
+|-----------|------|---------|-----------------------|
+| Align     | Enum | Align   | `.justify-content-[]` | {.table-striped .p-2}
+| Color     | Enum | BSColor | `.bg-[]`              | 
+| Size      | Enum | Size    | `.pagination-[]`      |
+
+:::
+
+#### Component \<BSPaginationItem\>
+
+:::
+
+| Parameter | Type | Valid      | Remarks/Output | 
+|-----------|------|------------|----------------|
+| Color     | Enum | BSColor    | `.bg-[]`       | {.table-striped .p-2} 
+| IsActive  | bool | true/false | `.active`      |
+
+:::
diff --git a/docs/V5/docs/Static/Components/Popovers.md b/docs/V5/docs/Static/Components/Popovers.md
@@ -1,7 +1,5 @@
 ## Popover
-:::{.bd-callout .bd-callout-info}
-**Work inprogress** Documentation is still being written for this component
-:::
+
 #### Component \<BSPopover\>
 See [shared](layout/shared) for additional parameters    
 :::

diff --git a/docs/V5/docs/Static/Components/Progress.md b/docs/V5/docs/Static/Components/Progress.md
@@ -5,6 +5,15 @@
 #### Component \<BSProgress\>
 See [shared](layout/shared) for additional parameters    
 
-### Example
+#### Component \<BSListGroupItem\>
+:::
+
+| Parameter | Type | Valid      | Remarks/Output        | 
+|-----------|------|------------|-----------------------|
+| Color     | Enum | BSColor    | `.bg-[]`              | {.table-striped .p-2}
+| IsActive  | bool | true/false | `.active`             |
 
+:::
+
+### Example
 {{sample=Components/Progress/Progress1}}
diff --git a/docs/V5/docs/Static/Components/Toast.md b/docs/V5/docs/Static/Components/Toast.md
@@ -5,6 +5,20 @@
 #### Component \<BSToast\>
 See [shared](layout/shared) for additional parameters    
 
+:::
+
+| Parameter    | Type           | Valid          | Remarks/Output | 
+|--------------|----------------|----------------|----------------|
+| Color        | Enum           | BSColor        | `.bg-[]`       | {.table-striped .p-2}
+| IsActive     | bool           | true/false     | `.active`      |
+| ContentClass | string         | string         |                |
+| HeaderClass  | string         | string         |                |
+| Content      | RenderFragment | RenderFragment | Nested Content |
+| Header       | RenderFragment | RenderFragment | Nested Content |
+| OnClick      | EventCallback  | MouseEventArgs |                |
+
+:::
+
 ### Example
 
 {{sample=Components/Toast/Toast1}}
diff --git a/docs/V5/docs/Static/Components/Tooltips.md b/docs/V5/docs/Static/Components/Tooltips.md
@@ -1,7 +1,5 @@
 ## Tooltips
-:::{.bd-callout .bd-callout-info}
-**Work inprogress** Documentation is still being written for this component
-:::
+
 #### Component \<BSTooltip\>
 See [shared](layout/shared) for additional parameters    
 :::

diff --git a/docs/V5/docs/Static/Content/Figures.md b/docs/V5/docs/Static/Content/Figures.md
@@ -0,0 +1,9 @@
+## Figures
+#### Component \<BSFigure\> \<BSFigureCaption\>
+See [shared](layout/shared) for parameters    
+
+{{sample=Content/Figures/Figures1}}
+
+{{sample=Content/Figures/Figures2}}
+
+{{sample=Content/Figures/Figures3}}
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1,3 @@
		@import 'docs/BlazorStrap-Docs.bundle.scp.css';
		@import '_content/BlazorStrap/BlazorStrap.bundle.scp.css';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<BSImage Source="1200x250xResponsive image" IsFluid="true" IsPlaceholder="true"/>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<!-- Width Set so high for the demo -->
		<BSImage Source="200x200" IsFluid="true" IsThumbnail="true" IsPlaceholder="true"/>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<BSImage Source="200x200" IsRounded="true" IsPlaceholder="true" Align="Align.Start"/>
		<BSImage Source="200x200" IsRounded="true" IsThumbnail="true" IsPlaceholder="true" Align="Align.End"/>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<BSSvg Source="docs/Sample.svg" IsFluid="true"/>