Tautan

Tautan adalah jangkar dengan perlakuan garis bawah dan palet milik pustaka ini. Ia diekspor dengan dua nama — link dan textLink — karena link juga merupakan elemen <link> milik javascript-to-html, dan mengimpor keduanya dengan satu nama adalah galat sintaks. Pakai textLink, atau impor pustakanya sebagai namespace.

Tautan dasar

Baca dokumentasinya untuk memulai.

text('Baca ', link({ href: '/docs' }, 'dokumentasinya'), ' untuk memulai.')

Warna

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

Halus

Tautan halus mewarisi warna di sekitarnya dan menampilkan garis bawahnya saat disorot — untuk daftar tautan yang garis bawah di setiap barisnya akan menjadi kebisingan.

Perutean Memuat data Aset dan gaya

stack({ gap: 'xs' },
  link({ href: '/docs/routing', subtle: true }, 'Perutean'),
  link({ href: '/docs/data', subtle: true }, 'Memuat data'),
  link({ href: '/docs/assets', subtle: true }, 'Aset dan gaya'),
)

Tautan eksternal

external menambahkan target="_blank" beserta rel yang harus menyertainya. Katakan di teks tautannya bahwa ia membuka tab baru, atau tambahkan catatan yang tersembunyi secara visual — tab baru tanpa peringatan membuat orang kehilangan arah.

Pustakanya ada di npm (terbuka di tab baru).

text(
  'Pustakanya ada di ',
  link({ href: 'https://www.npmjs.com/package/sitelo', external: true },
    'npm',
    visuallyHidden(' (terbuka di tab baru)'),
  ),
  '.',
)

Di dalam paragraf

sitelo dibangun di atas Vite, merender dengan javascript-to-html, dan tidak mengirim apa pun ke peramban kecuali Anda memintanya.

text({ variant: 'lead' },
  'sitelo dibangun di atas ',
  link({ href: 'https://vite.dev', external: true }, 'Vite'),
  ', merender dengan ',
  link({ href: 'https://ht.js.org', external: true }, 'javascript-to-html'),
  ', dan tidak mengirim apa pun ke peramban kecuali Anda memintanya.',
)

Kapan memakai tombol sebagai gantinya

Tautan menavigasi; tombol melakukan tindakan. Jika sesuatu mengubah keadaan di halaman alih-alih membawa pembacanya ke tempat lain, ia seharusnya berupa button() — dan jika ia menavigasi tetapi harus tampak seperti tombol, beri button() sebuah href, yang merender jangkar di baliknya.

Tautan yang menavigasi Tautan yang tampak seperti tombol

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  link({ href: '/docs' }, 'Tautan yang menavigasi'),
  button({ href: '/docs', variant: 'outline' }, 'Tautan yang tampak seperti tombol'),
  button({ variant: 'link' }, 'Tombol yang tampak seperti tautan'),
)

Props

Prop	Tipe	Bawaan	Deskripsi
`href`	`string`	—	Ke mana ia menuju.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Dari palet mana ia menimba.
`subtle`	`boolean`	`false`	Mewarisi warna sekitarnya; garis bawah hanya saat disorot.
`external`	`boolean`	`false`	Menambahkan target="_blank" dan rel="noopener noreferrer".