badges doc

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

@@ -10,30 +10,215 @@
     </abp-style-bundle>
 }
 
+@section scripts {
+    <abp-script-bundle>
+        @*<abp-script src="/libs/highlight.js/lib/highlight.js" />
+            <abp-script src="/Pages/Components/highlightCode.js" />*@
+    </abp-script-bundle>
+}
+
+<link rel="stylesheet"
+      href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
+<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
+<script>hljs.initHighlightingOnLoad();</script>
+
 <h2>Badges</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/badge/" target="_blank"> Bootstrap Badge</a>.</p>
 
-<h4># Badges Examples</h4>
+<h4>Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
 
-        <span abp-badge="Primary">I'm an abp 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>
+        <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>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;h1&gt;Example heading &lt;span abp-badge=&quot;Secondary&quot;&gt;New&lt;/span&gt;&lt;/h1&gt;
+&lt;h2&gt;Example heading &lt;span abp-badge=&quot;Secondary&quot;&gt;New&lt;/span&gt;&lt;/h2&gt;
+&lt;h3&gt;Example heading &lt;span abp-badge=&quot;Secondary&quot;&gt;New&lt;/span&gt;&lt;/h3&gt;
+&lt;h4&gt;Example heading &lt;span abp-badge=&quot;Secondary&quot;&gt;New&lt;/span&gt;&lt;/h4&gt;
+&lt;h5&gt;Example heading &lt;span abp-badge=&quot;Secondary&quot;&gt;New&lt;/span&gt;&lt;/h5&gt;
+&lt;h6&gt;Example heading &lt;span abp-badge=&quot;Secondary&quot;&gt;New&lt;/span&gt;&lt;/h6&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;h1&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h1&gt;
+&lt;h2&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h2&gt;
+&lt;h3&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h3&gt;
+&lt;h4&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h4&gt;
+&lt;h5&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h5&gt;
+&lt;h6&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h6&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
 
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-button button-type="Primary">
+            Notifications <span abp-badge="Light">4</span>
+        </abp-button>
     </div>
     <div class="code-area">
-        <pre>
-&lt;span abp-badge=&quot;Primary&quot; &gt;I&#39;m an abp badge!&lt;/span&gt;
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-button button-type=&quot;Primary&quot;&gt;
+    Notifications &lt;span abp-badge=&quot;Light&quot;&gt;4&lt;/span&gt;
+&lt;/abp-button&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;
+  Notifications &lt;span class=&quot;badge badge-light&quot;&gt;4&lt;/span&gt;
+&lt;/button&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
 
-&lt;span abp-badge-pill=&quot;Warning&quot; &gt;I&#39;m an abp pill badge!&lt;/span&gt;
+<h4>Contextual variations</h4>
 
-&lt;a abp-badge=&quot;Danger&quot; href=&quot;#&quot; &gt;I&#39;m an abp badge link!&lt;/a&gt;
+<div class="demo-with-code">
+    <div class="demo-area">
 
-&lt;a abp-badge-pill=&quot;Success&quot; href=&quot;#&quot; &gt;I&#39;m an abp pill badge link!&lt;/a&gt;
-</pre>
+        <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>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;span abp-badge=&quot;Primary&quot;&gt;Primary&lt;/span&gt;
+&lt;span abp-badge=&quot;Secondary&quot;&gt;Secondary&lt;/span&gt;
+&lt;span abp-badge=&quot;Success&quot;&gt;Success&lt;/span&gt;
+&lt;span abp-badge=&quot;Danger&quot;&gt;Danger&lt;/span&gt;
+&lt;span abp-badge=&quot;Warning&quot;&gt;Warning&lt;/span&gt;
+&lt;span abp-badge=&quot;Info&quot;&gt;Info&lt;/span&gt;
+&lt;span abp-badge=&quot;Light&quot;&gt;Light&lt;/span&gt;
+&lt;span abp-badge=&quot;Dark&quot;&gt;Dark&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;span class=&quot;badge badge-primary&quot;&gt;Primary&lt;/span&gt;
+&lt;span class=&quot;badge badge-secondary&quot;&gt;Secondary&lt;/span&gt;
+&lt;span class=&quot;badge badge-success&quot;&gt;Success&lt;/span&gt;
+&lt;span class=&quot;badge badge-danger&quot;&gt;Danger&lt;/span&gt;
+&lt;span class=&quot;badge badge-warning&quot;&gt;Warning&lt;/span&gt;
+&lt;span class=&quot;badge badge-info&quot;&gt;Info&lt;/span&gt;
+&lt;span class=&quot;badge badge-light&quot;&gt;Light&lt;/span&gt;
+&lt;span class=&quot;badge badge-dark&quot;&gt;Dark&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
+
+<h4>Pill badges</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <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>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;span abp-badge-pill=&quot;Primary&quot;&gt;Primary&lt;/span&gt;
+&lt;span abp-badge-pill=&quot;Secondary&quot;&gt;Secondary&lt;/span&gt;
+&lt;span abp-badge-pill=&quot;Success&quot;&gt;Success&lt;/span&gt;
+&lt;span abp-badge-pill=&quot;Danger&quot;&gt;Danger&lt;/span&gt;
+&lt;span abp-badge-pill=&quot;Warning&quot;&gt;Warning&lt;/span&gt;
+&lt;span abp-badge-pill=&quot;Info&quot;&gt;Info&lt;/span&gt;
+&lt;span abp-badge-pill=&quot;Light&quot;&gt;Light&lt;/span&gt;
+&lt;span abp-badge-pill=&quot;Dark&quot;&gt;Dark&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;span class=&quot;badge badge-pill badge-primary&quot;&gt;Primary&lt;/span&gt;
+&lt;span class=&quot;badge badge-pill badge-secondary&quot;&gt;Secondary&lt;/span&gt;
+&lt;span class=&quot;badge badge-pill badge-success&quot;&gt;Success&lt;/span&gt;
+&lt;span class=&quot;badge badge-pill badge-danger&quot;&gt;Danger&lt;/span&gt;
+&lt;span class=&quot;badge badge-pill badge-warning&quot;&gt;Warning&lt;/span&gt;
+&lt;span class=&quot;badge badge-pill badge-info&quot;&gt;Info&lt;/span&gt;
+&lt;span class=&quot;badge badge-pill badge-light&quot;&gt;Light&lt;/span&gt;
+&lt;span class=&quot;badge badge-pill badge-dark&quot;&gt;Dark&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Links</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <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>
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;a href=&quot;#&quot; abp-badge=&quot;Primary&quot;&gt;Primary&lt;/a&gt;
+&lt;a href=&quot;#&quot; abp-badge=&quot;Secondary&quot;&gt;Secondary&lt;/a&gt;
+&lt;a href=&quot;#&quot; abp-badge=&quot;Success&quot;&gt;Success&lt;/a&gt;
+&lt;a href=&quot;#&quot; abp-badge=&quot;Danger&quot;&gt;Danger&lt;/a&gt;
+&lt;a href=&quot;#&quot; abp-badge=&quot;Warning&quot;&gt;Warning&lt;/a&gt;
+&lt;a href=&quot;#&quot; abp-badge=&quot;Info&quot;&gt;Info&lt;/a&gt;
+&lt;a href=&quot;#&quot; abp-badge=&quot;Light&quot;&gt;Light&lt;/a&gt;
+&lt;a href=&quot;#&quot; abp-badge=&quot;Dark&quot;&gt;Dark&lt;/a&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;a href=&quot;#&quot; class=&quot;badge badge-primary&quot;&gt;Primary&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-secondary&quot;&gt;Secondary&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-success&quot;&gt;Success&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-danger&quot;&gt;Danger&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-warning&quot;&gt;Warning&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-info&quot;&gt;Info&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-light&quot;&gt;Light&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-dark&quot;&gt;Dark&lt;/a&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>