Link 链接

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

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

<script setup lang="ts">
  import { Link, Text } from '@hina-ui/vue'
</script>

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

vue

用法

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

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

回到用法一节

<script setup lang="ts">
  import { Link } from '@hina-ui/vue'
</script>

<template>
  <Link href="#usage">回到用法一节</Link>
</template>

vue

示例

色调

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

强调色链接中性色链接

<script setup lang="ts">
  import { Inline, Link } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center" class="gap-6">
    <Link href="#tones">强调色链接</Link>
    <Link href="#tones" tone="neutral">中性色链接</Link>
  </Inline>
</template>

vue

下划线

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

不带下划线带下划线

<script setup lang="ts">
  import { Inline, Link } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center" class="gap-6">
    <Link href="#underline">不带下划线</Link>
    <Link href="#underline" underline>带下划线</Link>
  </Inline>
</template>

vue

路由链接

as 接受组件，可以渲染为 NuxtLink 或者其他路由组件，此时按该组件的属性书写，例如 to。

跳转到 Button 页

<script setup lang="ts">
  import { Link } from '@hina-ui/vue'
  import { NuxtLink } from '#components'

  const localePath = useLocalePath()
</script>

<template>
  <Link :as="NuxtLink" :to="localePath('/components/button')" underline>跳转到 Button 页</Link>
</template>

vue

正文中的链接

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

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

<script setup lang="ts">
  import { Prose } from '@hina-ui/vue'
</script>

<template>
  <Prose class="max-w-lg">
    <p>
      正文中的
      <a href="#prose">链接</a>
      不需要单独引入组件，默认带下划线。
    </p>
  </Prose>
</template>

vue

API

Props

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

Slots

插槽	说明
`default`	链接文字

用法

示例

色调

下划线

路由链接

正文中的链接

无障碍

API

Props

Slots