Çekmece

Çekmece, bir yana sabitlenmiş tam yükseklikte bir paneldir. modal() gibi o da bir popover öğesidir: eşleşen bir popovertarget taşıyan bir düğme onu açar ve arka planı, dışarı tıklamayı ve Escape’i tarayıcı halleder.

Statik bir sitedeki en yaygın işi, telefondaki gezinme menüsüdür.

Temel çekmece

fragment(
  button({ popovertarget: 'drawer-basic' }, 'Çekmeceyi aç'),
  drawer({ id: 'drawer-basic', title: 'Ayarlar' },
    stack({ gap: 'md' },
      toggle({ label: 'Pagefind araması', checked: true }),
      toggle({ label: 'Görsel optimizasyonu', checked: true }),
      toggle({ label: 'Sunucu adaları' }),
    ),
  ),
)

Yanlar

fragment(
  stack({ direction: 'row', gap: 'sm' },
    button({ variant: 'outline', color: 'neutral', popovertarget: 'drawer-start' }, 'Baştan'),
    button({ variant: 'outline', color: 'neutral', popovertarget: 'drawer-end' }, 'Sondan'),
  ),
  drawer({ id: 'drawer-start', side: 'start', title: 'Baş' },
    text({ variant: 'small', tone: 'muted' }, 'Öncü kenara sabitlenmiş — soldan sağa bir dilde sol taraf.'),
  ),
  drawer({ id: 'drawer-end', title: 'Son' },
    text({ variant: 'small', tone: 'muted' }, 'Varsayılan: sondaki kenara sabitlenmiş.'),
  ),
)

Genişlik

Herhangi bir CSS uzunluğu. Görünümün %90’ıyla sınırlıdır, bu yüzden geniş bir çekmece de bir telefona sığar.

fragment(
  stack({ direction: 'row', gap: 'sm' },
    button({ variant: 'outline', color: 'neutral', popovertarget: 'drawer-narrow' }, 'Dar'),
    button({ variant: 'outline', color: 'neutral', popovertarget: 'drawer-wide' }, 'Geniş'),
  ),
  drawer({ id: 'drawer-narrow', width: '14rem', title: 'Dar' },
    text({ variant: 'small', tone: 'muted' }, 'width: 14rem'),
  ),
  drawer({ id: 'drawer-wide', width: '34rem', title: 'Geniş' },
    text({ variant: 'small', tone: 'muted' }, 'width: 34rem'),
  ),
)

Gezinme menüsü olarak

Çoğu sitenin istediği kalıp: çubukta bir menü düğmesi, çekmecede bağlantılar.

sitelo

fragment(
  appBar({ brand: 'sitelo' },
    appBarSpacer(),
    appBarActions(
      iconButton({
        label: 'Gezinmeyi aç',
        variant: 'ghost',
        color: 'neutral',
        popovertarget: 'drawer-nav',
        icon: icon('menu'),
      }),
    ),
  ),
  drawer({ id: 'drawer-nav', title: 'Gezinme' },
    navLink({ href: '#docs', current: true }, 'Belgeler'),
    navLink({ href: '#ui' }, 'UI'),
    navLink({ href: '#examples' }, 'Örnekler'),
    navLink({ href: '#about' }, 'Hakkında'),
    divider({ spacing: 'sm' }),
    button({ block: true }, 'Başlayın'),
  ),
)

Bir süzgeç paneli

fragment(
  button({ variant: 'soft', color: 'neutral', popovertarget: 'drawer-filters' }, 'Süzgeçler'),
  drawer({ id: 'drawer-filters', title: 'Süzgeçler', width: '22rem' },
    stack({ gap: 'lg' },
      choiceGroup({
        legend: 'Tür',
        name: 'drawer-type',
        value: 'guide',
        options: [
          { value: 'guide', label: 'Rehberler' },
          { value: 'example', label: 'Örnekler' },
          { value: 'all', label: 'Her şey' },
        ],
      }),
      choiceGroup({
        legend: 'Künyeler',
        name: 'drawer-tags',
        type: 'checkbox',
        value: ['routing'],
        options: ['routing', 'data', 'islands'],
      }),
      stack({ direction: 'row', gap: 'sm' },
        button({ variant: 'ghost', color: 'neutral', popovertarget: 'drawer-filters', popovertargetaction: 'hide' }, 'Vazgeç'),
        button('Uygula'),
      ),
    ),
  ),
)

Arka planın kaydırılması

Açık bir çekmecenin ardındaki sayfa kaydırılmaz — modal() işlevinin kullandığı, betiksiz ve başlatılacak hiçbir şeyi olmayan aynı yalnızca-CSS kilidi. Arka planın her zamanki gibi kaydırılmasına izin vermek için lockScroll: false geçirin.

Proplar

Prop	Tür	Varsayılan	Açıklama
`id`	`string`	—	Zorunlu. Bir tetikleyicinin popovertarget değerinin gösterdiği şey.
`title`	`Child`	—	Başlık ve iletişim kutusunun erişilebilir adı.
`side`	`'start' \| 'end'`	`'end'`	Hangi kenara sabitlendiği.
`width`	`string`	`'20rem'`	Panel genişliği, 90vw ile sınırlı.
`closable`	`boolean`	`true`	Başlıkta × gösterir.
`closeLabel`	`string`	`'Close'`	O düğme için erişilebilir ad.
`lockScroll`	`boolean`	`true`	Açıkken ardındaki sayfanın kaydırılmasını durdurur.