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

tabs tag helper demo

pull/670/head
Yunus Emre Kalkan 8 years ago
parent
586a8d47ac
commit
ffc123406a
1 changed files with 181 additions and 28 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. 209
      framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tabs.cshtml

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

@ -10,19 +10,33 @@
</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>Tabs</h2>
<p>Based on <a href="http://getbootstrap.com/docs/4.1/components/navs/#tabs" target="_blank"> Bootstrap tab</a>.</p>
<h4># Most Simple Tabs Example</h4>
<h4>Example</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-tabs>
<abp-tab title="Home">
Content_Home
</abp-tab>
<abp-tab-link title="Link" name="LinkId" href="#"/>
<abp-tab-link title="Link" href="#" />
<abp-tab title="profile">
Content_Profile
</abp-tab>
@ -37,14 +51,16 @@
</abp-tabs>
</div>
<div class="code-area">
<pre>
&lt;abp-tabs name=&quot;TabId&quot;&gt;
<abp-tabs>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-tabs&gt;
&lt;abp-tab title=&quot;Home&quot;&gt;
Content_Home
&lt;/abp-tab&gt;
&lt;abp-tab-link title=&quot;Link&quot; name=&quot;LinkId&quot; href=&quot;#&quot;/&gt;
Content_Home
&lt;/abp-tab&gt;
&lt;abp-tab-link title=&quot;Link&quot; href=&quot;#&quot; /&gt;
&lt;abp-tab title=&quot;profile&quot;&gt;
Content_Profile
Content_Profile
&lt;/abp-tab&gt;
&lt;abp-tab-dropdown title=&quot;Contact&quot; name=&quot;ContactDropdown&quot;&gt;
&lt;abp-tab title=&quot;Contact 1&quot; parent-dropdown-name=&quot;ContactDropdown&quot;&gt;
@ -55,11 +71,44 @@
&lt;/abp-tab&gt;
&lt;/abp-tab-dropdown&gt;
&lt;/abp-tabs&gt;
</pre>
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div&gt;
&lt;ul class=&quot;nav nav-tabs&quot; id=&quot;48c14227782f4edab7f153b413ac1429&quot; role=&quot;tablist&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link active&quot; id=&quot;48c14227782f4edab7f153b413ac1429_0-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#48c14227782f4edab7f153b413ac1429_0&quot; role=&quot;tab&quot; aria-controls=&quot;48c14227782f4edab7f153b413ac1429_0&quot; aria-selected=&quot;true&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;LinkId-tab&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;48c14227782f4edab7f153b413ac1429_2-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#48c14227782f4edab7f153b413ac1429_2&quot; role=&quot;tab&quot; aria-controls=&quot;48c14227782f4edab7f153b413ac1429_2&quot; aria-selected=&quot;false&quot;&gt;profile&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;nav-item dropdown&quot;&gt;
&lt;a class=&quot;nav-link dropdown-toggle&quot; id=&quot;ContactDropdown-tab&quot; data-toggle=&quot;dropdown&quot; href=&quot;#ContactDropdown&quot; role=&quot;button&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;Contact&lt;/a&gt;&lt;div class=&quot;dropdown-menu&quot;&gt;
&lt;a class=&quot;dropdown-item&quot; id=&quot;48c14227782f4edab7f153b413ac1429_3-tab&quot; href=&quot;#48c14227782f4edab7f153b413ac1429_3&quot; data-toggle=&quot;tab&quot; role=&quot;tab&quot; aria-controls=&quot;48c14227782f4edab7f153b413ac1429_3&quot; aria-selected=&quot;false&quot;&gt;Contact 1&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; id=&quot;48c14227782f4edab7f153b413ac1429_4-tab&quot; href=&quot;#48c14227782f4edab7f153b413ac1429_4&quot; data-toggle=&quot;tab&quot; role=&quot;tab&quot; aria-controls=&quot;48c14227782f4edab7f153b413ac1429_4&quot; aria-selected=&quot;false&quot;&gt;Contact 2&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class=&quot;tab-content&quot; id=&quot;48c14227782f4edab7f153b413ac1429Content&quot;&gt;
&lt;div class=&quot;tab-pane fade show active&quot; id=&quot;48c14227782f4edab7f153b413ac1429_0&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;48c14227782f4edab7f153b413ac1429_0-tab&quot;&gt;
Content_Home
&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;48c14227782f4edab7f153b413ac1429_2&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;48c14227782f4edab7f153b413ac1429_2-tab&quot;&gt;
Content_Profile
&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;48c14227782f4edab7f153b413ac1429_3&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;48c14227782f4edab7f153b413ac1429_3-tab&quot;&gt;
Content_1_Content
&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;48c14227782f4edab7f153b413ac1429_4&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;48c14227782f4edab7f153b413ac1429_4-tab&quot;&gt;
Content_2_Content
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h4># Tabs With Name Attiribute Example</h4>
<h4>Tab attributes</h4>
<div class="demo-with-code">
<div class="demo-area">
@ -76,7 +125,9 @@
</abp-tabs>
</div>
<div class="code-area">
<pre>
<abp-tabs>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-tabs name=&quot;TabId&quot;&gt;
&lt;abp-tab name=&quot;nav-home&quot; title=&quot;Home&quot;&gt;
Content_Home
@ -88,16 +139,50 @@
Content_Contact
&lt;/abp-tab&gt;
&lt;/abp-tabs&gt;
</pre>
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div&gt;
&lt;ul class=&quot;nav nav-tabs&quot; id=&quot;TabId&quot; role=&quot;tablist&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;nav-home-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#nav-home&quot; role=&quot;tab&quot; aria-controls=&quot;nav-home&quot; aria-selected=&quot;false&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;nav-profile-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#nav-profile&quot; role=&quot;tab&quot; aria-controls=&quot;nav-profile&quot; aria-selected=&quot;false&quot;&gt;profile&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link active show&quot; id=&quot;nav-contact-tab&quot; data-toggle=&quot;tab&quot; href=&quot;#nav-contact&quot; role=&quot;tab&quot; aria-controls=&quot;nav-contact&quot; aria-selected=&quot;true&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div class=&quot;tab-content&quot; id=&quot;TabIdContent&quot;&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;nav-home&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-home-tab&quot;&gt;
Content_Home
&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;nav-profile&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-profile-tab&quot;&gt;
Content_Profile
&lt;/div&gt;
&lt;div class=&quot;tab-pane fade active show&quot; id=&quot;nav-contact&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;nav-contact-tab&quot;&gt;
Content_Contact
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
<div class="attribute-area">
<ul>
<li>
<b>name</b>: Sets "id" attribute of generated elements. Default value is a Guid. Not needed unless tabs are changed or modified with Jquery.
</li>
<li>
<b>active</b>: Sets the active tab.
</li>
</ul>
</div>
</div>
<h4># Pill Example</h4>
<h4>Pill Example</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-tabs tab-style="Pill">
<abp-tab active="true" title="Home">
<abp-tab title="Home">
Content_Home
</abp-tab>
<abp-tab title="profile">
@ -109,28 +194,56 @@
</abp-tabs>
</div>
<div class="code-area">
<pre>
&lt;abp-tabs tab-style=&quot;Pill&quot; &gt;
&lt;abp-tab active=&quot;true&quot; title=&quot;Home&quot;&gt;
Content_Home
&lt;/abp-tab&gt;
<abp-tabs>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-tabs tab-style=&quot;Pill&quot;&gt;
&lt;abp-tab title=&quot;Home&quot;&gt;
Content_Home
&lt;/abp-tab&gt;
&lt;abp-tab title=&quot;profile&quot;&gt;
Content_Profile
Content_Profile
&lt;/abp-tab&gt;
&lt;abp-tab title=&quot;Contact&quot;&gt;
Content_Contact
Content_Contact
&lt;/abp-tab&gt;
&lt;/abp-tabs&gt;
</pre>
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div&gt;
&lt;ul class=&quot;nav nav-pills&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946&quot; role=&quot;tablist&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link active&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946_0-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#2eaad131e42c4a90962fcb3c4e55c946_0&quot; role=&quot;tab&quot; aria-controls=&quot;2eaad131e42c4a90962fcb3c4e55c946_0&quot; aria-selected=&quot;true&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946_1-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#2eaad131e42c4a90962fcb3c4e55c946_1&quot; role=&quot;tab&quot; aria-controls=&quot;2eaad131e42c4a90962fcb3c4e55c946_1&quot; aria-selected=&quot;false&quot;&gt;profile&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946_2-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#2eaad131e42c4a90962fcb3c4e55c946_2&quot; role=&quot;tab&quot; aria-controls=&quot;2eaad131e42c4a90962fcb3c4e55c946_2&quot; aria-selected=&quot;false&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div class=&quot;tab-content&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946Content&quot;&gt;
&lt;div class=&quot;tab-pane fade show active&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946_0&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;2eaad131e42c4a90962fcb3c4e55c946_0-tab&quot;&gt;
Content_Home
&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946_1&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;2eaad131e42c4a90962fcb3c4e55c946_1-tab&quot;&gt;
Content_Profile
&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;2eaad131e42c4a90962fcb3c4e55c946_2&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;2eaad131e42c4a90962fcb3c4e55c946_2-tab&quot;&gt;
Content_Contact
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h4># Vertical Example</h4>
<h4>Vertical Example</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-tabs tab-style="PillVertical" vertical-header-size="_2">
<abp-tab active="true" title="Home">
<abp-tab title="Home">
Content_Home
</abp-tab>
<abp-tab title="profile">
@ -142,8 +255,10 @@
</abp-tabs>
</div>
<div class="code-area">
<pre>
&lt;abp-tabs name=&quot;TabId&quot; tab-style=&quot;Pill&quot; vertical-header-size=&quot;_2&quot; &gt;
<abp-tabs>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-tabs tab-style=&quot;PillVertical&quot; vertical-header-size=&quot;_2&quot; &gt;
&lt;abp-tab active=&quot;true&quot; title=&quot;Home&quot;&gt;
Content_Home
&lt;/abp-tab&gt;
@ -154,6 +269,44 @@
Content_Contact
&lt;/abp-tab&gt;
&lt;/abp-tabs&gt;
</pre>
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-2&quot;&gt;
&lt;ul class=&quot;nav flex-column nav-pills&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f&quot; role=&quot;tablist&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link active&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f_0-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#2f347a2276af424ebbd67f85653edf1f_0&quot; role=&quot;tab&quot; aria-controls=&quot;2f347a2276af424ebbd67f85653edf1f_0&quot; aria-selected=&quot;true&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f_1-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#2f347a2276af424ebbd67f85653edf1f_1&quot; role=&quot;tab&quot; aria-controls=&quot;2f347a2276af424ebbd67f85653edf1f_1&quot; aria-selected=&quot;false&quot;&gt;profile&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f_2-tab&quot; data-toggle=&quot;pill&quot; href=&quot;#2f347a2276af424ebbd67f85653edf1f_2&quot; role=&quot;tab&quot; aria-controls=&quot;2f347a2276af424ebbd67f85653edf1f_2&quot; aria-selected=&quot;false&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;col-10&quot;&gt;
&lt;div class=&quot;tab-content&quot; id=&quot;2f347a2276af424ebbd67f85653edf1fContent&quot;&gt;
&lt;div class=&quot;tab-pane fade show active&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f_0&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;2f347a2276af424ebbd67f85653edf1f_0-tab&quot;&gt;
Content_Home
&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f_1&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;2f347a2276af424ebbd67f85653edf1f_1-tab&quot;&gt;
Content_Profile
&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;2f347a2276af424ebbd67f85653edf1f_2&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;2f347a2276af424ebbd67f85653edf1f_2-tab&quot;&gt;
Content_Contact
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<div class="attribute-area">
<ul>
<li>
<b>vertical-header-size</b>: Sets the column width of tab headers.
</li>
</ul>
</div>
</div>
Write Preview
Loading…
Cancel
Save