Installation

Usage

Bir sekmeci kullanmak için, tabberex sınıfıyla bir <div> ögesi oluşturun:

<div class="tabberex"></div>

Şimdi, sekmecinin sahip olmasını istediğiniz her sekme için, tabberex-tab sınıfıyla ilk sekmenin içinde bir <div> ögesi oluşturun. Sekmenin adı olarak kullanmak için isteğe bağlı olarak bu <div> etikete bir data-tab-header özniteliği ekleyebilirsiniz:

<div class="tabberex">
  <div class="tabberex-tab" data-tab-header="Varsayılan sekme"></div>
</div>

Ve şimdi, o sekmeyle ilişkilendirilmesini istediğiniz her şeyi ilgili <div> içine koyun:

<div class="tabberex">
  <div class="tabberex-tab" data-tab-header="Varsayılan sekme">Ben bir şeyler söyleyen bir sekmeyim</div>
  <div class="tabberex-tab" data-tab-header="Diğer sekme">Ben de bir şeyler söyleyen bir sekmeyim</div>
</div>

Ek seçenekler

Genişletilmiş başlık seçenekleri

Sekmenin adını tanımlamak için data-tab-header niteliğini kullanmak yerine, <div> içine tabberex-tab-header sınıfıyla bir yayılma koyabilirsiniz. Bu yöntem aslında daha fazla esneklik sağlar, çünkü sekme adına metinden daha fazlası konulabilir:

<div class="tabberex">
  <div class="tabberex-tab">
    <span class="tabberex-tab-header">[[File:Image]]</span>
    Sekme içeriği
  </div>
</div>

Sekmelerdeki bağlantılar

İsterseniz o sekmenin <div> ögesine bir data-tab-location özniteliği vererek bir sekmenin başka bir sayfaya bağlantı görevi görmesini sağlayabilirsiniz:

<div class="tabberex">
  <div class="tabberex-tab" data-tab-location="https://dev.fandom.com" data-tab-header="Dev ana sayfası"></div>
  <div class="tabberex-tab" data-tab-location="tabberex_js" data-tab-header="Kod"></div>
</div>

Varsayılan sekmeyi değiştirme

İlk sekmenin varsayılan olarak açık olmasını istemiyorsanız, tabberex-tab-default sınıfını o sekmeye ekleyebilirsiniz. Bir sekmedeki birden çok sekmede bu sınıf varsa, o sınıfa sahip son sekme varsayılan olacaktır.

Örnek 1:

<div class="tabberex">
  <div class="tabberex-tab">Ben varsayılan sekme değilim</div>
  <div class="tabberex-tab tabberex-tab-default">Benim.</div>
</div>

Örnek 2:

<div class="tabberex">
  <div class="tabberex-tab">Varsayılan olarak işaretlenmedim</div>
  <div class="tabberex-tab tabberex-tab-default">Varsayılan olarak işaretlendim, ancak varsayılan sekme değilim</div>
  <div class="tabberex-tab tabberex-tab-default">Varsayılan olarak işaretlendim ve varsayılan sekme benim</div>
</div>

Parçalanmış sekmeler

Sekmelerin ve sekme içeriğinin sayfada aynı yerde olmasını istemiyor musunuz? Sorun değil. tabberex sınıfıyla bir <div> oluşturmak yerine, sırasıyla tabberex-head ve tabberex-body sınıflarıyla iki <div> etiketi oluşturun ve her ikisine de data-tabber-id özelliği yapın (<div> etiketleri için aynı olduğu sürece değer önemli değildir):

<div class="tabberex-head" data-tabber-id="Test sekmesi">
  <div class="tabberex-tab"></div>
  <div class="tabberex-tab"></div>
</div>
<div class="tabberex-body" data-tabber-id="Test sekmesi">
  <div>Ben ilk sekmeyim</div>
  <div>Ve ben ikinciyim</div>
</div>

Özel görünür durum

Sekme içeriği, görünür olduğunda varsayılan olarak block olarak ayarlanmış CSS görünür özelliğine sahiptir. Başka bir değer kullanmak istediğiniz durumlarda, sekmeye bir data-tab-display özniteliği verin ve sahip olmasını istediğiniz değere ayarlayın:

<div class="tabberex">
    <div class="tabberex-tab" data-tab-display="inline">Şeyler</div>
</div>

Bilinen sorunlar

• mw-collapsible sınıfına sahip tablolar, tabberex sınıfına sahip bir <div> içine yerleştirildiğinde düzgün çalışmıyor (tabberex-body iyi çalışıyor).

Değişiklik günlüğü

2.2 (5/9/2021):

• Fixed bug where event handlers on elements (eg. mw-collapsible) are destroyed when using the "tabberex" class to create a tabber
• Added Custom visible state

2.1 (25/5/2021):

• Fixed bug where extended headers would appear in the tab content when using the "tabberex" class to create a tabber
• Fixed bug where tab visuals weren't correct outside of the editor preview

2.0 (18/1/2021):

• Complete code rework
• Added Fragmented tabbers

1.1 (28/12/2020): Added Extended tab headers

1.0 (25/11/2020): Initial release