Stato vuoto

Uno spazio bianco si legge come un bug. Uno stato vuoto dice quale spazio è vuoto, perché, e cosa fare dopo — ed è il caso che più facilmente si dimentica, perché durante lo sviluppo i dati ci sono sempre.

Stato vuoto di base

Ancora nessun articolo

Aggiungi un file Markdown in src/posts e comparirà qui.

empty({
  title: 'Ancora nessun articolo',
  description: 'Aggiungi un file Markdown in src/posts e comparirà qui.',
})

Con un’icona

L’icona è decorazione — è marcata aria-hidden, perché il titolo dice già cosa sta succedendo.

Qui non c’è niente

Questa cartella non contiene pagine.

empty({
  icon: icon('folder'),
  title: 'Qui non c’è niente',
  description: 'Questa cartella non contiene pagine.',
})

Con un’azione

I figli diventano la riga delle azioni.

Nessun risultato per “island”

Controlla l’ortografia, oppure sfoglia la documentazione.

Sfoglia la documentazione

empty({
  icon: icon('search'),
  title: 'Nessun risultato per “island”',
  description: 'Controlla l’ortografia, oppure sfoglia la documentazione.',
},
  button({ href: '/docs' }, 'Sfoglia la documentazione'),
  button({ variant: 'outline', color: 'neutral' }, 'Cancella la ricerca'),
)

In una scheda

Deploy

Ancora nessun deploy

Fai push su main e la prima build comparirà qui.

card(
  cardHeader({ title: 'Deploy' }),
  cardBody(
    empty({
      title: 'Ancora nessun deploy',
      description: 'Fai push su main e la prima build comparirà qui.',
    }, button({ size: 'sm' }, 'Collega un repository')),
  ),
)

Al posto di una tabella

Scambia la tabella con uno stato vuoto, invece di renderizzare un’intestazione senza righe sotto.

Storico delle build

Nessuna build registrata

Le esecuzioni compaiono qui una volta che il sito è stato pubblicato almeno una volta.

return (() => {
  const rows = []

  return card(
    cardHeader({ title: 'Storico delle build' }),
    rows.length
      ? table({ columns: [{ key: 'commit', header: 'Commit' }], rows })
      : cardBody(empty({
          title: 'Nessuna build registrata',
          description: 'Le esecuzioni compaiono qui una volta che il sito è stato pubblicato almeno una volta.',
        })),
  )
})()

Props

Prop	Tipo	Predefinito	Descrizione
`icon`	`Child`	—	Glifo decorativo sopra il titolo; nascosto agli screen reader.
`title`	`Child`	—	Che cosa è vuoto, in poche parole.
`description`	`Child`	—	Perché è vuoto, o cosa farci.

I figli vengono renderizzati come riga di azioni sotto la descrizione.