Templat: BootstrapTabsVerticalResponsive: Perbedaan antara revisi

Dari GBI Danau Bogor Raya
Lompat ke: navigasi, cari
← Revisi sebelumnya
Leo (bicara | kontrib)
Developer, Editor, Birokrat, deleteperm, developer, Pengurus antarmuka, maintenanceshell, Pengawas, Administrator
55.582 suntingan
k upd
Leo (bicara | kontrib)
Developer, Editor, Birokrat, deleteperm, developer, Pengurus antarmuka, maintenanceshell, Pengawas, Administrator
55.582 suntingan
k kembalikan
 
Baris 3: Baris 3:
<ul class="nav nav-pills flex-md-column {{{tabclass|}}}" id="Tabs_ID" role="tablist" style="margin-left: 0; {{{tabstyle|}}}">
<ul class="nav nav-pills flex-md-column {{{tabclass|}}}" id="Tabs_ID" role="tablist" style="margin-left: 0; {{{tabstyle|}}}">
   <li class="nav-item">
   <li class="nav-item">
     <btn class="nav-link {{#ifeq:{{{activepage|1}}}|1|active}}" id="ATab1-tab" data-toggle="tab" role="tab" aria-controls="ATab1" aria-selected="true">#ATab1|{{{tab1}}}</btn>
     <btn class="nav-link active" id="ATab1-tab" data-toggle="tab" role="tab" aria-controls="ATab1" aria-selected="true">#ATab1|{{{tab1}}}</btn>
   </li>
   </li>


{{#ifexpr: {{{tabcount|1}}}>=2 | <li class="nav-item">
{{#ifexpr: {{{tabcount|1}}}>=2 | <li class="nav-item">
     <btn class="nav-link {{#ifeq:{{{activepage|1}}}|2|active}}" id="ATab2-tab" data-toggle="tab" role="tab" aria-controls="ATab2" aria-selected="true">#ATab2|{{{tab2}}}</btn>
     <btn class="nav-link" id="ATab2-tab" data-toggle="tab" role="tab" aria-controls="ATab2" aria-selected="true">#ATab2|{{{tab2}}}</btn>
   </li> }}
   </li> }}


{{#ifexpr: {{{tabcount|1}}}>=3 | <li class="nav-item">
{{#ifexpr: {{{tabcount|1}}}>=3 | <li class="nav-item">
     <btn class="nav-link {{#ifeq:{{{activepage|1}}}|3|active}}" id="ATab3-tab" data-toggle="tab" role="tab" aria-controls="ATab3" aria-selected="true">#ATab3|{{{tab3}}}</btn>
     <btn class="nav-link" id="ATab3-tab" data-toggle="tab" role="tab" aria-controls="ATab3" aria-selected="true">#ATab3|{{{tab3}}}</btn>
   </li> }}
   </li> }}


{{#ifexpr: {{{tabcount|1}}}>=4 | <li class="nav-item">
{{#ifexpr: {{{tabcount|1}}}>=4 | <li class="nav-item">
     <btn class="nav-link {{#ifeq:{{{activepage|1}}}|4|active}}" id="ATab4-tab" data-toggle="tab" role="tab" aria-controls="ATab4" aria-selected="true">#ATab4|{{{tab4}}}</btn>
     <btn class="nav-link" id="ATab4-tab" data-toggle="tab" role="tab" aria-controls="ATab4" aria-selected="true">#ATab4|{{{tab4}}}</btn>
   </li> }}
   </li> }}


{{#ifexpr: {{{tabcount|1}}}>=5 | <li class="nav-item">
{{#ifexpr: {{{tabcount|1}}}>=5 | <li class="nav-item">
     <btn class="nav-link {{#ifeq:{{{activepage|1}}}|5|active}}" id="ATab5-tab" data-toggle="tab" role="tab" aria-controls="ATab5" aria-selected="true">#ATab5|{{{tab5}}}</btn>
     <btn class="nav-link" id="ATab5-tab" data-toggle="tab" role="tab" aria-controls="ATab5" aria-selected="true">#ATab5|{{{tab5}}}</btn>
   </li> }}
   </li> }}


{{#ifexpr: {{{tabcount|1}}}>=6 | <li class="nav-item">
{{#ifexpr: {{{tabcount|1}}}>=6 | <li class="nav-item">
     <btn class="nav-link {{#ifeq:{{{activepage|1}}}|6|active}}" id="ATab6-tab" data-toggle="tab" role="tab" aria-controls="ATab6" aria-selected="true">#ATab6|{{{tab6}}}</btn>
     <btn class="nav-link" id="ATab6-tab" data-toggle="tab" role="tab" aria-controls="ATab6" aria-selected="true">#ATab6|{{{tab6}}}</btn>
   </li> }}
   </li> }}


{{#ifexpr: {{{tabcount|1}}}>=7 | <li class="nav-item">
{{#ifexpr: {{{tabcount|1}}}>=7 | <li class="nav-item">
     <btn class="nav-link {{#ifeq:{{{activepage|1}}}|7|active}}" id="ATab7-tab" data-toggle="tab" role="tab" aria-controls="ATab7" aria-selected="true">#ATab7|{{{tab7}}}</btn>
     <btn class="nav-link" id="ATab7-tab" data-toggle="tab" role="tab" aria-controls="ATab7" aria-selected="true">#ATab7|{{{tab7}}}</btn>
   </li> }}
   </li> }}


{{#ifexpr: {{{tabcount|1}}}>=8 | <li class="nav-item">
{{#ifexpr: {{{tabcount|1}}}>=8 | <li class="nav-item">
     <btn class="nav-link {{#ifeq:{{{activepage|1}}}|8|active}}" id="ATab8-tab" data-toggle="tab" role="tab" aria-controls="ATab8" aria-selected="true">#ATab8|{{{tab8}}}</btn>
     <btn class="nav-link" id="ATab8-tab" data-toggle="tab" role="tab" aria-controls="ATab8" aria-selected="true">#ATab8|{{{tab8}}}</btn>
   </li> }}
   </li> }}


{{#ifexpr: {{{tabcount|1}}}>=9 | <li class="nav-item">
{{#ifexpr: {{{tabcount|1}}}>=9 | <li class="nav-item">
     <btn class="nav-link {{#ifeq:{{{activepage|1}}}|9|active}}" id="ATab9-tab" data-toggle="tab" role="tab" aria-controls="ATab9" aria-selected="true">#ATab9|{{{tab9}}}</btn>
     <btn class="nav-link" id="ATab9-tab" data-toggle="tab" role="tab" aria-controls="ATab9" aria-selected="true">#ATab9|{{{tab9}}}</btn>
   </li> }}
   </li> }}


{{#ifexpr: {{{tabcount|1}}}>=10 | <li class="nav-item">
{{#ifexpr: {{{tabcount|1}}}>=10 | <li class="nav-item">
     <btn class="nav-link {{#ifeq:{{{activepage|1}}}|10|active}}" id="ATab10-tab" data-toggle="tab" role="tab" aria-controls="ATab10" aria-selected="true">#ATab10|{{{tab10}}}</btn>
     <btn class="nav-link" id="ATab10-tab" data-toggle="tab" role="tab" aria-controls="ATab10" aria-selected="true">#ATab10|{{{tab10}}}</btn>
   </li> }}
   </li> }}


{{#ifexpr: {{{tabcount|1}}}>=11 | <li class="nav-item">
{{#ifexpr: {{{tabcount|1}}}>=11 | <li class="nav-item">
     <btn class="nav-link {{#ifeq:{{{activepage|1}}}|11|active}}" id="ATab11-tab" data-toggle="tab" role="tab" aria-controls="ATab11" aria-selected="true">#ATab11|{{{tab11}}}</btn>
     <btn class="nav-link" id="ATab11-tab" data-toggle="tab" role="tab" aria-controls="ATab11" aria-selected="true">#ATab11|{{{tab11}}}</btn>
   </li> }}
   </li> }}


{{#ifexpr: {{{tabcount|1}}}>=12 | <li class="nav-item">
{{#ifexpr: {{{tabcount|1}}}>=12 | <li class="nav-item">
     <btn class="nav-link {{#ifeq:{{{activepage|1}}}|12|active}}" id="ATab12-tab" data-toggle="tab" role="tab" aria-controls="ATab12" aria-selected="true">#ATab12|{{{tab12}}}</btn>
     <btn class="nav-link" id="ATab12-tab" data-toggle="tab" role="tab" aria-controls="ATab12" aria-selected="true">#ATab12|{{{tab12}}}</btn>
   </li> }}
   </li> }}
</ul></div><!--
</ul></div><!--


--><div class="col"><div class="tab-content {{{contentclass|p-3}}}" id="Tabs_Content" style="background: none; {{{contentstyle|}}}">
--><div class="col"><div class="tab-content {{{contentclass|p-3}}}" id="Tabs_Content" style="background: none; {{{contentstyle|}}}">
<div class="tab-pane fade {{#ifeq:{{{activepage|1}}}|1|show active}}" id="ATab1" role="tabpanel" aria-labelledby="ATab1-tab">
<div class="tab-pane fade show active" id="ATab1" role="tabpanel" aria-labelledby="ATab1-tab">
{{{1|{{{content1}}}}}}
{{{1|{{{content1}}}}}}
</div><!--
</div><!--


-->{{#ifexpr: {{{tabcount|1}}}>=2 | <div class="tab-pane fade {{#ifeq:{{{activepage|1}}}|2|show active}}" id="ATab2" role="tabpanel" aria-labelledby="ATab2-tab">
-->{{#ifexpr: {{{tabcount|1}}}>=2 | <div class="tab-pane fade" id="ATab2" role="tabpanel" aria-labelledby="ATab2-tab">
{{{2|{{{content2}}}}}}
{{{2|{{{content2}}}}}}
</div>}}<!--
</div>}}<!--


-->{{#ifexpr: {{{tabcount|1}}}>=3 | <div class="tab-pane fade {{#ifeq:{{{activepage|1}}}|3|show active}}" id="ATab3" role="tabpanel" aria-labelledby="ATab3-tab">
-->{{#ifexpr: {{{tabcount|1}}}>=3 | <div class="tab-pane fade" id="ATab3" role="tabpanel" aria-labelledby="ATab3-tab">
{{{3|{{{content3}}}}}}
{{{3|{{{content3}}}}}}
</div>}}<!--
</div>}}<!--


-->{{#ifexpr: {{{tabcount|1}}}>=4 | <div class="tab-pane fade {{#ifeq:{{{activepage|1}}}|4|show active}}" id="ATab4" role="tabpanel" aria-labelledby="ATab4-tab">
-->{{#ifexpr: {{{tabcount|1}}}>=4 | <div class="tab-pane fade" id="ATab4" role="tabpanel" aria-labelledby="ATab4-tab">
{{{4|{{{content4}}}}}}
{{{4|{{{content4}}}}}}
</div>}}<!--
</div>}}<!--


-->{{#ifexpr: {{{tabcount|1}}}>=5 | <div class="tab-pane fade {{#ifeq:{{{activepage|1}}}|5|show active}}" id="ATab5" role="tabpanel" aria-labelledby="ATab5-tab">
-->{{#ifexpr: {{{tabcount|1}}}>=5 | <div class="tab-pane fade" id="ATab5" role="tabpanel" aria-labelledby="ATab5-tab">
{{{5|{{{content5}}}}}}
{{{5|{{{content5}}}}}}
</div>}}<!--
</div>}}<!--


-->{{#ifexpr: {{{tabcount|1}}}>=6 | <div class="tab-pane fade {{#ifeq:{{{activepage|1}}}|6|show active}}" id="ATab6" role="tabpanel" aria-labelledby="ATab6-tab">
-->{{#ifexpr: {{{tabcount|1}}}>=6 | <div class="tab-pane fade" id="ATab6" role="tabpanel" aria-labelledby="ATab6-tab">
{{{6|{{{content6}}}}}}
{{{6|{{{content6}}}}}}
</div>}}<!--
</div>}}<!--


-->{{#ifexpr: {{{tabcount|1}}}>=7 | <div class="tab-pane fade {{#ifeq:{{{activepage|1}}}|7|show active}}" id="ATab7" role="tabpanel" aria-labelledby="ATab7-tab">
-->{{#ifexpr: {{{tabcount|1}}}>=7 | <div class="tab-pane fade" id="ATab7" role="tabpanel" aria-labelledby="ATab7-tab">
{{{7|{{{content7}}}}}}
{{{7|{{{content7}}}}}}
</div>}}<!--
</div>}}<!--


-->{{#ifexpr: {{{tabcount|1}}}>=8 | <div class="tab-pane fade {{#ifeq:{{{activepage|1}}}|8|show active}}" id="ATab8" role="tabpanel" aria-labelledby="ATab8-tab">
-->{{#ifexpr: {{{tabcount|1}}}>=8 | <div class="tab-pane fade" id="ATab8" role="tabpanel" aria-labelledby="ATab8-tab">
{{{8|{{{content8}}}}}}
{{{8|{{{content8}}}}}}
</div>}}<!--
</div>}}<!--


-->{{#ifexpr: {{{tabcount|1}}}>=9 | <div class="tab-pane fade {{#ifeq:{{{activepage|1}}}|9|show active}}" id="ATab9" role="tabpanel" aria-labelledby="ATab9-tab">
-->{{#ifexpr: {{{tabcount|1}}}>=9 | <div class="tab-pane fade" id="ATab9" role="tabpanel" aria-labelledby="ATab9-tab">
{{{9|{{{content9}}}}}}
{{{9|{{{content9}}}}}}
</div>}}<!--
</div>}}<!--


-->{{#ifexpr: {{{tabcount|1}}}>=10 | <div class="tab-pane fade {{#ifeq:{{{activepage|1}}}|10|show active}}" id="ATab10" role="tabpanel" aria-labelledby="ATab10-tab">
-->{{#ifexpr: {{{tabcount|1}}}>=10 | <div class="tab-pane fade" id="ATab10" role="tabpanel" aria-labelledby="ATab10-tab">
{{{10|{{{content10}}}}}}
{{{10|{{{content10}}}}}}
</div>}}<!--
</div>}}<!--


-->{{#ifexpr: {{{tabcount|1}}}>=11 | <div class="tab-pane fade {{#ifeq:{{{activepage|1}}}|11|show active}}" id="ATab11" role="tabpanel" aria-labelledby="ATab11-tab">
-->{{#ifexpr: {{{tabcount|1}}}>=11 | <div class="tab-pane fade" id="ATab11" role="tabpanel" aria-labelledby="ATab11-tab">
{{{11|{{{content11}}}}}}
{{{11|{{{content11}}}}}}
</div>}}<!--
</div>}}<!--


-->{{#ifexpr: {{{tabcount|1}}}>=12 | <div class="tab-pane fade {{#ifeq:{{{activepage|1}}}|12|show active}}" id="ATab12" role="tabpanel" aria-labelledby="ATab12-tab">
-->{{#ifexpr: {{{tabcount|1}}}>=12 | <div class="tab-pane fade" id="ATab12" role="tabpanel" aria-labelledby="ATab12-tab">
{{{12|{{{content12}}}}}}
{{{12|{{{content12}}}}}}
</div>}}
</div>}}

Revisi terkini sejak 9 Februari 2021 11.45

{{{content1}}}

Dokumentasi templat


Pemakaian

Pada device dengan size >= 768px, akan menggunakan vertikal. Untuk device lebih kecil, menggunakan nav tabs pada bagian atas. 

{{ BootstrapTabsVerticalResponsive
 | tabcount=
 | tabclass=
 | tabstyle=
 | leftpanecolclass= col-md-4

 | contentclass=
 | contentstyle=

 | tab1=
 | content1= <p class="h2">Judul</p>

 | tab2=
 | content2= <p class="h2">Judul</p>

 | tab3=
 | content3= <p class="h2">Judul</p>

 | tab4=
 | content4= <p class="h2">Judul</p>

 | tab5=
 | content5= <p class="h2">Judul</p>

 | tab6=
 | content6= <p class="h2">Judul</p>

 | tab7=
 | content7= <p class="h2">Judul</p>

 | tab8=
 | content8= <p class="h2">Judul</p>

 | tab9=
 | content9= <p class="h2">Judul</p>

 | tab10=
 | content10= <p class="h2">Judul</p>

 | tab11=
 | content11= <p class="h2">Judul</p>

 | tab12=
 | content12= <p class="h2">Judul</p>
}}


Dokumentasi di atas ditransklusikan dari Templat:BootstrapTabsVerticalResponsive/doc. (sunting | riwayat)
Penyunting dapat melakukan uji coba pada halaman bak pasir (buat | cermin) dan kasus uji (buat) templat ini.
Mohon tambahkan kategori pada subhalaman /doc. Subhalaman templat ini
Diperoleh dari "https://dbr.gbi-bogor.org/w/index.php?title=Templat:BootstrapTabsVerticalResponsive&oldid=20728"