Difference between revisions of "Tabs"

From Tweeki
Jump to: navigation, search
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
__TOC__
 
__TOC__
 
[[Category:Components]]
 
[[Category:Components]]
−
=== Standard Accordions ===
+
{{versions}}
  
−
You can create accordions with very reduced code:
+
<div class="tab-content" id="versionContent">
 +
  <div class="tab-pane fade show active" id="bs4" role="tabpanel" aria-labelledby="bs4-tab">
 +
=== Togglable Tabs for Bootstrap 4 ===
 +
 
 +
see [https://getbootstrap.com/docs/4.3/components/navs/#javascript-behavior Bootstrap's documentation] for all the details of this feature.
 +
 
 +
You can create tabs with this code:
 +
 
 +
==== Markup====
 +
 
 +
<nowiki><ul class="nav nav-tabs mb-2" id="myTabs" role="tablist"></nowiki>
 +
    <nowiki><li class="nav-item"><btn id="tab1Label" data-toggle="tab" class="nav-link active" role="tab" aria-controls="tab1" aria-selected="true">#tab1|Tab 1</btn></li></nowiki>
 +
    <nowiki><li><btn id="btn2Label" data-toggle="tab" class="nav-link" role="tab" aria-controls="tab2" aria-selected="false">#tab2|Tab 2</btn></li></nowiki>
 +
  <nowiki></ul></nowiki>
 +
 +
  <nowiki><div class="tab-content"></nowiki>
 +
    <nowiki><div id="tab1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tab1Label"></nowiki>
 +
      <nowiki>'''Tab 1''': Lorem ipsum...</nowiki>
 +
    <nowiki></div></nowiki>
 +
    <nowiki><div id="tab2" class="tab-pane fade" role="tabpanel" aria-labelledby="tab2Label"></nowiki>
 +
      <nowiki>'''Tab 2''': Lorem ipsum...</nowiki>
 +
    <nowiki></div></nowiki>
 +
  <nowiki></div></nowiki>
 +
 
 +
====Result====
 +
 
 +
<ul class="nav nav-tabs mb-2" id="myTabs" role="tablist">
 +
  <li class="nav-item"><btn id="tab1Label" data-toggle="tab" class="nav-link active" role="tab" aria-controls="tab1" aria-selected="true">#tab1|Tab 1</btn></li>
 +
  <li><btn id="btn2Label" data-toggle="tab" class="nav-link" role="tab" aria-controls="tab2" aria-selected="false">#tab2|Tab 2</btn></li>
 +
</ul>
 +
 
 +
<div class="tab-content">
 +
<div id="tab1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tab1Label">
 +
'''Tab 1''': Lorem ipsum...
 +
</div>
 +
<div id="tab2" class="tab-pane fade" role="tabpanel" aria-labelledby="tab2Label">
 +
'''Tab 2''': Lorem ipsum...
 +
</div>
 +
</div>
 +
 
 +
====HTML====
 +
 
 +
<pre>
 +
<ul class="nav nav-tabs mb-2" id="myTabs" role="tablist">
 +
  <li class="nav-item"><a href="#tab1" id="n-.23tab1" class="nav-link active tab-toggle" aria-controls="tab1" aria-selected="true" role="tab" data-toggle="tab">Tab 1</a></li>
 +
  <li><a href="#tab2" id="n-.23tab2" class="nav-link tab-toggle" aria-controls="tab2" aria-selected="false" role="tab" data-toggle="tab">Tab 2</a></li>
 +
</ul>
 +
<div class="tab-content">
 +
<div id="tab1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tab1Label">
 +
<p><b>Tab 1</b>: Lorem ipsum...
 +
</p>
 +
</div>
 +
<div id="tab2" class="tab-pane fade" role="tabpanel" aria-labelledby="tab2Label">
 +
<p><b>Tab 2</b>: Lorem ipsum...
 +
</p>
 +
</div>
 +
</div>
 +
</pre>
 +
 
 +
</div>
 +
  <div class="tab-pane fade" id="bs3" role="tabpanel" aria-labelledby="bs3-tab">
 +
 
 +
=== Togglable Tabs for Bootstrap 3 ===
 +
 
 +
see [http://getbootstrap.com/javascript/#tabs Bootstrap's documentation] for all the details of this feature.
 +
 
 +
You can create tabs with this code:
  
 
==== Markup====
 
==== Markup====
Line 14: Line 80:
 
   <nowiki><div class="tab-content"></nowiki>
 
   <nowiki><div class="tab-content"></nowiki>
 
     <nowiki><div id="tab1" class="tab-pane fade in active"></nowiki>
 
     <nowiki><div id="tab1" class="tab-pane fade in active"></nowiki>
−
       <nowiki><h3>Tab 1</h3></nowiki>
+
       <nowiki>'''Tab 1''': Lorem ipsum...</nowiki>
−
      <nowiki><p>Lorem ipsum...</p></nowiki>
 
 
     <nowiki></div></nowiki>
 
     <nowiki></div></nowiki>
 
     <nowiki><div id="tab2" class="tab-pane fade"></nowiki>
 
     <nowiki><div id="tab2" class="tab-pane fade"></nowiki>
−
       <nowiki><h3>Tab 2</h3></nowiki>
+
       <nowiki>'''Tab 2''': Lorem ipsum...</nowiki>
−
      <nowiki><p>Lorem ipsum...</p></nowiki>
 
 
     <nowiki></div></nowiki>
 
     <nowiki></div></nowiki>
 
   <nowiki></div></nowiki>
 
   <nowiki></div></nowiki>
 +
 +
  
 
====Result====
 
====Result====
Line 39: Line 105:
 
</div>
 
</div>
 
</div>
 
</div>
 +
 +
  
 
====HTML====
 
====HTML====
  
 
<pre>
 
<pre>
−
<div>
 
 
   <ul class="nav nav-tabs">
 
   <ul class="nav nav-tabs">
−
     <li class="active"><a href="#tab1" id="n-.23tab1" class="tab-toggle" data-toggle="tab">Tab 1</a></li>
+
     <li class="active">
−
     <li><a href="#tab2" id="n-.23tab2" class="tab-toggle" data-toggle="tab">Tab 2</a></li>
+
      <a href="#tab1" id="n-.23tab1" class="tab-toggle" data-toggle="tab">Tab 1</a>
 +
    </li>
 +
     <li>
 +
      <a href="#tab2" id="n-.23tab2" class="tab-toggle" data-toggle="tab">Tab 2</a>
 +
    </li>
 
   </ul>
 
   </ul>
 
   <div class="tab-content">
 
   <div class="tab-content">
Line 56: Line 127:
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 +
</pre>
 +
</div>
 
</div>
 
</div>
−
</pre>
 

Latest revision as of 00:02, 17 November 2020

Togglable Tabs for Bootstrap 4

see Bootstrap's documentation for all the details of this feature.

You can create tabs with this code:

Markup

<ul class="nav nav-tabs mb-2" id="myTabs" role="tablist">
   <li class="nav-item"><btn id="tab1Label" data-toggle="tab" class="nav-link active" role="tab" aria-controls="tab1" aria-selected="true">#tab1|Tab 1</btn></li>
   <li><btn id="btn2Label" data-toggle="tab" class="nav-link" role="tab" aria-controls="tab2" aria-selected="false">#tab2|Tab 2</btn></li>
 </ul>

 <div class="tab-content">
   <div id="tab1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tab1Label">
     '''Tab 1''': Lorem ipsum...
   </div>
   <div id="tab2" class="tab-pane fade" role="tabpanel" aria-labelledby="tab2Label">
     '''Tab 2''': Lorem ipsum...
   </div>
 </div>

Result

Tab 1: Lorem ipsum...

Tab 2: Lorem ipsum...

HTML

<ul class="nav nav-tabs mb-2" id="myTabs" role="tablist">
   <li class="nav-item"><a href="#tab1" id="n-.23tab1" class="nav-link active tab-toggle" aria-controls="tab1" aria-selected="true" role="tab" data-toggle="tab">Tab 1</a></li>
   <li><a href="#tab2" id="n-.23tab2" class="nav-link tab-toggle" aria-controls="tab2" aria-selected="false" role="tab" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tab1Label">
<p><b>Tab 1</b>: Lorem ipsum...
</p>
</div>
<div id="tab2" class="tab-pane fade" role="tabpanel" aria-labelledby="tab2Label">
<p><b>Tab 2</b>: Lorem ipsum...
</p>
</div>
</div>

Togglable Tabs for Bootstrap 3

see Bootstrap's documentation for all the details of this feature.

You can create tabs with this code:

Markup

<ul class="nav nav-tabs">
   <li class="active"><btn data-toggle="tab" class="">#tab1|Tab 1</btn></li>
   <li><btn data-toggle="tab" class="">#tab2|Tab 2</btn></li>
 </ul>

 <div class="tab-content">
   <div id="tab1" class="tab-pane fade in active">
     '''Tab 1''': Lorem ipsum...
   </div>
   <div id="tab2" class="tab-pane fade">
     '''Tab 2''': Lorem ipsum...
   </div>
 </div>


Result

Tab 1: Lorem ipsum...

Tab 2: Lorem ipsum...


HTML

  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#tab1" id="n-.23tab1" class="tab-toggle" data-toggle="tab">Tab 1</a>
    </li>
    <li>
      <a href="#tab2" id="n-.23tab2" class="tab-toggle" data-toggle="tab">Tab 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab-pane fade in active">
      <p><b>Tab 1</b>: Lorem ipsum...</p>
    </div>
    <div id="tab2" class="tab-pane fade">
      <p><b>Tab 2</b>: Lorem ipsum...</p>
    </div>
  </div>
Retrieved from "https://tweeki.kollabor.at/w/index.php?title=Tabs&oldid=761"