tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

abp border tag helper docs

pull/670/head
Yunus Emre Kalkan 8 years ago
parent
eb3b69b614
commit
c44b2aa64e
1 changed files with 193 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

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