Collegamento

Un collegamento è un’ancora con il trattamento della sottolineatura e la palette della libreria. È esportato con due nomi — link e textLink — perché link è anche l’elemento <link> di javascript-to-html, e importarli entrambi con lo stesso nome è un errore di sintassi. Usa textLink, oppure importa la libreria come namespace.

Collegamento di base

Leggi la documentazione per iniziare.

text('Leggi la ', link({ href: '/docs' }, 'documentazione'), ' per iniziare.')

Colori

Primary Neutral Success Warning Danger

stack({ direction: 'row', gap: 'lg', wrap: true },
  link({ href: '#', color: 'primary' }, 'Primary'),
  link({ href: '#', color: 'neutral' }, 'Neutral'),
  link({ href: '#', color: 'success' }, 'Success'),
  link({ href: '#', color: 'warning' }, 'Warning'),
  link({ href: '#', color: 'danger' }, 'Danger'),
)

Discreto

Un collegamento discreto eredita il colore circostante e mostra la sottolineatura al passaggio del mouse — per elenchi di link in cui una sottolineatura su ogni riga sarebbe rumore.

Routing Caricamento dati Risorse e stili

stack({ gap: 'xs' },
  link({ href: '/docs/routing', subtle: true }, 'Routing'),
  link({ href: '/docs/data', subtle: true }, 'Caricamento dati'),
  link({ href: '/docs/assets', subtle: true }, 'Risorse e stili'),
)

Link esterni

external aggiunge target="_blank" e il rel che deve accompagnarlo. Di’ nel testo del link che apre una nuova scheda, oppure aggiungi una nota nascosta visivamente — una nuova scheda senza avviso disorienta.

La libreria è su npm (si apre in una nuova scheda).

text(
  'La libreria è su ',
  link({ href: 'https://www.npmjs.com/package/sitelo', external: true },
    'npm',
    visuallyHidden(' (si apre in una nuova scheda)'),
  ),
  '.',
)

In un paragrafo

sitelo è costruito su Vite, renderizza con javascript-to-html, e non spedisce nulla al browser se non glielo chiedi.

text({ variant: 'lead' },
  'sitelo è costruito su ',
  link({ href: 'https://vite.dev', external: true }, 'Vite'),
  ', renderizza con ',
  link({ href: 'https://ht.js.org', external: true }, 'javascript-to-html'),
  ', e non spedisce nulla al browser se non glielo chiedi.',
)

Quando usare invece un pulsante

Un link naviga; un pulsante compie un’azione. Se la cosa cambia stato nella pagina invece di portare chi legge da qualche parte, dev’essere un button() — e se naviga ma deve sembrare un pulsante, dai a button() un href, che sotto renderizza un’ancora.

Un link che naviga Un link che sembra un pulsante

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  link({ href: '/docs' }, 'Un link che naviga'),
  button({ href: '/docs', variant: 'outline' }, 'Un link che sembra un pulsante'),
  button({ variant: 'link' }, 'Un pulsante che sembra un link'),
)

Props

Prop	Tipo	Predefinito	Descrizione
`href`	`string`	—	Dove porta.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Da quale palette attingere.
`subtle`	`boolean`	`false`	Eredita il colore circostante; sottolineatura solo al passaggio del mouse.
`external`	`boolean`	`false`	Aggiunge target="_blank" e rel="noopener noreferrer".