Odnośnik

Odnośnik to kotwica z bibliotecznym podkreśleniem i paletą. Eksportowany jest pod dwiema nazwami — link i textLink — bo link to także element <link> z javascript-to-html, a zaimportowanie obu pod jedną nazwą to błąd składni. Użyj textLink albo zaimportuj bibliotekę jako przestrzeń nazw.

Podstawowy odnośnik

Przeczytaj dokumentację, żeby zacząć.

text('Przeczytaj ', link({ href: '/docs' }, 'dokumentację'), ', żeby zacząć.')

Kolory

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

Dyskretny

Dyskretny odnośnik dziedziczy kolor otoczenia i pokazuje podkreślenie po najechaniu — dla list odnośników, gdzie podkreślenie w każdym wierszu byłoby szumem.

Routing Wczytywanie danych Zasoby i style

stack({ gap: 'xs' },
  link({ href: '/docs/routing', subtle: true }, 'Routing'),
  link({ href: '/docs/data', subtle: true }, 'Wczytywanie danych'),
  link({ href: '/docs/assets', subtle: true }, 'Zasoby i style'),
)

Odnośniki zewnętrzne

external dodaje target="_blank" i rel, który musi mu towarzyszyć. Napisz w treści odnośnika, że otwiera nową kartę, albo dodaj notkę ukrytą wizualnie — nowa karta bez uprzedzenia dezorientuje.

Biblioteka jest na npm (otwiera się w nowej karcie).

text(
  'Biblioteka jest na ',
  link({ href: 'https://www.npmjs.com/package/sitelo', external: true },
    'npm',
    visuallyHidden(' (otwiera się w nowej karcie)'),
  ),
  '.',
)

W akapicie

sitelo stoi na Vite, renderuje przez javascript-to-html i nie wysyła nic do przeglądarki, dopóki go o to nie poprosisz.

text({ variant: 'lead' },
  'sitelo stoi na ',
  link({ href: 'https://vite.dev', external: true }, 'Vite'),
  ', renderuje przez ',
  link({ href: 'https://ht.js.org', external: true }, 'javascript-to-html'),
  ' i nie wysyła nic do przeglądarki, dopóki go o to nie poprosisz.',
)

Kiedy zamiast tego użyć przycisku

Odnośnik nawiguje; przycisk wykonuje akcję. Jeśli rzecz zmienia stan na stronie, zamiast zabierać czytającego gdzieś indziej, powinna być button() — a jeśli nawiguje, ale ma wyglądać jak przycisk, daj button() atrybut href, co pod spodem wyrenderuje kotwicę.

Odnośnik, który nawiguje Odnośnik wyglądający jak przycisk

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  link({ href: '/docs' }, 'Odnośnik, który nawiguje'),
  button({ href: '/docs', variant: 'outline' }, 'Odnośnik wyglądający jak przycisk'),
  button({ variant: 'link' }, 'Przycisk wyglądający jak odnośnik'),
)

Propsy

Prop	Typ	Domyślnie	Opis
`href`	`string`	—	Dokąd prowadzi.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Z której palety czerpać.
`subtle`	`boolean`	`false`	Dziedzicz kolor otoczenia; podkreślenie tylko po najechaniu.
`external`	`boolean`	`false`	Dodaje target="_blank" i rel="noopener noreferrer".