Bileşenler

AppShell

Uygulama çerçevesi: daraltılabilen kenar menüsü, mobilde açılır menü, üst çubuk ve sayfa içeriği.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz. Örnek tam ekran açılır; menüden sayfa değiştirerek göstergenin kaymasına, daraltma düğmesiyle ikon görünümüne bakın.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

AppShell kenar menüsünü, üst çubuğu ve içeriği yerleştirir. Geçerli sayfa current ile işaretlenir; solda kayan bir çubuk onu izler. 1024 px’in altında kenar menüsü gizlenir ve üst çubuktaki düğme açılır menüyü gösterir.

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>
  );
}

Daralmış

Alttaki düğme kenar menüsünü ikonlara daraltır. Etiketler ekran okuyucu için kalır ve tarayıcı ipucu olarak görünür.

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

export default function Collapsed() {
  return (
    <AppShell
      defaultCollapsed
      mainId="collapsed-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>
  );
}

İçe yerleşik

variant="inset" 1024 px ve üstünde üst çubuğu ve içeriği, kenar menüsünün zemini üstünde yuvarlak köşeli, gölgeli bir panel olarak gösterir. Daha dar ekranlarda kabuk varsayılan görünümdedir.

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

export default function Inset() {
  return (
    <AppShell
      variant="inset"
      mainId="inset-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>
  );
}

Açık ve koyu mod

Renkler semantik token’lardan gelir; iki modda ayrı ayar gerekmez.

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>
  );
}