imhven
/
abp
mirror of https://github.com/abpframework/abp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

badges doc

Browse Source
pull/670/head
Yunus Emre Kalkan 6 years ago
parent 9d61cc03d7
commit ea0a6edccc
1 changed files with 196 additions and 11 deletions
Show Stats Download Patch File Download Diff File

207
framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Badges.cshtml
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save