Link
简介
Link 组件是一个功能强大的链接组件，不仅支持传统的链接样式，还提供了按钮风格、动画效果和丰富的自定义选项。通过语义化的属性配置，无需手动编写 CSS 类名即可实现各种视觉效果。
主要特性：
- 🎨 多种样式变体（default、primary、secondary、text、cta、ghost、light）
- 🔘 完整的按钮风格支持（普通、幽灵、圆形、各种尺寸）
- ✨ 丰富的动画效果（上浮、发光、缩放）
- 📱 响应式设计，支持各种对齐方式
- 🎯 语义化属性，无需手动拼接 CSS 类
- ♿ 完善的无障碍支持
基础用法
最简单的链接使用方式，支持内部链接和外部链接。
---
/**
* @component LinkBasic
* @description Link组件的基础用法示例
*/
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="https://example.com" external>访问外部网站</Link>
</div>
</div>
按钮风格
通过 btn 属性启用按钮风格，支持多种颜色、尺寸和形状。
使用 color 属性设置按钮颜色，支持 primary、secondary、accent、info、success、warning、error
---
/**
* @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>
使用 ghost 属性创建幽灵按钮，具有透明背景和边框
---
/**
* @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>
使用 circle 和 rounded 属性控制按钮形状
---
/**
* @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>
使用 size 属性控制按钮尺寸，支持 sm、md、lg
---
/**
* @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>
使用 fullWidth 属性创建全宽按钮
---
/**
* @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>
样式变体
通过 variant 属性应用不同的样式变体，适用于不同的使用场景。
使用 variant 属性设置链接样式，支持 default、primary、secondary、text、cta、ghost、light
---
/**
* @component LinkVariants
* @description Link组件的样式变体示例
*/
import { Link } from '@coffic/cosy-ui';
---
<div class="cosy:flex cosy:gap-4 cosy:flex-wrap cosy:items-center">
<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>
</div>
使用 block 属性让链接以块级元素显示，占据整行
---
/**
* @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>
使用 size 属性控制链接尺寸，支持 sm、md、lg
---
/**
* @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>
动画效果
通过 animation 属性添加悬停动画效果，提升用户体验。
使用 animation 属性为链接添加动画效果，支持 hover-lift、hover-glow、hover-scale、none
---
/**
* @component LinkAnimations
* @description Link组件的链接动画效果示例
*/
import { Link } from '@coffic/cosy-ui';
---
<div class="cosy:flex cosy:gap-4 cosy:flex-wrap cosy:items-center">
<Link href="/lift" animation="hover-lift" variant="primary">上浮效果</Link>
<Link href="/glow" animation="hover-glow" variant="secondary">发光效果</Link>
<Link href="/scale" animation="hover-scale" variant="cta">缩放效果</Link>
<Link href="/none" animation="none" variant="ghost">无动画</Link>
</div>
按钮样式的链接也支持相同的动画效果
---
/**
* @component ButtonAnimations
* @description Link组件的按钮动画效果示例
*/
import { Link } from '@coffic/cosy-ui';
---
<div class="cosy:flex cosy:gap-4 cosy:flex-wrap cosy:items-center">
<Link href="/btn-lift" btn color="primary" animation="hover-lift"
>按钮上浮</Link
>
<Link href="/btn-glow" btn color="secondary" animation="hover-glow"
>按钮发光</Link
>
<Link href="/btn-scale" btn color="accent" animation="hover-scale"
>按钮缩放</Link
>
<Link href="/btn-none" btn color="info" animation="none">按钮无动画</Link>
</div>
高级功能
更多高级功能，包括对齐方式、样式修饰、调试模式等。
使用 align 属性控制链接的对齐方式，支持 left、center、right
---
/**
* @component LinkAlignment
* @description Link组件的对齐方式示例
*/
import { Link } from '@coffic/cosy-ui';
---
<div class="cosy:space-y-2">
<Link href="/left" align="left" block variant="primary">左对齐链接</Link>
<Link href="/center" align="center" block variant="secondary"
>居中对齐链接</Link
>
<Link href="/right" align="right" block variant="cta">右对齐链接</Link>
</div>
使用 rounded、noUnderline、fullWidth 等属性修饰链接样式
---
/**
* @component LinkModifiers
* @description Link组件的样式修饰示例
*/
import { Link } from '@coffic/cosy-ui';
---
<div class="cosy:space-y-2">
<div class="cosy:flex cosy:gap-4 cosy:flex-wrap cosy:items-center">
<Link href="/rounded" rounded variant="primary">圆角链接</Link>
<Link href="/no-underline" noUnderline variant="secondary">无下划线</Link>
</div>
<Link href="/full-width" fullWidth variant="cta">全宽链接</Link>
</div>
使用 debug 属性显示调试边框，方便开发时查看组件边界
---
/**
* @component LinkDebug
* @description Link组件的调试模式示例
*/
import { Link } from '@coffic/cosy-ui';
---
<div class="cosy:flex cosy:gap-4 cosy:flex-wrap cosy:items-center">
<Link href="/debug" debug variant="primary">调试边框</Link>
<Link href="/debug-btn" btn debug color="secondary">调试按钮</Link>
<Link href="/debug-ghost" btn ghost debug color="accent">调试幽灵</Link>
</div>
提供向后兼容的属性，如 centerText 等
---
/**
* @component LinkCompatibility
* @description Link组件的兼容性功能示例
*/
import { Link } from '@coffic/cosy-ui';
---
<div class="cosy:space-y-2">
<Link href="/center-text" centerText block variant="primary"
>文本居中（兼容）</Link
>
<p class="cosy:text-sm cosy:text-gray-600">
centerText 属性是为了向后兼容，推荐使用 align="center"
</p>
</div>
API 参考
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
href | 链接地址 | string | - |
external | 是否为外部链接，自动新窗口打开 | boolean | false |
variant | 样式变体 | 'default' | 'primary' | 'secondary' | 'text' | 'cta' | 'ghost' | 'light' | 'default' |
size | 尺寸大小 | 'sm' | 'md' | 'lg' | 'md' |
animation | 动画效果 | 'none' | 'hover-lift' | 'hover-glow' | 'hover-scale' | 'none' |
block | 是否为块级显示 | boolean | false |
btn | 是否启用按钮风格 | boolean | false |
circle | 是否为圆形按钮（需配合 btn 使用） | boolean | false |
ghost | 是否为幽灵按钮（需配合 btn 使用） | boolean | false |
color | 按钮颜色（需配合 btn 使用） | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | - |
align | 对齐方式 | 'left' | 'center' | 'right' | - |
rounded | 是否添加圆角 | boolean | false |
noUnderline | 是否移除下划线 | boolean | false |
fullWidth | 是否占满宽度 | boolean | false |
centerText | 是否居中文本（兼容属性） | boolean | false |
debug | 是否显示调试边框 | boolean | false |
class | 自定义 CSS 类名 | string | - |
...rest | 其他 HTML <a> 标签属性 | HTMLAttributes<'a'> | - |