Link

Ein Link ist ein Anker mit der Unterstreichung und der Palette dieser Bibliothek. Er wird unter zwei Namen exportiert — link und textLink —, weil link auch das <link>-Element von javascript-to-html ist und beides unter einem Namen zu importieren ein Syntaxfehler wäre. Nimm textLink, oder importiere die Bibliothek als Namensraum.

Einfacher Link

Lies die Dokumentation, um loszulegen.

text('Lies die ', link({ href: '/de/docs' }, 'Dokumentation'), ', um loszulegen.')

Farben

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'),
)

Dezent

Ein dezenter Link erbt die umgebende Farbe und zeigt seine Unterstreichung erst beim Überfahren — für Linklisten, in denen eine Unterstreichung pro Zeile nur Rauschen wäre.

Routing Daten laden Assets und Styling

stack({ gap: 'xs' },
  link({ href: '/de/docs/routing', subtle: true }, 'Routing'),
  link({ href: '/de/docs/data', subtle: true }, 'Daten laden'),
  link({ href: '/de/docs/assets', subtle: true }, 'Assets und Styling'),
)

Externe Links

external ergänzt target="_blank" und das rel, das dazugehören muss. Sage im Linktext, dass ein neuer Tab aufgeht, oder ergänze einen visuell versteckten Hinweis — ein neuer Tab ohne Warnung verwirrt.

Die Bibliothek liegt auf npm (öffnet in einem neuen Tab).

text(
  'Die Bibliothek liegt auf ',
  link({ href: 'https://www.npmjs.com/package/sitelo', external: true },
    'npm',
    visuallyHidden(' (öffnet in einem neuen Tab)'),
  ),
  '.',
)

In einem Absatz

sitelo baut auf Vite auf, rendert mit javascript-to-html und schickt nichts an den Browser, solange du nicht darum bittest.

text({ variant: 'lead' },
  'sitelo baut auf ',
  link({ href: 'https://vite.dev', external: true }, 'Vite'),
  ' auf, rendert mit ',
  link({ href: 'https://ht.js.org', external: true }, 'javascript-to-html'),
  ' und schickt nichts an den Browser, solange du nicht darum bittest.',
)

Wann stattdessen ein Button

Ein Link navigiert; ein Button führt eine Aktion aus. Wenn die Sache den Zustand auf der Seite ändert, statt die Leserin woandershin zu bringen, gehört dorthin ein button() — und wenn sie navigiert, aber wie ein Button aussehen soll, gib button() ein href, das darunter einen Anker rendert.

Ein Link, der navigiert Ein Link, der wie ein Button aussieht

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  link({ href: '/de/docs' }, 'Ein Link, der navigiert'),
  button({ href: '/de/docs', variant: 'outline' }, 'Ein Link, der wie ein Button aussieht'),
  button({ variant: 'link' }, 'Ein Button, der wie ein Link aussieht'),
)

Props

Prop	Typ	Standard	Beschreibung
`href`	`string`	—	Wohin er führt.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Aus welcher Palette geschöpft wird.
`subtle`	`boolean`	`false`	Erbt die umgebende Farbe; Unterstreichung nur beim Überfahren.
`external`	`boolean`	`false`	Ergänzt target="_blank" und rel="noopener noreferrer".