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

tabs tag helper demo

Browse Source
pull/670/head
Yunus Emre Kalkan 6 years ago
parent 586a8d47ac
commit ffc123406a
1 changed files with 181 additions and 28 deletions
Show Stats Download Patch File Download Diff File

209
framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tabs.cshtml
Unescape 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