Ссылка

Ссылка — это якорь с подчёркиванием и палитрой этой библиотеки. Она экспортируется под двумя именами — link и textLink, — потому что link это ещё и элемент <link> из javascript-to-html, а импортировать оба под одним именем — синтаксическая ошибка. Берите textLink или импортируйте библиотеку как пространство имён.

Простая ссылка

Чтобы начать, прочитайте документацию.

text('Чтобы начать, прочитайте ', link({ href: '/ru/docs' }, 'документацию'), '.')

Цвета

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

Приглушённая

Приглушённая ссылка наследует окружающий цвет и показывает подчёркивание только при наведении — для списков ссылок, где подчёркивание в каждой строке было бы шумом.

Маршрутизация Загрузка данных Ресурсы и стили

stack({ gap: 'xs' },
  link({ href: '/ru/docs/routing', subtle: true }, 'Маршрутизация'),
  link({ href: '/ru/docs/data', subtle: true }, 'Загрузка данных'),
  link({ href: '/ru/docs/assets', subtle: true }, 'Ресурсы и стили'),
)

Внешние ссылки

external добавляет target="_blank" и тот rel, который обязан идти вместе с ним. Скажите в тексте ссылки, что она откроет новую вкладку, или добавьте визуально скрытую пометку: новая вкладка без предупреждения дезориентирует.

Библиотека лежит на npm (откроется в новой вкладке).

text(
  'Библиотека лежит на ',
  link({ href: 'https://www.npmjs.com/package/sitelo', external: true },
    'npm',
    visuallyHidden(' (откроется в новой вкладке)'),
  ),
  '.',
)

В абзаце

sitelo построен на Vite, рендерит через javascript-to-html и не отправляет в браузер ничего, пока вы сами об этом не попросите.

text({ variant: 'lead' },
  'sitelo построен на ',
  link({ href: 'https://vite.dev', external: true }, 'Vite'),
  ', рендерит через ',
  link({ href: 'https://ht.js.org', external: true }, 'javascript-to-html'),
  ' и не отправляет в браузер ничего, пока вы сами об этом не попросите.',
)

Когда лучше кнопка

Ссылка ведёт куда-то, кнопка выполняет действие. Если элемент меняет состояние на странице, а не уводит читателя, это должна быть button(); а если он всё-таки ведёт, но должен выглядеть кнопкой, дайте button() проп href — под капотом отрисуется якорь.

Ссылка, которая ведёт Ссылка, похожая на кнопку

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  link({ href: '/ru/docs' }, 'Ссылка, которая ведёт'),
  button({ href: '/ru/docs', variant: 'outline' }, 'Ссылка, похожая на кнопку'),
  button({ variant: 'link' }, 'Кнопка, похожая на ссылку'),
)

Пропсы

Проп	Тип	По умолчанию	Описание
`href`	`string`	—	Куда ведёт.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Из какой палитры брать цвета.
`subtle`	`boolean`	`false`	Наследует окружающий цвет; подчёркивание только при наведении.
`external`	`boolean`	`false`	Добавляет target="_blank" и rel="noopener noreferrer".