Bağlantı

Bağlantı, kitaplığın altı çizgi davranışını ve paletini taşıyan bir çapadır. İki adla dışa aktarılır — link ve textLink — çünkü link aynı zamanda javascript-to-html’in <link> öğesidir ve ikisini tek bir adla içe aktarmak bir sözdizimi hatasıdır. textLink kullanın ya da kitaplığı bir ad alanı olarak içe aktarın.

Temel bağlantı

Başlamak için belgeleri okuyun.

text('Başlamak için ', link({ href: '/docs' }, 'belgeleri'), ' okuyun.')

Renkler

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

Sessiz

Sessiz bir bağlantı çevresindeki rengi devralır ve altı çizgisini üzerine gelindiğinde gösterir — her satırda bir alt çizginin gürültü olacağı bağlantı listeleri için.

Yönlendirme Veri yükleme Varlıklar ve stil

stack({ gap: 'xs' },
  link({ href: '/docs/routing', subtle: true }, 'Yönlendirme'),
  link({ href: '/docs/data', subtle: true }, 'Veri yükleme'),
  link({ href: '/docs/assets', subtle: true }, 'Varlıklar ve stil'),
)

Dış bağlantılar

external, target="_blank" ve yanında gelmesi gereken rel değerini ekler. Yeni bir sekme açtığını bağlantı metninde söyleyin ya da görsel olarak gizli bir not ekleyin — uyarısız açılan yeni bir sekme şaşırtıcıdır.

Kitaplık npm (yeni sekmede açılır) üzerinde.

text(
  'Kitaplık ',
  link({ href: 'https://www.npmjs.com/package/sitelo', external: true },
    'npm',
    visuallyHidden(' (yeni sekmede açılır)'),
  ),
  ' üzerinde.',
)

Bir paragrafta

sitelo Vite üzerine kuruludur, javascript-to-html ile işler ve siz istemedikçe tarayıcıya hiçbir şey göndermez.

text({ variant: 'lead' },
  'sitelo ',
  link({ href: 'https://vite.dev', external: true }, 'Vite'),
  ' üzerine kuruludur, ',
  link({ href: 'https://ht.js.org', external: true }, 'javascript-to-html'),
  ' ile işler ve siz istemedikçe tarayıcıya hiçbir şey göndermez.',
)

Ne zaman bunun yerine düğme kullanmalı

Bağlantı gezinir; düğme bir eylem gerçekleştirir. Nesne okuru bir yere götürmek yerine sayfadaki durumu değiştiriyorsa bir button() olmalıdır — ve geziniyor ama düğme gibi görünmeliyse button() işlevine bir href verin; altında bir çapa işler.

Gezinen bir bağlantı Düğme gibi görünen bir bağlantı

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  link({ href: '/docs' }, 'Gezinen bir bağlantı'),
  button({ href: '/docs', variant: 'outline' }, 'Düğme gibi görünen bir bağlantı'),
  button({ variant: 'link' }, 'Bağlantı gibi görünen bir düğme'),
)

Proplar

Prop	Tür	Varsayılan	Açıklama
`href`	`string`	—	Nereye gittiği.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Hangi paletten besleneceği.
`subtle`	`boolean`	`false`	Çevresindeki rengi devralır; alt çizgi yalnızca üzerine gelindiğinde.
`external`	`boolean`	`false`	target="_blank" ve rel="noopener noreferrer" ekler.