Link 链接

文字链接，可渲染为原生链接或者路由组件。

组件的完整清单见仓库首页，样式变量的说明在安装指南里。

import { Link, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Text className="max-w-lg">
      组件的完整清单见
      <Link href="https://github.com/Hikarinagi/ui" target="_blank" rel="noreferrer" underline>
        仓库首页
      </Link>
      ，样式变量的说明在安装指南里。
    </Text>
  )
}

tsx

用法

import { Link } from '@hina-ui/react'

组件默认渲染为原生的 a，属性原样传递，因此 href、target、rel 都照常书写。默认使用强调色，不带下划线。

回到用法一节

import { Link } from '@hina-ui/react'

export default function Demo() {
  return <Link href="#usage">回到用法一节</Link>
}

tsx

示例

色调

accent 用于正文与导航中的普通链接，neutral 用于本身已在强调区域内、不需要再次着色的链接，例如面包屑。

强调色链接中性色链接

import { Inline, Link } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline align="center" className="gap-6">
      <Link href="#tones">强调色链接</Link>
      <Link href="#tones" tone="neutral">
        中性色链接
      </Link>
    </Inline>
  )
}

tsx

下划线

设置 underline 显示下划线，静止时线条较淡，悬停时加深。正文中密集出现的链接建议开启，便于与普通文字区分。

不带下划线带下划线

import { Inline, Link } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline align="center" className="gap-6">
      <Link href="#underline">不带下划线</Link>
      <Link href="#underline" underline>
        带下划线
      </Link>
    </Inline>
  )
}

tsx

路由链接

as 接受组件，可以渲染为 next/link 或者其他路由组件，此时按该组件的属性书写，例如 href。也可以设置 asChild，把路由链接作为唯一的子元素。

跳转到 Button 页

'use client'

import NextLink from 'next/link'
import { Link } from '@hina-ui/react'

export default function Demo() {
  return (
    <Link as={NextLink} href="/components/button" underline>
      跳转到 Button 页
    </Link>
  )
}

tsx

正文中的链接

Prose 会为其中的原生 a 应用强调色与下划线。渲染 Markdown 或者富文本时不需要替换标签。

正文中的链接不需要单独引入组件，默认带下划线。

import { Prose } from '@hina-ui/react'

export default function Demo() {
  return (
    <Prose className="max-w-lg">
      <p>
        正文中的
        <a href="#prose">链接</a>
        不需要单独引入组件，默认带下划线。
      </p>
    </Prose>
  )
}

tsx

API

Props

属性	类型	默认值	说明
`tone`	`'accent' \| 'neutral'`	`'accent'`	语义色调
`underline`	`boolean`	`false`	是否显示下划线
`as`	`string \| Component`	`'a'`	渲染的元素或组件
`asChild`	`boolean`	`false`	不渲染自身，合并至唯一的子元素
`className`	`string`	—	追加至根元素的类名

内容属性

属性	说明
`children`	链接文字

用法

示例

色调

下划线

路由链接

正文中的链接

无障碍

API

Props

内容属性