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

tables tag helper demo

pull/670/head
Yunus Emre Kalkan 8 years ago
parent
ffc123406a
commit
b1c516e776
1 changed files with 402 additions and 22 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. 424
      framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tables.cshtml

424
framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tables.cshtml
View File

@ -10,17 +10,30 @@
</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>Tables</h2>
<p>Based on <a href="https://getbootstrap.com/docs/4.1/content/Tables/" target="_blank"> Bootstrap Tables</a>.</p>
<h4># Tables Examples</h4>
<h4>Examples</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-table striped-rows="true" hoverable-rows="true" responsive-sm="true">
<thead theme="Dark">
<abp-table hoverable-rows="true" responsive-sm="true">
<thead>
<tr>
<th scope="Column">#</th>
<th scope="Column">First</th>
@ -33,9 +46,9 @@
<th scope="Row">1</th>
<td>Mark</td>
<td>Otto</td>
<td abp-table-style="Danger">mdo</td>
<td table-style="Danger">mdo</td>
</tr>
<tr abp-table-style="Warning">
<tr table-style="Warning">
<th scope="Row">2</th>
<td>Jacob</td>
<td>Thornton</td>
@ -43,46 +56,413 @@
</tr>
<tr>
<th scope="Row">3</th>
<td abp-table-style="Success">Larry</td>
<td table-style="Success">Larry</td>
<td>the Bird</td>
<td>twitter</td>
</tr>
</tbody>
</abp-table>
</div>
<div class="code-area">
<pre>
&lt;abp-table striped-rows=&quot;true&quot; small=&quot;true&quot; hoverable-rows=&quot;true&quot; responsive-sm=&quot;true&quot;&gt;
&lt;thead theme=&quot;Dark&quot;&gt;
<abp-tabs>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-table hoverable-rows=&quot;true&quot; responsive-sm=&quot;true&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
&lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
&lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
&lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
&lt;td&gt;Mark&lt;/td&gt;
&lt;td&gt;Otto&lt;/td&gt;
&lt;td table-style=&quot;Danger&quot;&gt;mdo&lt;/td&gt;
&lt;/tr&gt;
&lt;tr table-style=&quot;Warning&quot;&gt;
&lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
&lt;td&gt;Jacob&lt;/td&gt;
&lt;td&gt;Thornton&lt;/td&gt;
&lt;td&gt;fat&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
&lt;td table-style=&quot;Success&quot;&gt;Larry&lt;/td&gt;
&lt;td&gt;the Bird&lt;/td&gt;
&lt;td&gt;twitter&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/abp-table&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;table-responsive-sm&quot;&gt;
&lt;table class=&quot;table table-hover&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
&lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
&lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
&lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
&lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
&lt;td&gt;Mark&lt;/td&gt;
&lt;td&gt;Otto&lt;/td&gt;
&lt;td abp-table-style=&quot;Danger&quot;&gt;mdo&lt;/td&gt;
&lt;td class=&quot;table-danger&quot;&gt;mdo&lt;/td&gt;
&lt;/tr&gt;
&lt;tr abp-table-style=&quot;Warning&quot;&gt;
&lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
&lt;tr class=&quot;table-warning&quot;&gt;
&lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
&lt;td&gt;Jacob&lt;/td&gt;
&lt;td&gt;Thornton&lt;/td&gt;
&lt;td&gt;fat&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
&lt;td abp-table-style=&quot;Success&quot;&gt;Larry&lt;/td&gt;
&lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
&lt;td class=&quot;table-success&quot;&gt;Larry&lt;/td&gt;
&lt;td&gt;the Bird&lt;/td&gt;
&lt;td&gt;twitter&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/abp-table&gt;
</pre>
&lt;/table&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<div class="demo-with-code">
<div class="demo-area">
<abp-table small="true" striped-rows="true" border-style="Bordered">
<thead Theme="Dark">
<tr>
<th scope="Column">#</th>
<th scope="Column">First</th>
<th scope="Column">Last</th>
<th scope="Column">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="Row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>mdo</td>
</tr>
<tr>
<th scope="Row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>fat</td>
</tr>
<tr>
<th scope="Row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>twitter</td>
</tr>
</tbody>
</abp-table>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-table small=&quot;true&quot; striped-rows=&quot;true&quot; border-style=&quot;Bordered&quot;&gt;
&lt;thead Theme=&quot;Dark&quot;&gt;
&lt;tr&gt;
&lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
&lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
&lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
&lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
&lt;td&gt;Mark&lt;/td&gt;
&lt;td&gt;Otto&lt;/td&gt;
&lt;td&gt;mdo&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
&lt;td&gt;Jacob&lt;/td&gt;
&lt;td&gt;Thornton&lt;/td&gt;
&lt;td&gt;fat&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
&lt;td&gt;Larry&lt;/td&gt;
&lt;td&gt;the Bird&lt;/td&gt;
&lt;td&gt;twitter&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/abp-table&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;table class=&quot;table table-sm table-striped table-bordered&quot;&gt;
&lt;thead class=&quot;thead-dark&quot;&gt;
&lt;tr&gt;
&lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
&lt;td&gt;Mark&lt;/td&gt;
&lt;td&gt;Otto&lt;/td&gt;
&lt;td&gt;mdo&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
&lt;td&gt;Jacob&lt;/td&gt;
&lt;td&gt;Thornton&lt;/td&gt;
&lt;td&gt;fat&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
&lt;td&gt;Larry&lt;/td&gt;
&lt;td&gt;the Bird&lt;/td&gt;
&lt;td&gt;twitter&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<div class="demo-with-code">
<div class="demo-area">
<abp-table striped-rows="true" dark-theme="true">
<caption>List of users</caption>
<thead>
<tr>
<th scope="Column">#</th>
<th scope="Column">First</th>
<th scope="Column">Last</th>
<th scope="Column">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="Row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>mdo</td>
</tr>
<tr>
<th scope="Row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>fat</td>
</tr>
<tr>
<th scope="Row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>twitter</td>
</tr>
</tbody>
</abp-table>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-table striped-rows=&quot;true&quot; dark-theme=&quot;true&quot;&gt;
&lt;caption&gt;List of users&lt;/caption&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
&lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
&lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
&lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
&lt;td&gt;Mark&lt;/td&gt;
&lt;td&gt;Otto&lt;/td&gt;
&lt;td&gt;mdo&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
&lt;td&gt;Jacob&lt;/td&gt;
&lt;td&gt;Thornton&lt;/td&gt;
&lt;td&gt;fat&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
&lt;td&gt;Larry&lt;/td&gt;
&lt;td&gt;the Bird&lt;/td&gt;
&lt;td&gt;twitter&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/abp-table&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;table class=&quot;table table-dark table-striped&quot;&gt;
&lt;caption&gt;List of users&lt;/caption&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
&lt;td&gt;Mark&lt;/td&gt;
&lt;td&gt;Otto&lt;/td&gt;
&lt;td&gt;mdo&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
&lt;td&gt;Jacob&lt;/td&gt;
&lt;td&gt;Thornton&lt;/td&gt;
&lt;td&gt;fat&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
&lt;td&gt;Larry&lt;/td&gt;
&lt;td&gt;the Bird&lt;/td&gt;
&lt;td&gt;twitter&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<div class="demo-with-code">
<div class="demo-area">
<abp-table border-style="Borderless">
<thead>
<tr>
<th scope="Column">#</th>
<th scope="Column">First</th>
<th scope="Column">Last</th>
<th scope="Column">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="Row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>mdo</td>
</tr>
<tr>
<th scope="Row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>fat</td>
</tr>
<tr>
<th scope="Row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>twitter</td>
</tr>
</tbody>
</abp-table>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-table border-style=&quot;Borderless&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th scope=&quot;Column&quot;&gt;#&lt;/th&gt;
&lt;th scope=&quot;Column&quot;&gt;First&lt;/th&gt;
&lt;th scope=&quot;Column&quot;&gt;Last&lt;/th&gt;
&lt;th scope=&quot;Column&quot;&gt;Handle&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;th scope=&quot;Row&quot;&gt;1&lt;/th&gt;
&lt;td&gt;Mark&lt;/td&gt;
&lt;td&gt;Otto&lt;/td&gt;
&lt;td&gt;mdo&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;Row&quot;&gt;2&lt;/th&gt;
&lt;td&gt;Jacob&lt;/td&gt;
&lt;td&gt;Thornton&lt;/td&gt;
&lt;td&gt;fat&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;Row&quot;&gt;3&lt;/th&gt;
&lt;td&gt;Larry&lt;/td&gt;
&lt;td&gt;the Bird&lt;/td&gt;
&lt;td&gt;twitter&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/abp-table&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;table class=&quot;table table-borderless&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
&lt;td&gt;Mark&lt;/td&gt;
&lt;td&gt;Otto&lt;/td&gt;
&lt;td&gt;mdo&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
&lt;td&gt;Jacob&lt;/td&gt;
&lt;td&gt;Thornton&lt;/td&gt;
&lt;td&gt;fat&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
&lt;td&gt;Larry&lt;/td&gt;
&lt;td&gt;the Bird&lt;/td&gt;
&lt;td&gt;twitter&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>

Write Preview
Loading…
Cancel
Save