Material Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.

Sekme

Kullanım

Özel öznitelikler aracılığıyla çağırma (bileşen dinamik olarak oluşturulmuşsa, başlatma için mdui.mutation() çağrılması gerekir)
JavaScript ile Çağır

İlgili Okumalar

Material Design tasarım yönergeleri: Bileşenler - Sekmeler

Stil

Temel stil

Aşağıda standart bir sekme bulunmaktadır. Mobil cihazlarda %100 genişlik kaplar ve her seçenek eşit genişliktedir; tabletlerde/PC'lerde sola hizalanır.

Örnek


        <div class="mdui-tab" mdui-tab>
          <a href="#example1-tab1" class="mdui-ripple">web</a>
          <a href="#example1-tab2" class="mdui-ripple">shopping</a>
          <a href="#example1-tab3" class="mdui-ripple">images</a>
        </div>
        <div id="example1-tab1" class="mdui-p-a-2">web content</div>
        <div id="example1-tab2" class="mdui-p-a-2">shopping content</div>
        <div id="example1-tab3" class="mdui-p-a-2">images content</div>

Kaydırılabilir

<div class="mdui-tab"> öğesine .mdui-tab-scrollable sınıfını ekleyerek sekmelerin yatay olarak kaydırılmasını sağlayın; genellikle çok sayıda seçeneğin olduğu mobil senaryolarda kullanılır.

Örnek


        <div class="mdui-tab mdui-tab-scrollable" mdui-tab>
          <a href="#example2-tab1" class="mdui-ripple">web</a>
          <a href="#example2-tab2" class="mdui-ripple">shopping</a>
          <a href="#example2-tab3" class="mdui-ripple">videos</a>
          <a href="#example2-tab4" class="mdui-ripple">images</a>
          <a href="#example2-tab5" class="mdui-ripple">news</a>
          <a href="#example2-tab6" class="mdui-ripple">maps</a>
          <a href="#example2-tab7" class="mdui-ripple">books</a>
          <a href="#example2-tab8" class="mdui-ripple">flights</a>
          <a href="#example2-tab9" class="mdui-ripple">apps</a>
          <a href="#example2-tab10" class="mdui-ripple">dictionary</a>
        </div>

Ortaya hizalı

<div class="mdui-tab"></div> öğesine .mdui-tab-centered sınıfını ekleyerek sekmeleri tabletlerde/PC'lerde ortaya hizalayabilirsiniz.

Örnek


        <div class="mdui-tab mdui-tab-centered" mdui-tab>
          <a href="#example3-tab1" class="mdui-ripple">web</a>
          <a href="#example3-tab2" class="mdui-ripple">shopping</a>
          <a href="#example3-tab3" class="mdui-ripple">videos</a>
        </div>

%100 genişlik

<div class="mdui-tab"></div> öğesine .mdui-tab-full-width sınıfını ekleyerek sekmelerin her zaman %100 genişlik kaplamasını ve her sekmenin eşit genişlikte olmasını sağlayabilirsiniz.

Örnek


        <div class="mdui-tab mdui-tab-full-width" mdui-tab>
          <a href="#example4-tab1" class="mdui-ripple">web</a>
          <a href="#example4-tab2" class="mdui-ripple">shopping</a>
          <a href="#example4-tab3" class="mdui-ripple">videos</a>
        </div>

Simge içerir

Örnek


        <div class="mdui-tab" mdui-tab>
          <a href="#example5-tab1" class="mdui-ripple">
            <i class="mdui-icon material-icons">phone</i>
          </a>
          <a href="#example5-tab2" class="mdui-ripple">
            <i class="mdui-icon material-icons">favorite</i>
          </a>
          <a href="#example5-tab3" class="mdui-ripple">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
          </a>
        </div>

Simge ve metin içerir

Örnek


        <div class="mdui-tab" mdui-tab>
          <a href="#example6-tab1" class="mdui-ripple">
            <i class="mdui-icon material-icons">phone</i>
            <label>recents</label>
          </a>
          <a href="#example6-tab2" class="mdui-ripple">
            <i class="mdui-icon material-icons">favorite</i>
            <label>favorites</label>
          </a>
          <a href="#example6-tab3" class="mdui-ripple">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
            <label>nearby</label>
          </a>
        </div>

Arka plan rengi içerir

<div class="mdui-tab"></div> öğesine .mdui-color-[color] sınıfını ekleyerek sekmeye bir arka plan rengi atayabilirsiniz.

Örnek


        <div class="mdui-tab mdui-color-theme" mdui-tab>
          <a href="#example7-tab1" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">phone</i>
            <label>recents</label>
          </a>
          <a href="#example7-tab2" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">favorite</i>
            <label>favorites</label>
          </a>
          <a href="#example7-tab3" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
            <label>nearby</label>
          </a>
        </div>

Varsayılan olarak etkinleştirilen seçenek

<a> öğesine .mdui-tab-active sınıfını ekleyerek bu seçeneğin varsayılan olarak etkinleştirilmesini sağlayabilirsiniz.

Örnek


        <div class="mdui-tab" mdui-tab>
          <a href="#example8-tab1" class="mdui-ripple">web</a>
          <a href="#example8-tab2" class="mdui-tab-active mdui-ripple"
            >shopping</a
          >
          <a href="#example8-tab3" class="mdui-ripple">images</a>
        </div>

Devre dışı bırakılmış seçenek

<a> öğesine disabled özniteliği ekleyerek bu seçeneği devre dışı bırakabilirsiniz.

Örnek


        <div class="mdui-tab" mdui-tab>
          <a href="#example9-tab1" class="mdui-ripple">web</a>
          <a href="#example9-tab2" class="mdui-ripple" disabled>shopping</a>
          <a href="#example9-tab3" class="mdui-ripple">images</a>
        </div>

Kullanım

Öznitelik ile Çağır

Bu yöntem JavaScript kodu yazmayı gerektirmez. Bileşeni etkinleştirmek için <div class="mdui-tab"></div> öğesine mdui-tab="options" özniteliği eklemeniz yeterlidir.

Bileşen dinamik olarak oluşturulmuşsa, başlatma için mdui.mutation() çağrılması gerekir.

<div class="mdui-tab" mdui-tab>
...
</div>

JavaScript ile Çağır

Bileşeni örnekleme:

// selector, .mdui-tab öğesinin CSS seçicisi veya DOM öğesidir
// options, eklenti parametreleridir, aşağıdaki parametre listesine bakın
var inst = new mdui.Tab(selector, options);

Çalıştır

Parametre

Parametre Adı	Tür	Varsayılan	Açıklama
`trigger`	`string`	`click`	Sekme değiştirme tetikleme yöntemi. `click`: Tıklayarak değiştir `hover`: Fare ile üzerine gelerek değiştir
`loop`	`boolean`	`false`	Döngüsel geçişin etkinleştirilip etkinleştirilmeyeceği. `true` ise, son seçenek etkinleştirildiğinde next yöntemi çağrıldığında ilk seçeneğe döner ve ilk seçenek etkinleştirildiğinde prev yöntemi çağrıldığında son seçeneğe döner.

Yöntem

Yöntem Adı	Açıklama
`prev()`	Önceki seçeneğe geç
`next()`	Sonraki seçeneğe geç
`show(index)`	Belirtilen seçeneği gösterir. `index`: Seçeneğin dizin numarası veya id'si
`handleUpdate()`	Üst öğenin genişliği değiştiğinde, gösterge konumunu sıfırlamak için bu yöntemi çağırmanız gerekir. Sekmeye dinamik olarak yeni seçenekler eklendiğinde, yeni seçeneklerin etkili olması için bu yöntemi de çağırmanız gerekir.

Olay

Olay Adı	Açıklama	Hedef	Parametreler
`change.mdui.tab`	Sekme değiştirildiğinde olay tetiklenir.	`<div class="mdui-tab"></div>`	`event._detail.inst`: Örnek `event._detail.index`: Etkinleştirilen seçeneğin dizin numarası `event._detail.id`: Etkinleştirilen sekme içeriğinin id'si
`show.mdui.tab`	Belirtilen seçeneğe geçildiğinde olay tetiklenir.	`<a></a>`	`event._detail.inst`: Örnek

CSS Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-tab`	Bir sekme bileşeni tanımlar.
`.mdui-tab-scrollable`	Kaydırılabilir sekme bileşeni.
`.mdui-tab-centered`	Ortaya hizalanmış sekme bileşeni.
`.mdui-tab-full-width`	%100 genişlikte sekme bileşeni.
`.mdui-tab-active`	Etkin durumdaki seçenek.

Izgara Listesi

Araç Çubuğu