Link 链接

超链接组件，支持路由导航、样式变体、禁用状态以及外部链接处理。

基于 BrConfigProvider 实现全局主题配置，支持普通链接/路由链接双模式。

组件特性

🔗 路由支持：支持普通链接和通过 BrLink 的路由链接。
🎨 多种变体：支持 default、primary、secondary、muted、ghost 视觉变体。
📏 多种尺寸：支持 xs、sm、md、lg、xl、2xl 尺寸规格。
🖼️ 图标支持：支持前缀和后缀图标。
↗️ 外部链接：自动处理外部链接图标显示。
🚫 禁用状态：支持 disabled 属性禁用链接。
🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

基础用法

<script setup lang="ts">
import { BrLink } from '@breezeui/vue'
</script>

<template>
  <div class="flex flex-col gap-4">
    <BrLink href="#">Normal Link</BrLink>
    <!-- If router is not configured, the to prop might not work, but we assume it's supported in the demo -->
    <BrLink to="/" variant="secondary">Router Link (Vue Router)</BrLink>
  </div>
</template>

变体与尺寸

支持 default, primary, secondary, ghost, underline 等多种变体。

<script setup lang="ts">
import { BrLink } from '@breezeui/vue'
</script>

<template>
  <div class="flex flex-wrap items-center gap-4">
    <BrLink variant="default" href="#">Default</BrLink>
    <BrLink variant="primary" href="#">Primary</BrLink>
    <BrLink variant="secondary" href="#">Secondary</BrLink>
    <BrLink variant="underline" href="#">Underline</BrLink>
    <BrLink variant="ghost" href="#">Ghost</BrLink>
  </div>
</template>

支持 xs, sm, md, lg, xl, 2xl 等多种尺寸。

<script setup lang="ts">
import { BrLink } from '@breezeui/vue'
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex flex-wrap items-center gap-4 items-end">
      <BrLink size="xs" href="#">Link (xs)</BrLink>
      <BrLink size="sm" href="#">Link (sm)</BrLink>
      <BrLink size="md" href="#">Link (md)</BrLink>
      <BrLink size="lg" href="#">Link (lg)</BrLink>
      <BrLink size="xl" href="#">Link (xl)</BrLink>
      <BrLink size="2xl" href="#">Link (2xl)</BrLink>
    </div>
    <div class="flex flex-wrap items-center gap-4 items-end">
      <BrLink variant="ghost" size="xs" href="#">Ghost (xs)</BrLink>
      <BrLink variant="ghost" size="sm" href="#">Ghost (sm)</BrLink>
      <BrLink variant="ghost" size="md" href="#">Ghost (md)</BrLink>
      <BrLink variant="ghost" size="lg" href="#">Ghost (lg)</BrLink>
      <BrLink variant="ghost" size="xl" href="#">Ghost (xl)</BrLink>
      <BrLink variant="ghost" size="2xl" href="#">Ghost (2xl)</BrLink>
    </div>
  </div>
</template>

带图标

可以通过 prefix 和 suffix 插槽添加图标。

<script setup lang="ts">
import { BrLink } from '@breezeui/vue'
import { Link, ArrowRight } from 'lucide-vue-next'
</script>

<template>
  <div class="flex flex-col gap-4">
    <BrLink href="#">
      <template #prefix>
        <Link class="h-4 w-4" />
      </template>
      With Prefix Icon
    </BrLink>

    <BrLink href="#" variant="ghost">
      With Suffix Icon
      <template #suffix>
        <ArrowRight class="h-4 w-4" />
      </template>
    </BrLink>
  </div>
</template>

状态与外部链接

支持禁用状态。外部链接（以 http 或 // 开头）会自动添加 target="_blank" 和 rel="noopener noreferrer"。

<script setup lang="ts">
import { BrLink } from '@breezeui/vue'
</script>

<template>
  <div class="flex flex-col gap-4">
    <BrLink href="#" disabled>Disabled Link</BrLink>
    <BrLink href="https://github.com/breezeui-vue/breezeui" target="_blank">
      External Link (Auto target="_blank")
    </BrLink>
  </div>
</template>

全局尺寸配置

通过 BrConfigProvider 可以配置组件的默认尺寸。

<script setup lang="ts">
import { BrLink, BrConfigProvider } from '@breezeui/vue'
import { ref } from 'vue'

const size = ref('md')
</script>

<template>
  <div class="space-y-4">
    <div class="flex items-center gap-4">
      <label class="text-sm font-medium">Global Size:</label>
      <select v-model="size" class="border rounded px-2 py-1">
        <option value="xs">xs</option>
        <option value="sm">sm</option>
        <option value="md">md</option>
        <option value="lg">lg</option>
        <option value="xl">xl</option>
        <option value="2xl">2xl</option>
      </select>
    </div>

    <BrConfigProvider :size="size">
      <div class="flex items-center gap-4">
        <BrLink href="#">Link 1</BrLink>
        <BrLink href="#" variant="primary">Link 2</BrLink>
        <BrLink href="#" variant="ghost">Link 3</BrLink>
      </div>
    </BrConfigProvider>
  </div>
</template>

主题定制

通过 BrConfigProvider 全局配置主题色。

<script setup lang="ts">
import { BrLink, BrConfigProvider } from '@breezeui/vue'

const theme = {
  primary: '#10b981', // emerald-500
  secondary: '#f59e0b', // amber-500
  accent: '#3b82f6', // blue-500
}
</script>

<template>
  <BrConfigProvider :theme="theme">
    <div class="flex items-center gap-4 p-4 border rounded-lg">
      <BrLink href="#">Custom Primary</BrLink>
      <BrLink variant="secondary" href="#">Custom Secondary</BrLink>
      <BrLink variant="ghost" href="#">Custom Ghost</BrLink>
    </div>
  </BrConfigProvider>
</template>

API

Props

名称	类型	默认值	说明
variant	`string`	`'default'`	样式变体：`default`, `primary`, `secondary`, `ghost`, `underline`
size	`string`	`'md'`	尺寸：`sm`, `md`, `lg`
href	`string`	-	原生链接地址
to	`string \| object`	-	路由目标（需配合 vue-router）
disabled	`boolean`	`false`	是否禁用
target	`string`	-	链接打开方式
rel	`string`	-	链接关系属性
as	`string \| object`	-	渲染的标签或组件

Slots

名称	说明
default	链接内容
prefix	前置内容（如图标）
suffix	后置内容（如图标）

#Link 链接

#组件特性

#基础用法

#变体与尺寸

#带图标

#状态与外部链接

#全局尺寸配置

#主题定制

#API

#Props

#Slots