Tag helper demo css

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Alerts.cshtml

@@ -4,6 +4,12 @@
     ViewData["Title"] = "Alerts";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Alerts</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/alerts/" target="_blank"> Bootstrap Alert</a>.</p>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Badges.cshtml

@@ -4,6 +4,12 @@
     ViewData["Title"] = "Badges";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Badges</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/badge/" target="_blank"> Bootstrap Badge</a>.</p>
@@ -13,8 +19,8 @@
 <div class="demo-with-code">
     <div class="demo-area">
 
-        <span abp-badge="Primary" >I'm an abp badge!</span>
+        <span abp-badge="Primary">I'm an abp badge!</span>
-        <span abp-badge-pill="Warning" >I'm an abp pill badge!</span>
+        <span abp-badge-pill="Warning">I'm an abp pill badge!</span>
         <a abp-badge="Danger" href="#">I'm an abp badge link!</a>
         <a abp-badge-pill="Success" href="#">I'm an abp pill badge link!</a>
 

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Blockquotes.cshtml

@@ -4,6 +4,12 @@
     ViewData["Title"] = "Badges";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Blockquotes</h2>
 
 <p>Based on <a href="http://getbootstrap.com/docs/4.1/content/typography/#blockquotes" target="_blank"> Bootstrap Blockquotes</a>.</p>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Borders.cshtml

@@ -4,6 +4,12 @@
     ViewData["Title"] = "Borders";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Borders</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/border/" target="_blank"> Bootstrap Border</a>.</p>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Breadcrumbs.cshtml

@@ -4,6 +4,12 @@
     ViewData["Title"] = "Breadcrumbs";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Breadcrumbs</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/breadcrumbs/" target="_blank"> Bootstrap Breadcrumb</a>.</p>
@@ -14,9 +20,9 @@
     <div class="demo-area">
 
         <abp-breadcrumb>
-            <abp-breadcrumb-item href="#" title="Home"/>
+            <abp-breadcrumb-item href="#" title="Home" />
-            <abp-breadcrumb-item href="#" title="Library"/>
+            <abp-breadcrumb-item href="#" title="Library" />
-            <abp-breadcrumb-item title="Page"/>
+            <abp-breadcrumb-item title="Page" />
         </abp-breadcrumb>
 
     </div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Buttons.cshtml

@@ -4,6 +4,12 @@
     ViewData["Title"] = "Buttons";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Buttons</h2>
 
 <p>Based on <a href="http://getbootstrap.com/docs/4.1/components/buttons/" target="_blank"> Bootstrap button</a>.</p>
@@ -12,7 +18,7 @@
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <abp-button text="Default"/>
+        <abp-button text="Default" />
         <abp-button button-type="Primary">Primary</abp-button>
         <abp-button button-type="Secondary">Secondary</abp-button>
         <abp-button button-type="Success">Success</abp-button>
@@ -42,9 +48,9 @@
 <h4># Example</h4>
 
 <div class="demo-with-code">
-    <div class="demo-area">
+    <div class="demo-area" style="margin: 35px;">
         <a abp-button="Primary" href="#">Link</a>
-        <abp-button button-type="Primary" type="submit" text="Button"/>
+        <abp-button button-type="Primary" type="submit" text="Button" />
         <input abp-button="Primary" value="Input" />
         <input abp-button="Primary" type="submit" value="Submit" />
         <input abp-button="Primary" type="reset" value="Reset" />
@@ -64,8 +70,8 @@
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <abp-button size="Large" text="Large"/>
+        <abp-button size="Large" text="Large" />
-        <abp-button size="Small" text="Small"/>
+        <abp-button size="Small" text="Small" />
     </div>
     <div class="code-area">
         <pre>
@@ -79,7 +85,7 @@
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <abp-button icon-type="FontAwesome" icon="info" text="With Icon"/>
+        <abp-button icon-type="FontAwesome" icon="info" text="With Icon" />
     </div>
     <div class="code-area">
         <pre>
@@ -92,7 +98,7 @@
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <abp-button text="Busy" busy-text="Saving..."/>
+        <abp-button text="Busy" busy-text="Saving..." />
     </div>
     <div class="code-area">
         <pre>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Cards.cshtml

@@ -4,19 +4,14 @@
     ViewData["Title"] = "Cards";
 }
 
-<h2>Cards</h2>
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
 
-@*
+<h2>Cards</h2>
-    <h4># Example</h4>
 
-    <div class="demo-with-code">
-        <div class="demo-area">
-        </div>
-        <div class="code-area">
-    <pre></pre>
-        </div>
-    </div>
-*@
 
 <p>Based on <a href="http://getbootstrap.com/docs/4.1/components/card/" target="_blank"> Bootstrap card</a>.</p>
 

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Carousel.cshtml

@@ -4,6 +4,12 @@
     ViewData["Title"] = "Carousels";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Carousels</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/content/images/" target="_blank"> Bootstrap Carousel</a>.</p>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Collapse.cshtml

@@ -5,6 +5,12 @@
     ViewData["Title"] = "Collapse";
 }
 
+
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
 <h2>Collapse</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/collapse/" target="_blank"> Bootstrap Collapse</a>.</p>
@@ -48,13 +54,13 @@
 
 <div class="demo-with-code">
     <div class="demo-area">
-        
+
         <p>
             <abp-collapse-button buton-type="Success" body-id="collapseExample">
                 Toggle
             </abp-collapse-button>
         </p>
-        
+
         <abp-collapse-body id="collapseExample" show="true">
             3Anim pariatur  wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
         </abp-collapse-body>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Dropdowns.cshtml

@@ -4,6 +4,12 @@
     ViewData["Title"] = "Dropdowns";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Dropdowns</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/dropdowns/" target="_blank"> Bootstrap button</a>.</p>
@@ -14,13 +20,13 @@
     <div class="demo-area">
 
         <abp-dropdown>
-            <abp-dropdown-button button-type="Primary" text="Dropdown"/>
+            <abp-dropdown-button button-type="Primary" text="Dropdown" />
             <abp-dropdown-menu>
                 <abp-dropdown-header>Dropdown header</abp-dropdown-header>
                 <abp-dropdown-item href="#" active="true">Action</abp-dropdown-item>
                 <abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item>
                 <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
-                <abp-dropdown-divider/>
+                <abp-dropdown-divider />
                 <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
             </abp-dropdown-menu>
         </abp-dropdown>
@@ -49,13 +55,13 @@
     <div class="demo-area">
 
         <abp-dropdown direction="Right">
-            <abp-dropdown-button dropdown-style="Split" button-type="Danger" text="Dropdown"/>
+            <abp-dropdown-button dropdown-style="Split" button-type="Danger" text="Dropdown" />
             <abp-dropdown-menu>
                 <abp-dropdown-header>Dropdown header</abp-dropdown-header>
                 <abp-dropdown-item href="#" active="true">Action</abp-dropdown-item>
                 <abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item>
                 <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
-                <abp-dropdown-divider/>
+                <abp-dropdown-divider />
                 <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
             </abp-dropdown-menu>
         </abp-dropdown>
@@ -84,13 +90,13 @@
     <div class="demo-area">
 
         <abp-dropdown direction="Up">
-            <abp-dropdown-button Link="true" button-type="Primary" text="Dropdown"/>
+            <abp-dropdown-button Link="true" button-type="Primary" text="Dropdown" />
             <abp-dropdown-menu align="Right">
                 <abp-dropdown-header>Dropdown header</abp-dropdown-header>
                 <abp-dropdown-item href="#" active="true">Action</abp-dropdown-item>
                 <abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item>
                 <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
-                <abp-dropdown-divider/>
+                <abp-dropdown-divider />
                 <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
             </abp-dropdown-menu>
         </abp-dropdown>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml

@@ -6,13 +6,19 @@
     ViewData["Title"] = "Forms";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Dynamic Forms</h2>
 
 <h4># Dynamic Form Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <abp-dynamic-form abp-model="@Model.PersonInput"/>
+        <abp-dynamic-form abp-model="@Model.PersonInput" />
         <hr />
         <h5>Posted Values:</h5>
         <div>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml

@@ -4,6 +4,12 @@
     ViewData["Title"] = "Grids";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Grids</h2>
 
 <p>Based on <a href="http://getbootstrap.com/docs/4.1/layout/grid/" target="_blank"> Bootstrap grid</a>.</p>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Images.cshtml

@@ -4,6 +4,12 @@
     ViewData["Title"] = "Images";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Images</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/content/images/" target="_blank"> Bootstrap Images</a>.</p>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ListGroup.cshtml

@@ -4,6 +4,12 @@
     ViewData["Title"] = "List Groups";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>List Groups</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/list-group/" target="_blank"> Bootstrap List Group</a>.</p>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Modals.cshtml

@@ -5,6 +5,12 @@
     ViewData["Title"] = "Modals";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Modals</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/modal/" target="_blank"> Bootstrap Modal</a>.</p>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Navs.cshtml

@@ -4,6 +4,12 @@
     ViewData["Title"] = "Navs";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Navs</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/navs/" target="_blank"> Bootstrap Navs</a>.</p>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml

@@ -4,6 +4,12 @@
     ViewData["Title"] = "Paginator";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Paginator</h2>
 
 <h4># Paginator Examples</h4>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Popovers.cshtml

@@ -4,6 +4,12 @@
     ViewData["Title"] = "Badges";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Popovers</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/Popovers/" target="_blank"> Bootstrap Popovers</a>.</p>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ProgressBars.cshtml

@@ -4,6 +4,12 @@
     ViewData["Title"] = "Progress Bars";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Progress Bars</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/progress/" target="_blank"> Bootstrap Progress Bars</a>.</p>
@@ -14,8 +20,8 @@
     <div class="demo-area">
 
         <abp-progress>
-            <abp-progress-bar value="70"/>
+            <abp-progress-bar value="70" />
-            
+
         </abp-progress>
         <br />
         <abp-progress>
@@ -30,7 +36,7 @@
         </abp-progress>
         <br />
         <abp-progress>
-            <abp-progress-bar type="Dark" value="10" min-value="5" max-value="15"  strip="true">
+            <abp-progress-bar type="Dark" value="10" min-value="5" max-value="15" strip="true">
                 %50
             </abp-progress-bar>
         </abp-progress>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tables.cshtml

@@ -4,6 +4,12 @@
     ViewData["Title"] = "Tables";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Tables</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/content/Tables/" target="_blank"> Bootstrap Tables</a>.</p>
@@ -15,32 +21,32 @@
 
         <abp-table striped-rows="true" hoverable-rows="true" responsive-sm="true">
             <thead theme="Dark">
-            <tr>
+                <tr>
-                <th scope="Column">#</th>
+                    <th scope="Column">#</th>
-                <th scope="Column">First</th>
+                    <th scope="Column">First</th>
-                <th scope="Column">Last</th>
+                    <th scope="Column">Last</th>
-                <th scope="Column">Handle</th>
+                    <th scope="Column">Handle</th>
-            </tr>
+                </tr>
             </thead>
             <tbody>
-            <tr>
+                <tr>
-                <th scope="Row">1</th>
+                    <th scope="Row">1</th>
-                <td>Mark</td>
+                    <td>Mark</td>
-                <td>Otto</td>
+                    <td>Otto</td>
-                <td  abp-table-style="Danger">mdo</td>
+                    <td abp-table-style="Danger">mdo</td>
-            </tr>
+                </tr>
-            <tr abp-table-style="Warning">
+                <tr abp-table-style="Warning">
-                <th scope="Row">2</th>
+                    <th scope="Row">2</th>
-                <td>Jacob</td>
+                    <td>Jacob</td>
-                <td>Thornton</td>
+                    <td>Thornton</td>
-                <td>fat</td>
+                    <td>fat</td>
-            </tr>
+                </tr>
-            <tr>
+                <tr>
-                <th scope="Row">3</th>
+                    <th scope="Row">3</th>
-                <td abp-table-style="Success">Larry</td>
+                    <td abp-table-style="Success">Larry</td>
-                <td>the Bird</td>
+                    <td>the Bird</td>
-                <td>twitter</td>
+                    <td>twitter</td>
-            </tr>
+                </tr>
             </tbody>
         </abp-table>
 

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tabs.cshtml

@@ -4,6 +4,12 @@
     ViewData["Title"] = "Tabs";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Tabs</h2>
 
 <p>Based on <a href="http://getbootstrap.com/docs/4.1/components/navs/#tabs" target="_blank"> Bootstrap tab</a>.</p>
@@ -15,7 +21,7 @@
         <abp-tabs>
             <abp-tab title="Home">
                 Content_Home
-            </abp-tab>   
+            </abp-tab>
             <abp-tab title="profile">
                 Content_Profile
             </abp-tab>
@@ -48,7 +54,7 @@
         <abp-tabs name="TabId">
             <abp-tab name="nav-home" title="Home">
                 Content_Home
-            </abp-tab>   
+            </abp-tab>
             <abp-tab name="nav-profile" active="true" title="profile">
                 Content_Profile
             </abp-tab>
@@ -81,7 +87,7 @@
         <abp-tabs tab-style="Pill">
             <abp-tab active="true" title="Home">
                 Content_Home
-            </abp-tab>   
+            </abp-tab>
             <abp-tab title="profile">
                 Content_Profile
             </abp-tab>
@@ -114,7 +120,7 @@
         <abp-tabs tab-style="PillVertical" vertical-header-size="_2">
             <abp-tab active="true" title="Home">
                 Content_Home
-            </abp-tab>   
+            </abp-tab>
             <abp-tab title="profile">
                 Content_Profile
             </abp-tab>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tooltips.cshtml

@@ -4,6 +4,12 @@
     ViewData["Title"] = "Badges";
 }
 
+@section styles {
+    <abp-style-bundle>
+        <abp-style src="/css/demo.css" />
+    </abp-style-bundle>
+}
+
 <h2>Tooltips</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/tooltips/" target="_blank"> Bootstrap Tooltips</a>.</p>

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/css/demo.scss

@@ -1,15 +1,16 @@
 .demo-with-code {
-
     padding-bottom: 10px;
     margin-bottom: 10px;
 
     .demo-area {
+        margin-top: 20px;
         margin-bottom: 1em;
     }
 
     .code-area {
         border: 1px solid #ddd;
         padding: 10px;
+        margin-top: 10px;
         font-size: 0.9em;
     }
 }