Browse Source

abp border tag helper docs

pull/670/head
Yunus Emre Kalkan 8 years ago
parent
commit
c44b2aa64e
  1. 223
      framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Borders.cshtml

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

@ -10,43 +10,206 @@
</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>
}
<style>
.border-span span {
display: inline-block;
width: 5rem;
height: 5rem;
margin: .25rem;
background-color: #f5f5f5;
}
</style>
<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>Borders</h2>
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/border/" target="_blank"> Bootstrap Border</a>.</p>
<h4># Borders Examples</h4>
<h4>Border</h4>
<h5>Additive</h5>
<div class="demo-with-code">
<div class="demo-area">
<span abp-border="Default">aaa</span>
<span abp-border="Top">bbb</span>
<span abp-border="Right">ccc</span>
<span abp-border="Left">ddd</span>
<span abp-border="Bottom">eee</span>
<span abp-border="Top_0">fff</span>
<span abp-border="Right_0">ggg</span>
<span abp-border="Left_0">hhh</span>
<span abp-border="Bottom_0">iii</span>
<span abp-border="Top_Primary">jjj</span>
<span abp-border="Warning_0">kkk</span>
<span abp-border="Bottom_Primary_0">lll</span>
<span abp-border="Left_Danger">mmm</span>
<div class="demo-area border-span">
<span abp-border="Default"></span>
<span abp-border="Top"></span>
<span abp-border="Right"></span>
<span abp-border="Bottom"></span>
<span abp-border="Left"></span>
</div>
<div class="code-area">
<pre>
&lt;span abp-border=&quot;Default&quot;&gt;aaa&lt;/span&gt;
&lt;span abp-border=&quot;Top&quot;&gt;bbb&lt;/span&gt;
&lt;span abp-border=&quot;Right&quot;&gt;ccc&lt;/span&gt;
&lt;span abp-border=&quot;Left&quot;&gt;ddd&lt;/span&gt;
&lt;span abp-border=&quot;Bottom&quot;&gt;eee&lt;/span&gt;
&lt;span abp-border=&quot;Top_0&quot;&gt;fff&lt;/span&gt;
&lt;span abp-border=&quot;Right_0&quot;&gt;ggg&lt;/span&gt;
&lt;span abp-border=&quot;Left_0&quot;&gt;hhh&lt;/span&gt;
&lt;span abp-border=&quot;Bottom_0&quot;&gt;iii&lt;/span&gt;
&lt;span abp-border=&quot;Top_Primary&quot;&gt;jjj&lt;/span&gt;
&lt;span abp-border=&quot;Warning_0&quot;&gt;kkk&lt;/span&gt;
&lt;span abp-border=&quot;Bottom_Primary_0&quot;&gt;lll&lt;/span&gt;
&lt;span abp-border=&quot;Left_Danger&quot;&gt;mmm&lt;/span&gt;
</pre>
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;span abp-border=&quot;Default&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Top&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Right&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Bottom&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Left&quot;&gt;&lt;/span&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;span class=&quot;border&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border-top&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border-right&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border-bottom&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border-left&quot;&gt;&lt;/span&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h5>Subtractive</h5>
<div class="demo-with-code">
<div class="demo-area border-span">
<span abp-border="_0"></span>
<span abp-border="Top_0"></span>
<span abp-border="Right_0"></span>
<span abp-border="Bottom_0"></span>
<span abp-border="Left_0"></span>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;span abp-border=&quot;_0&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Top_0&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Right_0&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Bottom_0&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Left_0&quot;&gt;&lt;/span&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;span class=&quot;borde-0&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border-top-0&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border-right-0&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border-bottom-0&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border-left-0&quot;&gt;&lt;/span&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h4>Border color</h4>
<div class="demo-with-code">
<div class="demo-area border-span">
<span abp-border="Primary"></span>
<span abp-border="Secondary"></span>
<span abp-border="Success"></span>
<span abp-border="Danger"></span>
<span abp-border="Info"></span>
<span abp-border="Light"></span>
<span abp-border="Dark"></span>
<span abp-border="White" ></span>
<br/>
<span abp-border="Left_Primary"></span>
<span abp-border="Top_Secondary"></span>
<span abp-border="Right_Success"></span>
<span abp-border="Bottom_Danger"></span>
<span abp-border="Bottom_Warning"></span>
<span abp-border="Left_Info"></span>
<span abp-border="Top_Light"></span>
<span abp-border="Right_Dark"></span>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;span abp-border=&quot;Primary&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Secondary&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Success&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Danger&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Info&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Light&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Dark&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;White&quot;&gt;&lt;/span&gt;
&lt;br/&gt;
&lt;span abp-border=&quot;Left_Primary&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Top_Secondary&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Right_Success&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Bottom_Danger&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;bottom_Warning&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Left_Info&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Top_Light&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Right_Dark&quot;&gt;&lt;/span&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;span class=&quot;border border-primary&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-secondary&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-success&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-danger&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-warning&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-info&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-light&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-dark&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-white&quot;&gt;&lt;/span&gt;
&lt;br/&gt;
&lt;span class=&quot;border border-left border-primary&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-top border-secondary&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-right border-success&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-bottom border-danger&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-bottom border-warning&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-left border-info&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-top border-light&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-right border-dark&quot;&gt;&lt;/span&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h4>Border-radius</h4>
<div class="demo-with-code">
<div class="demo-area border-span">
<span abp-border="Primary" abp-rounded="Default"></span>
<span abp-border="Primary" abp-rounded="_0"></span>
<span abp-border="Primary" abp-rounded="Top"></span>
<span abp-border="Primary" abp-rounded="Left"></span>
<span abp-border="Primary" abp-rounded="Bottom"></span>
<span abp-border="Primary" abp-rounded="Right"></span>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Default&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;_0&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Top&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Left&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Bottom&quot;&gt;&lt;/span&gt;
&lt;span abp-border=&quot;Primary&quot; abp-rounded=&quot;Right&quot;&gt;&lt;/span&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;span class=&quot;border border-primary rounded&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-primary rounded-0&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-primary rounded-top&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-primary rounded-left&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-primary rounded-bottom&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;border border-primary rounded-right&quot;&gt;&lt;/span&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
Loading…
Cancel
Save