Sekmeler

Her öğeye bir href verin, sekmeler bağlantı olsun — sekme başına bir sayfa, betik yok, etkin olanda aria-current. Her öğeye bir panel verin, panelleri yerinde değişen bir radyo grubuna dönüşsünler, yine betiksiz.

Statik bir sitede genellikle bağlantı biçimi doğrudur: her görünüme bir URL verir ve JavaScript kapalıyken de yaşar. İçerik küçükse ve geçişin bir gezinmeye mal olmaması gerekiyorsa panellere uzanın.

Bağlantı sekmeleri

Bunlar gerçekten bağlantıdır — birine tıklayın, gezinir. Alt çizgi tıklamadan değil, derleme sırasındaki active ya da value değerinden gelir; yani her sayfa kendi sekmesini işaretler. Bağlantı sekmesinin hiçbir yanı URL’e kendiliğinden tepki vermez: bunun için aşağıdaki panellerle yerinde geçiş yapın.

tabs({
  items: [
    { label: 'Gezinti yolu', href: '/ui/breadcrumbs' },
    { label: 'Sekmeler', href: '/ui/tabs', active: true },
    { label: 'Sayfalama', href: '/ui/pagination' },
  ],
})

Panel sekmeleri

Sekme, stil sayfasının gözden uzak tuttuğu bir radyo için bir <label> öğesidir ve işaretli radyonun ardından gelen panel, CSS’in gösterdiği paneldir. Bu sayfada hiçbir şey içe aktarılmaz: geçiş ve sekmeler arasında dolaşan ok tuşları, bir radyo grubunun zaten yaptığı şeylerdir.

tabs({
  value: 'install',
  items: [
    { id: 'install', label: 'Kurulum', panel: card({ variant: 'flat' }, cardBody(code('npm install sitelo javascript-to-html'))) },
    { id: 'use', label: 'Kullanım', panel: card({ variant: 'flat' }, cardBody(code("import * as ui from 'sitelo/ui'"))) },
    { id: 'build', label: 'Derleme', panel: card({ variant: 'flat' }, cardBody(code('sitelo build'))) },
  ],
})

Derin bağlanabilir sekmeler

Panelli öğelere ayrıca bir parça href verin, radyolar yerini bağlantılara bıraksın: URL sekmeyi adlandırır, :target onu seçer, ardından gelen panel görünür ve seçim bir yeniden yüklemeden, paylaşılan bir bağlantıdan ve geri düğmesinden sağ çıkar. Kimlik panelde değil sekmededir, çünkü tarayıcı URL’in adlandırdığı şeyi pencerenin tepesine kaydırır — paneli adlandırmak, az önce tıkladığınız sekmeleri ekrandan kaydırıp çıkarırdı. Bir belgede yalnızca bir öğe :target olabilir, bu yüzden bu biçim bir sayfadaki tek bir sekme kümesi içindir. Kaydırmanın kendisi iptal edilemez: bir parçayı izlemek tanımı gereği pencereyi oynatır. Bir sayfanın yapabileceği tek şey, neye kaydırılacağını ve nereye ineceğini seçmektir; sekmedeki kimlik ile onun scroll-margin-block-start değerinin varlık nedeni budur — onu scrollMargin propuyla ayarlayın ve yapışkan bir başlığa en azından kendi yüksekliğini verin.

tabs({
  items: [
    { id: 'setup', label: 'Kurulum', href: '#tab-setup', panel: card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Bu panel #tab-setup — URL’i kopyalayın, geri gelir.'))) },
    { id: 'deploy', label: 'Dağıtım', href: '#tab-deploy', panel: card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Bu da #tab-deploy.'))) },
  ],
})

Haplar

stack({ gap: 'lg' },
  tabs({
    variant: 'pills',
    items: [
      { label: 'Tümü', href: '#all', active: true },
      { label: 'Rehberler', href: '#guides' },
      { label: 'Örnekler', href: '#examples' },
    ],
  }),
  tabs({
    variant: 'pills',
    value: 'js',
    items: [
      { id: 'js', label: 'JavaScript', panel: card({ variant: 'flat' }, cardBody(code('src/index.ht.js'))) },
      { id: 'ts', label: 'TypeScript', panel: card({ variant: 'flat' }, cardBody(code('src/index.ht.ts'))) },
      { id: 'jsx', label: 'JSX', panel: card({ variant: 'flat' }, cardBody(code('src/index.ht.jsx'))) },
    ],
  }),
)

Renkler

stack({ gap: 'lg' },
  tabs({ color: 'primary', items: [{ label: 'Primary', href: '#p', active: true }, { label: 'Diğer', href: '#p2' }] }),
  tabs({ color: 'neutral', items: [{ label: 'Neutral', href: '#n', active: true }, { label: 'Diğer', href: '#n2' }] }),
  tabs({ color: 'danger', items: [{ label: 'Danger', href: '#d', active: true }, { label: 'Diğer', href: '#d2' }] }),
)

Çok sayıda sekme

Sekme listesi sarmak yerine yatay kaydırılır, böylece sıra telefonda biçimini korur. Panel sekmeleri ise sarar — her panelin kendi sekmesini izlemesi gerekir, bu da kaydırılacak bir sıra öğesi bırakmaz.

tabs({
  items: [
    'Genel bakış', 'Yönlendirme', 'Veri', 'Varlıklar', 'Görseller', 'Adalar', 'TypeScript', 'CLI', 'Dağıtım',
  ].map((label, index) => ({ label, href: '#many-' + index, active: index === 0 })),
})

Devre dışı

tabs({
  value: 'now',
  items: [
    { id: 'now', label: 'Kullanılabilir', panel: card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Bu çalışıyor.'))) },
    { id: 'soon', label: 'Yakında', disabled: true, panel: card({ variant: 'flat' }, cardBody('')) },
  ],
})

Erişilebilirlik

Panel biçimi gerçek bir radyo grubudur: sekmeler, bir name paylaşan radyolar için <label> öğeleridir; böylece bir ekran okuyucu kaç tanesinden hangisinin seçildiğini duyurur ve ok tuşları, Home ile End hiçbir şey yüklenmeden çalışır. Derin bağlanabilir biçim ise düz bağlantılardır ve aria-current taşımaz — bir kez yazılır ve ilk tıklamadan sonra yanlış olurdu. Bilerek bir ARIA tablist değildir — aria-selected bir kez, sunucuda yazılır ve siz tıkladıkça CSS onu doğru tutamaz. Bağlantı biçimi de bir tablist değildir: gezinen bağlantılar bağlantıdır ve onlara sekme anlamı vermek ne yaptıkları konusunda yalan söylemek olurdu.

Proplar