AppShell

Ne zaman kullanılır

AppShell, çok sayfalı bir uygulamanın her sayfada aynı kalan çerçevesidir: kenar menüsü, üst çubuk ve içerik alanı. Uygulamanın kökünde bir kez kullanılır; sayfalar yalnızca içeriği değiştirir.

Ne zaman kullanılmaz

• Tek sayfalık akışlar için: Giriş, kayıt ya da adım adım akışlarda çerçeveyi gizleyin; dikkat dağılmasın.
• Sayfa içi gezinme için: Tabs ya da bağlantı listesi kullanın.
• Dar bir panelin içinde: AppShell ekran yüksekliğini doldurur; iç içe kullanmayın.

Anatomi

İçeriğe geç

Ürün adı

Genel

Ana sayfaGelen kutusu 3Raporlar

Yönetim

EkipAyarlar

Ana sayfa

Sayfa içeriği burada durur.

AçıkKoyu

Kodu kopyala

import { AppShell, NavGroup, NavItem, PageHeader } from '@bigbang/ui';

export default function Default() {
  return (
    <AppShell
      mainId="default-example-main"
      className="h-[28rem] min-h-0"
      brand={<strong>Ürün adı</strong>}
      nav={
        <>
          <NavGroup label="Genel">
            <NavItem href="#" label="Ana sayfa" icon="home" current />
            <NavItem href="#" label="Gelen kutusu" icon="mail" badge={3} />
            <NavItem href="#" label="Raporlar" icon="layout-grid" />
          </NavGroup>
          <NavGroup label="Yönetim" collapsible>
            <NavItem href="#" label="Ekip" icon="user" />
            <NavItem href="#" label="Ayarlar" icon="settings" />
          </NavGroup>
        </>
      }
    >
      <PageHeader title="Ana sayfa" description="Sayfa içeriği burada durur." />
    </AppShell>
  );
}

1. İçeriğe geç bağlantısı: Klavye odağı aldığında görünür.
2. Kenar menüsü: Ürün adı, gruplar ve bağlantılar; geçerli sayfanın yanında kayan gösterge.
3. Daraltma düğmesi: Kenar menüsünü ikonlara daraltır ve genişletir.
4. Üst çubuk: 1024 px’in altında menü düğmesi ve header içeriği.
5. İçerik: main bölgesi; genellikle PageHeader ile başlar.
6. Açılır menü: 1024 px’in altında kenar menüsünün yerini alır.

Davranış

• Geçerli sayfa current ile işaretlenir: seçili zemin, marka renkli ikon ve soldaki çubuk. Sayfa değişince çubuk yaya bağlı kayar; ilk çizimde kaymadan yerinde belirir.
• Daraltma düğmesi kenar menüsünü 48 px genişliğe indirir (Ctrl+B ya da Cmd+B veya kenar menüsünün kenarına tıklamak da aynı işi yapar); etiketler gizlenir, tarayıcı ipucu ve ekran okuyucu için kalır. Genişleyince etiketler yumuşakça belirir. Genişlik değişimi animasyonsuzdur (MOT-02).
• Katlanabilen grup başlığına tıklamak grubu açar ve kapar; içerik 4 px kayarak belirir, ok yarım tur döner.
• 1024 px’in altında kenar menüsü gizlenir. Menü düğmesi açılır menüyü yandan kaydırarak açar; arka plan kararır. Bir bağlantıya tıklamak, Escape ya da dışarı tıklama menüyü kapatır ve odak menü düğmesine döner.
• Hareketi azaltma tercihinde gösterge anında yer değiştirir, açılır menü yalnızca solar.

Yönergeler

• Kenar menüsünde en fazla iki düzey kullanın: grup ve bağlantı.
• Her bağlantıya bir ikon verin; daralmış menü ikonsuz öğeyi tanınmaz kılar.
• Bir grupta yedi bağlantıyı geçmeyin; az kullanılan grupları collapsible yapın.
• Üst çubukta arama (Command açan düğme) ve kullanıcı menüsü gibi az sayıda öğe tutun.

İçerik

• Bağlantı etiketleri sayfanın adıdır, bir ya da iki kelime.
• Grup başlıkları kısa ad öbekleridir.

Türkçe	İngilizce
Ana menü	Main menu
İçeriğe geç	Skip to content
Menüyü aç	Open menu
Menüyü kapat	Close menu
Menüyü daralt	Collapse menu
Menüyü genişlet	Expand menu

Cam

Provider material="glass" altında üst çubuk altında bulanık bir kaydırma kenarıyla cama döner; inset varyantında kenar çubuğu da cama döner. İçerik paneli ve menü çekmecesi opak kalır. material="solid" onu opak tutar.

İlgili bileşenler

• PageHeader: İçerik alanının başı.
• Breadcrumbs: Derin sayfalarda konum.
• Command: Klavyeden hızlı gezinme.