Bilah aplikasi

Bilah aplikasi adalah sebuah <header> dengan satu baris di dalamnya. Bagian-bagiannya terpisah agar Anda bisa menatanya: appBarNav() untuk tautan, appBarSpacer() untuk mendorong apa pun setelahnya ke ujung terjauh, dan appBarActions() untuk tombol-tombol di ujungnya.

Bilah aplikasi dasar

sitelo

appBar({ brand: 'sitelo' },
  appBarSpacer(),
  appBarActions(
    button({ size: 'sm', variant: 'soft' }, 'Masuk'),
  ),
)

Dengan navigasi

navLink() adalah gaya tautan untuk sebuah bilah; current menandai halaman aktif dengan aria-current selain dengan warna.

sitelo

appBar({ brand: 'sitelo' },
  appBarNav(
    navLink({ href: '#docs', current: true }, 'Dokumentasi'),
    navLink({ href: '#ui' }, 'UI'),
    navLink({ href: '#examples' }, 'Contoh'),
  ),
  appBarSpacer(),
  appBarActions(
    button({ size: 'sm', variant: 'outline', color: 'neutral' }, 'GitHub'),
    button({ size: 'sm' }, 'Mulai'),
  ),
)

Merek dengan tanda

Merek menerima markup apa pun, dan menaut ke / kecuali href menyatakan lain.

Ssitelo

v2.6.3

appBar({
  href: '#home',
  brand: stack({ direction: 'row', gap: 'sm', inline: true, align: 'center' },
    avatar({ name: 'S', size: 'sm', square: true, color: 'primary' }),
    'sitelo',
  ),
},
  appBarSpacer(),
  appBarActions(chip({ size: 'sm', color: 'neutral' }, 'v2.6.3')),
)

Lengket dan buram

sticky menyematkan bilahnya di bagian atas wadah gulir; blur membuatnya tembus cahaya sehingga konten lewat di bawahnya. Keduanya ditampilkan di sini dalam kotak bergulir, bukan di halaman itu sendiri.

sitelo

lengket

Gulir saya — paragraf 1.

Gulir saya — paragraf 2.

Gulir saya — paragraf 3.

Gulir saya — paragraf 4.

Gulir saya — paragraf 5.

Gulir saya — paragraf 6.

div({ style: 'height: 12rem; overflow: auto; border: 1px solid var(--su-border); border-radius: 0.6rem' },
  appBar({ brand: 'sitelo', sticky: true, blur: true },
    appBarSpacer(),
    appBarActions(chip({ size: 'sm', color: 'primary' }, 'lengket')),
  ),
  container({ size: 'sm', style: 'padding-block: 1rem' },
    stack({ gap: 'md' },
      ...Array.from({ length: 6 }, (unused, index) =>
        text({ variant: 'small', tone: 'muted' }, 'Gulir saya — paragraf ' + (index + 1) + '.'),
      ),
    ),
  ),
)

Dengan laci di layar kecil

Pola yang lazim: tautan di bilah pada desktop, sebuah tombol yang membuka drawer() di ponsel. Lacinya adalah popover, jadi tombolnya tidak butuh skrip.

sitelo

fragment(
  appBar({ brand: 'sitelo' },
    appBarSpacer(),
    appBarActions(
      themeToggle(),
      iconButton({
        label: 'Buka navigasi',
        variant: 'ghost',
        color: 'neutral',
        popovertarget: 'app-bar-drawer',
        icon: icon('menu'),
      }),
    ),
  ),
  drawer({ id: 'app-bar-drawer', title: 'Navigasi' },
    navLink({ href: '#docs' }, 'Dokumentasi'),
    navLink({ href: '#ui' }, 'UI'),
    navLink({ href: '#examples' }, 'Contoh'),
  ),
)

Props

appBar():

Prop	Tipe	Bawaan	Deskripsi
`brand`	`Child`	—	Isi tautan merek di bagian awalnya.
`href`	`string`	`'/'`	Ke mana mereknya menaut.
`sticky`	`boolean`	`false`	Menyematkan bilahnya di atas saat menggulir.
`blur`	`boolean`	`false`	Latar tembus cahaya dengan efek buram di belakangnya.
`as`	`string`	`'header'`	Elemen yang dirender.

Bagian-bagiannya:

Bagian	Props	Bawaan	Deskripsi
`appBarNav`		—	Elemen nav yang memuat tautannya.
`appBarSpacer`		—	Celah lentur; semua setelahnya pergi ke ujung terjauh.
`appBarActions`		—	Kelompok tombol di bagian akhir.
`navLink`	`href, current, color`	—	Tautan bergaya untuk bilahnya; current menandai halaman aktif.