Moleküller
Navigation
Sayfanın üstündeki çubuklar. AppHeader uygulama sayfalarının çubuğudur: başta bir PageHeader, ortada arama, sonda kontroller ve altında sekmeler. PublicHeader herkese açık sayfaların logolu çubuğudur.
Playground
Figma varyantı
App Header
Type=Default
Tab=False
_Left Elements
🎛 Type=Default
Show Back Button=true
Show Breadcrumb=false
Show Info=true
Show Subtitle=false
Show Actions=true
_Right Elements
🎛 Type=Full ControlParçalar
- PageHeader (_Left Elements): geri butonu, breadcrumb, info ve alt metinli sayfa başlığı, ikon eylemler ve bir chip. Large Title daha büyük bir başlığın üstüne bir satır ekler; Inline Edit başlığı kaydet ve iptal butonlu bir input’a çevirir.
- AppHeader (App Header): üç eşit sütun (start, center, end) ve Tabs için isteğe bağlı bir alt satır. Sonda butonlar, Switch, Selectbox ya da Segment durur (_Right Elements).
- PublicHeader (Public Page Navigation): herkese açık sayfaların 64px çubuğu: yalnızca logo, logo ve başlık ya da başlık, ortada logo ve bir giriş butonu veya avatar.
Tokenlar
| Part | Token |
|---|---|
| PageHeader padding / gap | --layout-tiny --space-container / --space-form-gutter |
| Page title / large title | --text-ui-page-title / --text-content-h3-bold, --color-foreground-level-1 |
| Subtext / eyebrow | --text-ui-text-small-regular, --color-foreground-medium-emphasis |
| AppHeader | --color-surface-level-1, --layout-micro block padding, --color-surface-level-3 line |
| PublicHeader | 64px, --space-container padding, --color-surface-level-1, --color-surface-level-3 line |
Figma notları
- Geri butonu Default’ta tertiary Small ikon buton, Large Title ve Inline Edit’te primary Medium; kod bunu izler.
- Large Title metinleri eski “Paragraph Small/Regular” ve “H3/Bold” stillerini kullanıyor; kod ui/text small/regular ve content/h3/bold kullanır.
- Inline Edit, Input setinde olmayan bir Floating Label Input kullanıyor; kod Input Medium kullanır.
- Large Title chip’i kullanımdan kalkmış Chips; badge olarak bir Chip ya da Badge verin.
- Slot tipleri (sol, sağ, Full Slot) kendi içeriğinizle start, center, end ve bottom özellikleridir.
- App Header Type=Default’ta çizgi yok; Full Slot’ta bir Border Bottom dikdörtgeni var. Kod çizgiyi border ile isteğe bağlı yapar.
Figma’dan koda
| Figma | React |
|---|---|
| _Left Elements 🎛 Type = Default / Large Title | <PageHeader variant='default' | 'large' /> |
| _Left Elements 🎛 Type = Inline Edit | <PageHeader edit={…} /> |
| Show Back Button / Breadcrumb / Info / Subtitle / Actions | onBack / breadcrumb / info / subtitle / actions |
| _Right Elements 🎛 Type = Full Control | end={<Button />, <Switch />, <Selectbox />, <Segment />} |
| App Header Type = Default / Full Slot | <AppHeader start center end bottom /> |
| App Header Tab | bottom={<Tabs />} |
| Public Page Navigation = Public Logo | <PublicHeader /> |
| Public Page Navigation = Public Page Title | <PublicHeader title logoPosition="start" /> |
| Public Page Navigation = Login / Logged | <PublicHeader title end={<Button /> | <Avatar />} /> |