AppShell

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { AppShell } from '@bigbang/ui';

Kaynak

AppShell.tsx

Storybook

AppShell · Playground

AppShell, NavGroup ve NavItem @bigbang/ui paketindedir.

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

<AppShell
  brand={<Logo />}
  header={<UserMenu />}
  nav={
    <NavGroup label="Genel">
      <NavItem href="/" label="Ana sayfa" icon="home" current={path === '/'} render={<RouterLink to="/" />} />
    </NavGroup>
  }
>
  <Outlet />
</AppShell>;

Özellikler

AppShell

navZorunlu

Açıklama

Gezinme: NavGroup ve NavItem parçaları. Kenar menüsünde ve 1024 px'in altında açılır menüde gösterilir.

Tür

ReactNode

childrenZorunlu

Açıklama

Sayfa içeriği; main içinde çizilir.

Tür

ReactNode

brand

Açıklama

Kenar menüsünün ve açılır menünün üstündeki ürün adı ya da logo.

Tür

ReactNode

header

Açıklama

Üst çubuğun içeriği, örneğin arama düğmesi ve kullanıcı menüsü.

Tür

ReactNode

collapsed

Açıklama

Denetlediğinizde kenar menüsünün ikonlara daralıp daralmadığı. onCollapsedChange ile kullanın.

Tür

boolean

defaultCollapsed

Açıklama

Denetlemediğinizde kenar menüsünün daralmış başlayıp başlamadığı.

Tür

boolean

Varsayılan

false

onCollapsedChange

Açıklama

Kullanıcı kenar menüsünü daraltıp genişlettiğinde çağrılır.

Tür

(collapsed: boolean) => void

label

Açıklama

Gezinme bölgesinin adı. Varsayılanı Provider'dan "Ana menü" ya da "Main menu".

Tür

string

mainId

Açıklama

main öğesinin kimliği; içeriğe geç bağlantısının hedefi.

Tür

string

Varsayılan

'main'

variant

Açıklama

docked içeriği kenar menüsünün yanına, sayfa zeminine koyar. inset 1024 px ve üstünde üst çubuğu ve içeriği kenar menüsünün zemini üstünde yükseltilmiş, yuvarlak köşeli bir panel olarak gösterir.

Tür

'inset' | 'docked'

Varsayılan

'docked'

material

Açıklama

'solid', cam bir Provider altında üst çubuğu ve inset kenar çubuğunu opak tutar. Menü çekmecesi her zaman opaktır.

Tür

'auto' | 'solid'

Varsayılan

'auto'

className

Açıklama

Yalnızca yerleşim için: konum. Çerçeve ekran yüksekliğini doldurur.

Tür

string

NavGroup

labelZorunlu

Açıklama

Grubun başlığı, örneğin "Yönetim". Daralmış kenar menüsünde yalnızca ekran okuyucu için kalır.

Tür

string

childrenZorunlu

Açıklama

NavItem parçaları.

Tür

ReactNode

collapsible

Açıklama

Kullanıcının grubu başlığıyla katlamasını sağlar. Daralmış kenar menüsünde grup açık kalır.

Tür

boolean

Varsayılan

false

defaultOpen

Açıklama

Katlanabilen grubun açık başlayıp başlamadığı.

Tür

boolean

Varsayılan

true

NavItem

hrefZorunlu

Açıklama

Hedef: göreli yol ya da https: adresi.

Tür

string

labelZorunlu

Açıklama

Sayfanın görünür adı. Daralmış kenar menüsünde ekran okuyucu için kalır ve tarayıcı ipucu olarak gösterilir.

Tür

string

icon

Açıklama

Kayıtlı ikon adı. Daralmış kenar menüsü kullanılabilir kalsın diye her öğeye ikon verin.

Tür

IconName

current

Açıklama

Öğeyi geçerli sayfa olarak işaretler: aria-current="page", seçili zemin ve kayan gösterge.

Tür

boolean

Varsayılan

false

badge

Açıklama

Etiketten sonra bir sayı, örneğin okunmamış öğeler. Bağlantının adına katılır.

Tür

number

render

Açıklama

Bağlantıyı yönlendiricinin bağlantı bileşeniyle çizer, örneğin <RouterLink to="/ayarlar" />.

Tür

ReactElement | ComponentRenderFn<HTMLProps, {}>

Veri öznitelikleri

• data-component="app-shell" ve daralmışken data-collapsed: kökte.
• data-part="sidebar", "header", "drawer", "skip-link", "collapse", "indicator": parçalarda.
• data-component="nav-group" ve data-component="nav-item": gezinme parçalarında.