logo
简体中文

导航菜单

文档

Link

简介

Link 组件是一个功能强大的链接组件，不仅支持传统的链接样式，还提供了按钮风格、动画效果和丰富的自定义选项。通过语义化的属性配置，无需手动编写 CSS 类名即可实现各种视觉效果。

案例

基础链接

关于我们

带下划线的链接

联系我们

外部链接

访问外部网站

GitHub 链接

GitHub 仓库

文档链接

查看文档

默认变体

默认链接

主要变体

主要链接

次要变体

次要链接

文本变体

文本链接

CTA 变体

行动号召

GitHub 变体

GitHub 仓库
---



/**
 * @component BasicLink
 * @description 展示基础链接用法
 */

import { Link } from "@coffic/cosy-ui";
---

<div class="cosy:space-y-4">
  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">基础链接</h3>
    <Link href="/about">关于我们</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">带下划线的链接</h3>
    <Link href="/contact" noUnderline={false}>联系我们</Link>
  </div>
</div>

---



/**
 * @component ExternalLink
 * @description 展示外部链接用法
 */

import { Link } from "@coffic/cosy-ui";
---

<div class="cosy:space-y-4">
  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">外部链接</h3>
    <Link href="https://example.com" external>访问外部网站</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">GitHub 链接</h3>
    <Link href="https://github.com" external>GitHub 仓库</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">文档链接</h3>
    <Link href="https://docs.example.com" external>查看文档</Link>
  </div>
</div>

---



/**
 * @component VariantsLink
 * @description 展示不同变体的链接
 */

import { Link } from "@coffic/cosy-ui";
---

<div class="cosy:space-y-4">
  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">默认变体</h3>
    <Link href="/default">默认链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">主要变体</h3>
    <Link href="/primary" variant="primary">主要链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">次要变体</h3>
    <Link href="/secondary" variant="secondary">次要链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">文本变体</h3>
    <Link href="/text" variant="text">文本链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">CTA 变体</h3>
    <Link href="/cta" variant="cta">行动号召</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">GitHub 变体</h3>
    <Link href="https://github.com/user/repo" variant="github">GitHub 仓库</Link
    >
  </div>
</div>

<script setup lang="ts">
import { Link } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/about">关于我们</Link>
        <Link href="/contact">联系我们</Link>
        <Link href="/docs">文档</Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/internal">内部链接</Link>
        <Link href="https://example.com" :external="true">外部链接（新窗口打开）</Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/default" variant="default">默认样式</Link>
        <Link href="/primary" variant="primary">主要样式</Link>
        <Link href="/secondary" variant="secondary">次要样式</Link>
        <Link href="/text" variant="text">文本样式</Link>
        <Link href="/cta" variant="cta">行动号召</Link>
        <Link href="/ghost" variant="ghost">幽灵样式</Link>
        <Link href="/light" variant="light">浅色样式</Link>
        <Link href="/navigation" variant="navigation">导航样式</Link>
        <Link href="/github" variant="github">GitHub样式</Link>
    </div>
</template>

Props

active

是否为激活状态。

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/active" active>激活链接</Link>

align

对齐方式。可选值：left、center、right。

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/left" align="left" btn>左对齐链接</Link>

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/center" align="center" btn>居中对齐链接</Link>

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/right" align="right" btn>右对齐链接</Link>

animation

动画效果，定义鼠标悬停时的动画行为。可选值：none、hover-lift、hover-glow、hover-scale。

---



import { Container, Link } from "@coffic/cosy-ui";
---

<Container flex="row" gap="md" items="center">
  <Link href="/hover-lift" animation="hover-lift" variant="primary">
    上浮效果
  </Link>
</Container>

---



import { Container, Link } from "@coffic/cosy-ui";
---

<Container flex="row" gap="md" items="center">
  <Link href="/hover-glow" animation="hover-glow" variant="secondary">
    发光效果
  </Link>
</Container>

---



import { Container, Link } from "@coffic/cosy-ui";
---

<Container flex="row" gap="md" items="center">
  <Link href="/hover-scale" animation="hover-scale" variant="cta">
    缩放效果
  </Link>
</Container>

---



import { Container, Link } from "@coffic/cosy-ui";
---

<Container flex="row" gap="md" items="center">
  <Link href="/block-link" block align="center" variant="primary">
    块级居中链接
  </Link>
</Container>

---



import { Container, Link } from "@coffic/cosy-ui";
---

<Container padding="md">
  <Link href="/light-variant" variant="light"> 浅色背景中的链接 </Link>
</Container>

block

是否为块级显示，设置为 true 时链接会独占一行。

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/block1" variant="primary" block>块级主要链接</Link>

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/block2" variant="secondary" block>块级次要链接</Link>


---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/block3" variant="cta" block>块级行动号召链接</Link>

btn

是否启用按钮风格，设置为 true 时会应用按钮样式。

---



/**
 * @component LinkButtonColors
 * @description Link组件的按钮颜色示例
 */

import { Link } from "@coffic/cosy-ui";
---

<div class="cosy:flex cosy:gap-2 cosy:flex-wrap">
  <Link href="/btn" btn color="primary">主要按钮</Link>
  <Link href="/btn" btn color="secondary">次要按钮</Link>
  <Link href="/btn" btn color="accent">强调按钮</Link>
  <Link href="/btn" btn color="info">信息按钮</Link>
  <Link href="/btn" btn color="success">成功按钮</Link>
  <Link href="/btn" btn color="warning">警告按钮</Link>
  <Link href="/btn" btn color="error">错误按钮</Link>
</div>

---



/**
 * @component LinkButtonGhost
 * @description Link组件的幽灵按钮示例
 */

import { Link } from "@coffic/cosy-ui";
---

<div class="cosy:flex cosy:gap-2 cosy:flex-wrap">
  <Link href="/ghost" btn ghost color="primary">主要幽灵</Link>
  <Link href="/ghost" btn ghost color="secondary">次要幽灵</Link>
  <Link href="/ghost" btn ghost color="accent">强调幽灵</Link>
  <Link href="/ghost" btn ghost color="info">信息幽灵</Link>
</div>

---



/**
 * @component LinkButtonShapes
 * @description Link组件的按钮形状示例
 */

import { Link } from "@coffic/cosy-ui";
---

<div class="cosy:flex cosy:gap-2 cosy:items-center">
  <Link href="/circle" btn circle color="primary">A</Link>
  <Link href="/circle" btn circle color="secondary">B</Link>
  <Link href="/circle" btn circle color="accent">C</Link>
  <Link href="/rounded" btn rounded color="primary">圆角按钮</Link>
  <Link href="/normal" btn color="primary">普通按钮</Link>
</div>

---



/**
 * @component LinkButtonSizes
 * @description Link组件的按钮尺寸示例
 */

import { Link } from "@coffic/cosy-ui";
---

<div class="cosy:flex cosy:gap-2 cosy:items-center">
  <Link href="/size" btn size="sm" color="primary">小按钮</Link>
  <Link href="/size" btn size="md" color="primary">中按钮</Link>
  <Link href="/size" btn size="lg" color="primary">大按钮</Link>
</div>

---



/**
 * @component LinkButtonFullWidth
 * @description Link组件的全宽按钮示例
 */

import { Link } from "@coffic/cosy-ui";
---

<div class="cosy:space-y-2">
  <Link href="/block" btn fullWidth color="primary">全宽主要按钮</Link>
  <Link href="/block" btn fullWidth color="secondary">全宽次要按钮</Link>
  <Link href="/block" btn fullWidth ghost color="accent">全宽幽灵按钮</Link>
</div>

circle

是否为圆形按钮，需要配合 btn 属性使用。

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/circle" btn circle color="primary">A</Link>

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/circle" btn circle color="secondary">B</Link>

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/circle" btn circle color="accent">C</Link>

class

自定义 CSS 类名。

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/custom" class="custom-link">自定义类名链接</Link>

class:list

类名列表。

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/class-list" class:list={['link-class', 'hover-effect']}
  >类名列表链接</Link
>

color

按钮颜色，需要配合 btn 属性使用。可选值：primary、secondary、accent、info、success、warning、error。

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/primary" btn color="primary">主要按钮</Link>


---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/secondary" btn color="secondary">次要按钮</Link>


---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/accent" btn color="accent">强调按钮</Link>

debug

是否显示调试边框。

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/debug" debug>调试链接</Link>

external

是否为外部链接，设置为 true 时会自动在新窗口打开。

外部链接

访问外部网站

GitHub 链接

GitHub 仓库

文档链接

查看文档
---



import { Link } from "@coffic/cosy-ui";
---

<Link href="https://example.com" external>访问外部网站</Link>

---



/**
 * @component GithubLink
 * @description 展示 GitHub 变体的链接
 */

import { Link } from "@coffic/cosy-ui";
---

<Link href="https://github.com" variant="github">GitHub 仓库</Link>

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="https://docs.example.com" external>查看文档</Link>

fullWidth

是否占满宽度。

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/full" btn fullWidth>全宽按钮</Link>

ghost

是否为幽灵按钮，需要配合 btn 属性使用。

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/ghost" btn ghost color="primary">主要幽灵</Link>

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/ghost" btn ghost color="secondary">次要幽灵</Link>

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/ghost" btn ghost color="accent">强调幽灵</Link>

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/ghost" btn ghost color="info">信息幽灵</Link>

href

链接地址，必需属性。

基础链接

关于我们

带下划线的链接

联系我们

外部链接

访问外部网站

GitHub 链接

GitHub 仓库

文档链接

查看文档

默认变体

默认链接

主要变体

主要链接

次要变体

次要链接

文本变体

文本链接

CTA 变体

行动号召

GitHub 变体

GitHub 仓库
---



/**
 * @component BasicLink
 * @description 展示基础链接用法
 */

import { Link } from "@coffic/cosy-ui";
---

<div class="cosy:space-y-4">
  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">基础链接</h3>
    <Link href="/about">关于我们</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">带下划线的链接</h3>
    <Link href="/contact" noUnderline={false}>联系我们</Link>
  </div>
</div>

---



/**
 * @component ExternalLink
 * @description 展示外部链接用法
 */

import { Link } from "@coffic/cosy-ui";
---

<div class="cosy:space-y-4">
  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">外部链接</h3>
    <Link href="https://example.com" external>访问外部网站</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">GitHub 链接</h3>
    <Link href="https://github.com" external>GitHub 仓库</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">文档链接</h3>
    <Link href="https://docs.example.com" external>查看文档</Link>
  </div>
</div>

---



/**
 * @component VariantsLink
 * @description 展示不同变体的链接
 */

import { Link } from "@coffic/cosy-ui";
---

<div class="cosy:space-y-4">
  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">默认变体</h3>
    <Link href="/default">默认链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">主要变体</h3>
    <Link href="/primary" variant="primary">主要链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">次要变体</h3>
    <Link href="/secondary" variant="secondary">次要链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">文本变体</h3>
    <Link href="/text" variant="text">文本链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">CTA 变体</h3>
    <Link href="/cta" variant="cta">行动号召</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">GitHub 变体</h3>
    <Link href="https://github.com/user/repo" variant="github">GitHub 仓库</Link
    >
  </div>
</div>

<script setup lang="ts">
import { Link } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/about">关于我们</Link>
        <Link href="/contact">联系我们</Link>
        <Link href="/docs">文档</Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/internal">内部链接</Link>
        <Link href="https://example.com" :external="true">外部链接（新窗口打开）</Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/default" variant="default">默认样式</Link>
        <Link href="/primary" variant="primary">主要样式</Link>
        <Link href="/secondary" variant="secondary">次要样式</Link>
        <Link href="/text" variant="text">文本样式</Link>
        <Link href="/cta" variant="cta">行动号召</Link>
        <Link href="/ghost" variant="ghost">幽灵样式</Link>
        <Link href="/light" variant="light">浅色样式</Link>
        <Link href="/navigation" variant="navigation">导航样式</Link>
        <Link href="/github" variant="github">GitHub样式</Link>
    </div>
</template>

hoverImage

悬停时显示的图片，支持 ImageSource 类型。当提供此属性时，悬停在链接上会显示指定的图片。

二维码图片
---



import { Link } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---

<Link href="#" hoverImage={qrCodeImage} hoverImageAlt="二维码图片">
  悬停显示图片
</Link>

---



import { Link } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---

<Link
  href="#"
  icon="WechatIcon"
  hoverImage={qrCodeImage}
  hoverImageAlt="微信二维码">
  微信
</Link>

---



import { Link } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---

<Link
  href="#"
  btn
  circle
  ghost
  size="sm"
  color="info"
  hoverImage={qrCodeImage}
  hoverImageAlt="二维码图片">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
    <path
      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
    ></path>
  </svg>
</Link>

hoverImageAlt

悬停图片的 alt 文本，用于无障碍访问。

icon

图标名称，支持所有可用的图标组件。

---



/**
 * @component LinkIcons
 * @description 展示 Link 组件的图标功能
 */
import { Grid, Link } from "@coffic/cosy-ui";
---

<Grid cols={{ base: 2, md: 3, lg: 4, xl: 6 }} gap="md">
  <Link href="/home" icon="HomeIcon" variant="primary" btn> 首页 </Link>

  <Link href="/settings" icon="SettingsIcon" variant="info"> 设置 </Link>

  <Link href="/search" icon="SearchIcon" btn variant="secondary"> 搜索 </Link>

  <Link href="/user" icon="UserIcon"> 用户 </Link>

  <Link href="/mail" icon="MailIcon"> 邮件 </Link>

  <Link href="/download" icon="DownloadIcon" btn> 下载 </Link>

  <Link href="/upload" icon="UploadIcon"> 上传 </Link>

  <Link href="/folder" icon="FolderIcon"> 文件夹 </Link>

  <Link href="/star" icon="StarIcon"> 收藏 </Link>

  <Link href="/heart" icon="HeartIcon"> 喜欢 </Link>

  <Link href="/edit" icon="EditIcon"> 编辑 </Link>

  <Link href="/delete" icon="DeleteIcon"> 删除 </Link>

  <Link href="/save" icon="SaveIcon"> 保存 </Link>

  <Link href="/refresh" icon="RefreshIcon"> 刷新 </Link>

  <Link href="/notification" icon="NotificationIcon"> 通知 </Link>

  <Link href="/message" icon="MessageIcon"> 消息 </Link>

  <Link href="/dashboard" icon="DashboardIcon"> 仪表盘 </Link>

  <Link href="/chart" icon="ChartIcon"> 图表 </Link>

  <Link href="/document" icon="DocumentIcon"> 文档 </Link>

  <Link href="/tools" icon="ToolsIcon"> 工具 </Link>

  <Link href="/security" icon="SecurityIcon"> 安全 </Link>

  <Link href="/wallet" icon="WalletIcon"> 钱包 </Link>

  <Link href="/report" icon="ReportIcon"> 报告 </Link>

  <Link href="/logout" icon="LogOut"> 退出 </Link>

  <Link href="/info" icon="InfoIcon"> 信息 </Link>

  <Link href="/warning" icon="WarningIcon"> 警告 </Link>

  <Link href="/error" icon="ErrorIcon"> 错误 </Link>

  <Link href="/success" icon="CheckCircle"> 成功 </Link>

  <Link href="/calendar" icon="CalendarIcon"> 日历 </Link>

  <Link href="/globe" icon="GlobeIcon"> 全球 </Link>

  <Link href="/website" icon="WebsiteIcon"> 网站 </Link>

  <Link href="/app-store" icon="AppStoreIcon"> 应用商店 </Link>

  <Link href="/users" icon="UsersIcon"> 用户组 </Link>

  <Link href="/menu" icon="MenuIcon"> 菜单 </Link>

  <Link href="/link" icon="LinkIcon"> 链接 </Link>

  <Link href="/twitter" icon="TwitterIcon"> Twitter </Link>

  <Link href="/linkedin" icon="LinkedinIcon"> LinkedIn </Link>

  <Link href="/github" icon="GithubIcon"> GitHub </Link>

  <Link href="/sun-cloudy" icon="SunCloudyIcon"> 天气 </Link>

  <Link href="/check" icon="CheckIcon"> 检查 </Link>

  <Link href="/close" icon="CloseIcon"> 关闭 </Link>

  <Link href="/clipboard" icon="ClipboardIcon"> 剪贴板 </Link>

  <Link href="/code" icon="CodeIcon"> 代码 </Link>

  <Link href="/chevron-down" icon="ChevronDownIcon"> 展开 </Link>

  <Link href="/chevron-left" icon="ChevronLeftIcon" btn> 向左 </Link>

  <Link href="/chevron-right" icon="ChevronRightIcon" btn> 向右 </Link>

  <Link href="/alert-triangle" icon="AlertTriangle"> 警告三角 </Link>

  <Link href="/info-circle" icon="InfoCircle"> 信息圈 </Link>

  <Link href="/inbox-archive" icon="InboxArchive"> 收件箱 </Link>

  <Link href="/x-circle" icon="XCircle"> 错误圈 </Link>
</Grid>

导航类型，需要配合 navigation 变体使用。可选值：previous、next。

---



/**
 * @component NavigationPrevious
 * @description 展示 Link 组件的 navigation 变体用于"上一个"导航
 */

import { Link } from "@coffic/cosy-ui";
---

<Link href="/previous" variant="navigation" navigationType="previous"
  >上一页</Link
>

---



/**
 * @component NavigationNext
 * @description 展示 Link 组件的 navigation 变体用于"下一个"导航
 */

import { Link } from "@coffic/cosy-ui";
---

<Link href="/next" variant="navigation" navigationType="next">下一页</Link>

noUnderline

是否移除下划线，默认为 true。

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/no-underline" noUnderline={false}>带下划线链接</Link>

rounded

是否添加圆角。

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/rounded" rounded="none" style="padding: 0.5rem 1rem; background-color: #f3f4f6; border: 1px solid #d1d5db; display: inline-block;">无圆角链接</Link>

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/rounded" rounded="sm" style="padding: 0.5rem 1rem; background-color: #f3f4f6; border: 1px solid #d1d5db; display: inline-block;">小圆角链接</Link>

---



import { Link } from "@coffic/cosy-ui";
---

<Link
  href="/rounded"
  rounded="md"
  style="padding: 0.5rem 1rem; background-color: #f3f4f6; border: 1px solid #d1d5db; display: inline-block;"
  >中等圆角链接</Link
>

---



import { Link } from "@coffic/cosy-ui";
---

<Link
  href="/rounded"
  rounded="lg"
  style="padding: 0.5rem 1rem; background-color: #f3f4f6; border: 1px solid #d1d5db; display: inline-block;"
  >大圆角链接</Link
>

---



import { Link } from "@coffic/cosy-ui";
---

<Link
  href="/rounded"
  rounded="xl"
  style="padding: 0.5rem 1rem; background-color: #f3f4f6; border: 1px solid #d1d5db; display: inline-block;"
  >超大圆角链接</Link
>

---



import { Link } from "@coffic/cosy-ui";
---

<Link
  href="/rounded"
  rounded="full"
  style="padding: 0.5rem 1rem; background-color: #f3f4f6; border: 1px solid #d1d5db; display: inline-block;"
  >完全圆角链接</Link
>

size

尺寸大小，控制链接的字体大小和间距。可选值：sm、md、lg。

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/small" size="sm">小型链接</Link>

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/medium" size="md">中型链接</Link>

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/large" size="lg">大型链接</Link>

<script setup lang="ts">
import { Link } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/small" size="sm">小型</Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/medium" size="md">中型</Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/large" size="lg">大型</Link>
    </div>
</template>

variant

样式变体，用于定义链接的视觉风格。可选值：default、primary、secondary、text、cta、ghost、light、navigation、github。

---



import { Link } from "@coffic/cosy-ui";
---

<div style="padding: 1rem;">
  <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
    <Link href="/signup" variant="primary">主要链接</Link>
    <Link href="/learn-more" variant="secondary">次要链接</Link>
    <Link href="/docs" variant="text">文本链接</Link>
    <Link href="/get-started" variant="cta">行动号召</Link>
    <Link href="/preview" variant="ghost">幽灵链接</Link>
    <Link href="/help" variant="light">浅色链接</Link>
  </div>

  <div style="display: flex; gap: 1rem;">
    <Link href="/small" size="sm">小型链接</Link>
    <Link href="/medium" size="md">中型链接</Link>
    <Link href="/large" size="lg">大型链接</Link>
  </div>
</div>

---



/**
 * @component GithubLink
 * @description 展示 GitHub 变体的链接
 */

import { Link } from "@coffic/cosy-ui";
---

<Link href="https://github.com" variant="github">GitHub 仓库</Link>

---



/**
 * @component LinkBlock
 * @description Link组件的块级显示示例
 */

import { Link } from "@coffic/cosy-ui";
---

<div class="cosy:space-y-2">
  <Link href="/block1" variant="primary" block>块级主要链接</Link>
  <Link href="/block2" variant="secondary" block>块级次要链接</Link>
  <Link href="/block3" variant="cta" block>块级行动号召链接</Link>
</div>

---



/**
 * @component LinkSizes
 * @description Link组件的尺寸变体示例
 */

import { Link } from "@coffic/cosy-ui";
---

<div class="cosy:flex cosy:gap-4 cosy:items-center">
  <Link href="/small" variant="primary" size="sm">小号链接</Link>
  <Link href="/medium" variant="primary" size="md">中号链接</Link>
  <Link href="/large" variant="primary" size="lg">大号链接</Link>
</div>

---



/**
 * @component NavigationComplete
 * @description 展示完整的导航示例，包含上一个和下一个按钮
 */

import { Container, Link } from "@coffic/cosy-ui";
---

<Container gap="md" size="full" flex="row" justify="between">
  <Link href="/previous" variant="navigation" navigationType="previous">
    上一页：组件基础
  </Link>

  <Link href="/next" variant="navigation" navigationType="next">
    下一页：高级用法
  </Link>
</Container>

rest

其他 HTML <a> 标签属性。

---



import { Link } from "@coffic/cosy-ui";
---

<Link href="/rest" title="工具提示" data-testid="test-link">其他属性链接</Link>

Slots

default

链接的文本内容。

基础链接

关于我们

带下划线的链接

联系我们

外部链接

访问外部网站

GitHub 链接

GitHub 仓库

文档链接

查看文档

默认变体

默认链接

主要变体

主要链接

次要变体

次要链接

文本变体

文本链接

CTA 变体

行动号召

GitHub 变体

GitHub 仓库
---



/**
 * @component BasicLink
 * @description 展示基础链接用法
 */

import { Link } from "@coffic/cosy-ui";
---

<div class="cosy:space-y-4">
  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">基础链接</h3>
    <Link href="/about">关于我们</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">带下划线的链接</h3>
    <Link href="/contact" noUnderline={false}>联系我们</Link>
  </div>
</div>

---



/**
 * @component ExternalLink
 * @description 展示外部链接用法
 */

import { Link } from "@coffic/cosy-ui";
---

<div class="cosy:space-y-4">
  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">外部链接</h3>
    <Link href="https://example.com" external>访问外部网站</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">GitHub 链接</h3>
    <Link href="https://github.com" external>GitHub 仓库</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">文档链接</h3>
    <Link href="https://docs.example.com" external>查看文档</Link>
  </div>
</div>

---



/**
 * @component VariantsLink
 * @description 展示不同变体的链接
 */

import { Link } from "@coffic/cosy-ui";
---

<div class="cosy:space-y-4">
  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">默认变体</h3>
    <Link href="/default">默认链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">主要变体</h3>
    <Link href="/primary" variant="primary">主要链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">次要变体</h3>
    <Link href="/secondary" variant="secondary">次要链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">文本变体</h3>
    <Link href="/text" variant="text">文本链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">CTA 变体</h3>
    <Link href="/cta" variant="cta">行动号召</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">GitHub 变体</h3>
    <Link href="https://github.com/user/repo" variant="github">GitHub 仓库</Link
    >
  </div>
</div>

<script setup lang="ts">
import { Link } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/about">关于我们</Link>
        <Link href="/contact">联系我们</Link>
        <Link href="/docs">文档</Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/internal">内部链接</Link>
        <Link href="https://example.com" :external="true">外部链接（新窗口打开）</Link>
    </div>
</template>

<script setup lang="ts">
import { Link } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/default" variant="default">默认样式</Link>
        <Link href="/primary" variant="primary">主要样式</Link>
        <Link href="/secondary" variant="secondary">次要样式</Link>
        <Link href="/text" variant="text">文本样式</Link>
        <Link href="/cta" variant="cta">行动号召</Link>
        <Link href="/ghost" variant="ghost">幽灵样式</Link>
        <Link href="/light" variant="light">浅色样式</Link>
        <Link href="/navigation" variant="navigation">导航样式</Link>
        <Link href="/github" variant="github">GitHub样式</Link>
    </div>
</template>

搜索