TabsSekme

Sekme bileşeni, içeriği veya veri kümelerini gruplandırmak ve görüntülemek için kullanılır. Bu sayede kullanıcılar farklı kategoriler arasında hızlıca geçiş yapabilir.

Kullanım Şekli

Bileşenleri ihtiyacınıza göre içe aktarın:

import 'mdui/components/tabs.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';

Bileşenlerin TypeScript türlerini ihtiyacınıza göre içe aktarın:

import type { Tabs } from 'mdui/components/tabs.js';
import type { Tab } from 'mdui/components/tab.js';
import type { TabPanel } from 'mdui/components/tab-panel.js';

Kullanım örneği:

Sekme 1

Sekme 2

Sekme 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="sekme-1">
  <mdui-tab value="sekme-1">Sekme 1</mdui-tab>
  <mdui-tab value="sekme-2">Sekme 2</mdui-tab>
  <mdui-tab value="sekme-3">Sekme 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="sekme-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="sekme-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="sekme-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

Örnekler

Sekme Stili

<mdui-tabs> bileşeninde variant özniteliğini kullanarak sekmelerin stilini ayarlayabilirsiniz.

Sekme 1

Sekme 2

Sekme 3

Panel 1

Panel 2

Panel 3

Sekme 1

Sekme 2

Sekme 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="sekme-1" variant="primary">
  <mdui-tab value="sekme-1">Sekme 1</mdui-tab>
  <mdui-tab value="sekme-2">Sekme 2</mdui-tab>
  <mdui-tab value="sekme-3">Sekme 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="sekme-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="sekme-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="sekme-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

<mdui-tabs value="sekme-1" variant="secondary">
  <mdui-tab value="sekme-1">Sekme 1</mdui-tab>
  <mdui-tab value="sekme-2">Sekme 2</mdui-tab>
  <mdui-tab value="sekme-3">Sekme 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="sekme-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="sekme-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="sekme-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

Kaynak Kodu

Sekme Konumu

<mdui-tabs> bileşeninde placement özniteliğini kullanarak sekmelerin konumunu ayarlayabilirsiniz.

üst-sol

üst

üst-sağ

alt-sol

alt

alt-sağ

sol-üst

sol

sol-alt

sağ-üst

sağ

sağ-alt

Sekme 1

Sekme 2

Sekme 3

Panel 1

Panel 2

Panel 3

<mdui-select class="example-change-placement" placeholder="placement değerini seçin" style="width: 180px">
  <mdui-menu-item value="top-start">üst-sol</mdui-menu-item>
  <mdui-menu-item value="top">üst</mdui-menu-item>
  <mdui-menu-item value="top-end">üst-sağ</mdui-menu-item>
  <mdui-menu-item value="bottom-start">alt-sol</mdui-menu-item>
  <mdui-menu-item value="bottom">alt</mdui-menu-item>
  <mdui-menu-item value="bottom-end">alt-sağ</mdui-menu-item>
  <mdui-menu-item value="left-start">sol-üst</mdui-menu-item>
  <mdui-menu-item value="left">sol</mdui-menu-item>
  <mdui-menu-item value="left-end">sol-alt</mdui-menu-item>
  <mdui-menu-item value="right-start">sağ-üst</mdui-menu-item>
  <mdui-menu-item value="right">sağ</mdui-menu-item>
  <mdui-menu-item value="right-end">sağ-alt</mdui-menu-item>
</mdui-select>

<mdui-tabs value="sekme-1" placement="top-start" class="example-placement">
  <mdui-tab value="sekme-1">Sekme 1</mdui-tab>
  <mdui-tab value="sekme-2">Sekme 2</mdui-tab>
  <mdui-tab value="sekme-3">Sekme 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="sekme-1" style="height: 260px">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="sekme-2" style="height: 260px">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="sekme-3" style="height: 260px">Panel 3</mdui-tab-panel>
</mdui-tabs>

<script>
  const select = document.querySelector(".example-change-placement");
  const tabs = document.querySelector(".example-placement");

  select.addEventListener("change", (event) => {
    tabs.placement = event.target.value;
  });
</script>

Kaynak Kodu

Tam Genişlik Gösterimi

<mdui-tabs> bileşenine full-width özniteliğini ekleyerek sekmelerin tüm genişliği kaplamasını sağlayabilirsiniz. Bu durumda her bir sekme genişliği eşit olarak paylaşır.

Sekme 1

Sekme 2

Sekme 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="sekme-1" full-width>
  <mdui-tab value="sekme-1">Sekme 1</mdui-tab>
  <mdui-tab value="sekme-2">Sekme 2</mdui-tab>
  <mdui-tab value="sekme-3">Sekme 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="sekme-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="sekme-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="sekme-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

Kaynak Kodu

Simge

<mdui-tab> bileşeninde icon özniteliğini ayarlayarak sekmeye Material Icons simgesi ekleyebilirsiniz. Ayrıca icon slot'u aracılığıyla da simge öğesi ekleyebilirsiniz.

Simgeyi ve metni yatay olarak hizalamak için inline özniteliğini ekleyin.

Sekme 1

Sekme 2

Sekme 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="sekme-1">
  <mdui-tab value="sekme-1" icon="library_music">Sekme 1</mdui-tab>
  <mdui-tab value="sekme-2">
    Sekme 2
    <mdui-icon slot="icon" name="movie"></mdui-icon>
  </mdui-tab>
  <mdui-tab value="sekme-3" icon="menu_book" inline>Sekme 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="sekme-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="sekme-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="sekme-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

Kaynak Kodu

Rozet

<mdui-tab> bileşeninde, badge slot'u aracılığıyla rozet ekleyebilirsiniz.

Sekme 1 99+

Sekme 2

Sekme 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="sekme-1">
  <mdui-tab value="sekme-1">
    Sekme 1
    <mdui-badge slot="badge">99+</mdui-badge>
  </mdui-tab>
  <mdui-tab value="sekme-2">Sekme 2</mdui-tab>
  <mdui-tab value="sekme-3">Sekme 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="sekme-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="sekme-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="sekme-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

Kaynak Kodu

Özel İçerik

<mdui-tab> bileşeninde custom slot'unu kullanarak sekmenin içeriğini tamamen özelleştirebilirsiniz.

Sekme 1 Simge

Sekme 2

Sekme 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="sekme-1">
  <mdui-tab value="sekme-1">
    Sekme 1
    <mdui-chip slot="custom" icon="search">Simge</mdui-chip>
  </mdui-tab>
  <mdui-tab value="sekme-2">Sekme 2</mdui-tab>
  <mdui-tab value="sekme-3">Sekme 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="sekme-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="sekme-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="sekme-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

Kaynak Kodu

`mdui-tab-panel` API

Özellikler

Öznitelik	Özellik	Reflect	Tür	Varsayılan
`value`	`value`		`string`	-
Sekme panel öğesinin değeri.

Slots

Ad
Varsayılan
Sekme panel öğesi içeriği.

`mdui-tab` API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`value`	`value`	`string`	-
Sekme gezinme öğesinin değeri.
`icon`	`icon`	`string`	-
Material Icons simge adı. `slot="icon"` ile de ayarlanabilir.
`inline`	`inline`	`boolean`	`false`
Simge ve metnin yatay olarak düzenlenip düzenlenmeyeceği.
`autofocus`	`autofocus`	`boolean`	`false`
Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
`tabindex`	`tabIndex`	`number`	-
Sekme tuşu ile odak geçişi yapılırken öğenin sırası.

Yöntemler

Ad	Parametreler	Dönüş Değeri
`click`		`void`
Öğeye fare tıklamasını simüle eder.
`focus`	`options: FocusOptions` (İsteğe Bağlı)	`void`
Odağı geçerli öğeye ayarlar. Parametre olarak bir nesne iletilebilir. Nesnenin özellikleri şunlardır: `preventScroll`: Varsayılan olarak, öğe odaklandıktan sonra sayfa, öğeyi görünüme getirmek için kayar. Sayfanın kaydırılmasını istemiyorsanız, bu özelliği `true` olarak ayarlayabilirsiniz.
`blur`		`void`
Odağı geçerli öğeden kaldırır.

Olaylar

Ad
`focus`
Odak alındığında tetiklenir.
`blur`
Odak kaybedildiğinde tetiklenir.

Slots

Ad
Varsayılan
Sekme gezinme öğesinin metin içeriği.
`icon`
Sekme gezinme öğesindeki simge.
`badge`
Rozet.
`custom`
Tüm sekme gezinme öğesindeki içeriği özelleştirir.

CSS Parts

Ad
`container`
Sekme gezinme öğesi kabı.
`icon`
Sekme gezinme öğesindeki simge.
`label`
Sekme gezinme öğesinin metni.

`mdui-tabs` API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`variant`	`variant`	`'primary' \| 'secondary'`	`'primary'`
Sekme şekli. Olası değerler: `primary`: Uygulamanın ana sayfaları arasında geçiş yapmak için `<mdui-top-app-bar>` altında kullanıma uygundur `secondary`: Bir sayfada, bir grup ilgili içerik arasında geçiş yapmak için kullanıma uygundur
`value`	`value`	`string`	-
Şu anda etkin olan `<mdui-tab>` değeri.
`placement`	`placement`	`'top-start' \| 'top' \| 'top-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'top-start'`
Sekme konumu. Varsayılan `top-start`'tır. Olası değerler: `top-start`: Üstte, sola hizalı `top`: Üstte, ortalanmış `top-end`: Üstte, sağa hizalı `bottom-start`: Altta, sola hizalı `bottom`: Altta, ortalanmış `bottom-end`: Altta, sağa hizalı `left-start`: Solda, üste hizalı `left`: Solda, ortalanmış `left-end`: Solda, alta hizalı `right-start`: Sağda, üste hizalı `right`: Sağda, ortalanmış `right-end`: Sağda, alta hizalı
`full-width`	`fullWidth`	`boolean`	`false`
Ana öğenin genişliğini doldurup doldurmayacağı.

Olaylar

Ad
`change`
Seçili değer değiştiğinde tetiklenir.

Slots

Ad
Varsayılan
`<mdui-tab>` öğeleri.
`panel`
`<mdui-tab-panel>` öğeleri.

CSS Parts

Ad
`container`
`<mdui-tab>` öğelerinin kabı.
`indicator`
Etkin durum göstergesi.

Önceki Bölüm

Switch Anahtar

Sonraki Bölüm

TextField Metin Alanı