diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Badges.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Badges.cshtml index d5352312a7..becb85d9cd 100644 --- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Badges.cshtml +++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Badges.cshtml @@ -10,30 +10,215 @@ } +@section scripts { + + @* + *@ + +} + + + + +

Badges

Based on Bootstrap Badge.

-

# Badges Examples

+

Example

- I'm an abp badge! - I'm an abp pill badge! - I'm an abp badge link! - I'm an abp pill badge link! +

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+
Example heading New
+
Example heading New
+
+
+ + + 

+<h1>Example heading <span abp-badge="Secondary">New</span></h1>
+<h2>Example heading <span abp-badge="Secondary">New</span></h2>
+<h3>Example heading <span abp-badge="Secondary">New</span></h3>
+<h4>Example heading <span abp-badge="Secondary">New</span></h4>
+<h5>Example heading <span abp-badge="Secondary">New</span></h5>
+<h6>Example heading <span abp-badge="Secondary">New</span></h6>
+
+ + + 

+<h1>Example heading <span class="badge badge-secondary">New</span></h1>
+<h2>Example heading <span class="badge badge-secondary">New</span></h2>
+<h3>Example heading <span class="badge badge-secondary">New</span></h3>
+<h4>Example heading <span class="badge badge-secondary">New</span></h4>
+<h5>Example heading <span class="badge badge-secondary">New</span></h5>
+<h6>Example heading <span class="badge badge-secondary">New</span></h6>
+
+ + +
+
+
+
+ + + Notifications 4 +
- 
-<span abp-badge="Primary" >I'm an abp badge!</span>
+        
+            
+                

+<abp-button button-type="Primary">
+    Notifications <span abp-badge="Light">4</span>
+</abp-button>
+

+            
+            
+                

+<button type="button" class="btn btn-primary">
+  Notifications <span class="badge badge-light">4</span>
+</button>
+

+            
+        
+
+
-<span abp-badge-pill="Warning" >I'm an abp pill badge!</span> +

Contextual variations

-<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> - + Primary + Secondary + Success + Danger + Warning + Info + Light + Dark +
+
+ + + 

+<span abp-badge="Primary">Primary</span>
+<span abp-badge="Secondary">Secondary</span>
+<span abp-badge="Success">Success</span>
+<span abp-badge="Danger">Danger</span>
+<span abp-badge="Warning">Warning</span>
+<span abp-badge="Info">Info</span>
+<span abp-badge="Light">Light</span>
+<span abp-badge="Dark">Dark</span>
+
+ + + 

+<span class="badge badge-primary">Primary</span>
+<span class="badge badge-secondary">Secondary</span>
+<span class="badge badge-success">Success</span>
+<span class="badge badge-danger">Danger</span>
+<span class="badge badge-warning">Warning</span>
+<span class="badge badge-info">Info</span>
+<span class="badge badge-light">Light</span>
+<span class="badge badge-dark">Dark</span>
+
+ +
+ +

Pill badges

+ +
+
+ + Primary + Secondary + Success + Danger + Warning + Info + Light + Dark +
+
+ + + 

+<span abp-badge-pill="Primary">Primary</span>
+<span abp-badge-pill="Secondary">Secondary</span>
+<span abp-badge-pill="Success">Success</span>
+<span abp-badge-pill="Danger">Danger</span>
+<span abp-badge-pill="Warning">Warning</span>
+<span abp-badge-pill="Info">Info</span>
+<span abp-badge-pill="Light">Light</span>
+<span abp-badge-pill="Dark">Dark</span>
+
+ + + 

+<span class="badge badge-pill badge-primary">Primary</span>
+<span class="badge badge-pill badge-secondary">Secondary</span>
+<span class="badge badge-pill badge-success">Success</span>
+<span class="badge badge-pill badge-danger">Danger</span>
+<span class="badge badge-pill badge-warning">Warning</span>
+<span class="badge badge-pill badge-info">Info</span>
+<span class="badge badge-pill badge-light">Light</span>
+<span class="badge badge-pill badge-dark">Dark</span>
+
+ + +
+
+ +

Links

+ +
+
+ + Primary + Secondary + Success + Danger + Warning + Info + Light + Dark +
+
+ + + 

+<a href="#" abp-badge="Primary">Primary</a>
+<a href="#" abp-badge="Secondary">Secondary</a>
+<a href="#" abp-badge="Success">Success</a>
+<a href="#" abp-badge="Danger">Danger</a>
+<a href="#" abp-badge="Warning">Warning</a>
+<a href="#" abp-badge="Info">Info</a>
+<a href="#" abp-badge="Light">Light</a>
+<a href="#" abp-badge="Dark">Dark</a>
+
+ + + 

+<a href="#" class="badge badge-primary">Primary</a>
+<a href="#" class="badge badge-secondary">Secondary</a>
+<a href="#" class="badge badge-success">Success</a>
+<a href="#" class="badge badge-danger">Danger</a>
+<a href="#" class="badge badge-warning">Warning</a>
+<a href="#" class="badge badge-info">Info</a>
+<a href="#" class="badge badge-light">Light</a>
+<a href="#" class="badge badge-dark">Dark</a>
+
+ + +
+
\ No newline at end of file