Pannello laterale

Un pannello laterale è un pannello a tutta altezza ancorato a un lato. Come modal(), è un popover: un pulsante con un popovertarget corrispondente lo apre, e il browser si occupa dello sfondo, del clic fuori e di Escape.

Su un sito statico il suo compito più comune è il menu di navigazione su un telefono.

Pannello di base

fragment(
  button({ popovertarget: 'drawer-basic' }, 'Apri il pannello'),
  drawer({ id: 'drawer-basic', title: 'Impostazioni' },
    stack({ gap: 'md' },
      toggle({ label: 'Ricerca Pagefind', checked: true }),
      toggle({ label: 'Ottimizzazione delle immagini', checked: true }),
      toggle({ label: 'Island server' }),
    ),
  ),
)

Lati

fragment(
  stack({ direction: 'row', gap: 'sm' },
    button({ variant: 'outline', color: 'neutral', popovertarget: 'drawer-start' }, 'Dall’inizio'),
    button({ variant: 'outline', color: 'neutral', popovertarget: 'drawer-end' }, 'Dalla fine'),
  ),
  drawer({ id: 'drawer-start', side: 'start', title: 'Inizio' },
    text({ variant: 'small', tone: 'muted' }, 'Ancorato al bordo iniziale — la sinistra in una lingua che si legge da sinistra a destra.'),
  ),
  drawer({ id: 'drawer-end', title: 'Fine' },
    text({ variant: 'small', tone: 'muted' }, 'Il predefinito: ancorato al bordo finale.'),
  ),
)

Larghezza

Qualunque lunghezza CSS. È limitata al 90% del viewport, così anche un pannello largo sta in un telefono.

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

Lo schema che vuole la maggior parte dei siti: un pulsante-menu nella barra, i link in un pannello.

sitelo

fragment(
  appBar({ brand: 'sitelo' },
    appBarSpacer(),
    appBarActions(
      iconButton({
        label: 'Apri la navigazione',
        variant: 'ghost',
        color: 'neutral',
        popovertarget: 'drawer-nav',
        icon: icon('menu'),
      }),
    ),
  ),
  drawer({ id: 'drawer-nav', title: 'Navigazione' },
    navLink({ href: '#docs', current: true }, 'Documentazione'),
    navLink({ href: '#ui' }, 'UI'),
    navLink({ href: '#examples' }, 'Esempi'),
    navLink({ href: '#about' }, 'Informazioni'),
    divider({ spacing: 'sm' }),
    button({ block: true }, 'Inizia'),
  ),
)

Un pannello di filtri

fragment(
  button({ variant: 'soft', color: 'neutral', popovertarget: 'drawer-filters' }, 'Filtri'),
  drawer({ id: 'drawer-filters', title: 'Filtri', width: '22rem' },
    stack({ gap: 'lg' },
      choiceGroup({
        legend: 'Tipo',
        name: 'drawer-type',
        value: 'guide',
        options: [
          { value: 'guide', label: 'Guide' },
          { value: 'example', label: 'Esempi' },
          { value: 'all', label: 'Tutto' },
        ],
      }),
      choiceGroup({
        legend: 'Tag',
        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' }, 'Annulla'),
        button('Applica'),
      ),
    ),
  ),
)

Scorrimento dello sfondo

La pagina dietro un pannello aperto non scorre — lo stesso blocco fatto di solo CSS che usa modal(), senza script e senza niente da inizializzare. Passa lockScroll: false per lasciare che lo sfondo scorra come al solito.

Props

Prop	Tipo	Predefinito	Descrizione
`id`	`string`	—	Obbligatorio. Ciò a cui punta il popovertarget di un innesco.
`title`	`Child`	—	Intestazione, e nome accessibile della finestra di dialogo.
`side`	`'start' \| 'end'`	`'end'`	A quale bordo è ancorato.
`width`	`string`	`'20rem'`	Larghezza del pannello, limitata a 90vw.
`closable`	`boolean`	`true`	Mostra la × nell’intestazione.
`closeLabel`	`string`	`'Close'`	Nome accessibile di quel pulsante.
`lockScroll`	`boolean`	`true`	Impedisce alla pagina dietro di scorrere mentre è aperto.