Link
Introduction
The Link component is a powerful link component that not only supports traditional link styles but also provides button styles, animation effects, and rich customization options. Through semantic property configuration, you can achieve various visual effects without manually writing CSS class names.
Examples
---
/**
* @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
Whether the link is in an active state.
align
Alignment method. Optional values: 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
Animation effects that define the animation behavior on mouse hover. Optional values: 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
Whether to display as a block element. When set to true, the link will occupy a full line.
---
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
Whether to enable button style. When set to true, button styles will be applied.
---
/**
* @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
Whether it’s a circular button, requires the btn attribute to be used together.
---
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
Custom CSS class name.
---
import { Link } from "@coffic/cosy-ui";
---
<Link href="/custom" class="custom-link">自定义类名链接</Link>
class:list
Class name list.
---
import { Link } from "@coffic/cosy-ui";
---
<Link href="/class-list" class:list={['link-class', 'hover-effect']}
>类名列表链接</Link
>
color
Button color, requires the btn attribute to be used together. Optional values: 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
Whether to display debug borders.
external
Whether it’s an external link. When set to true, it will automatically open in a new window.
---
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
Whether to occupy full width.
ghost
Whether it’s a ghost button, requires the btn attribute to be used together.
---
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
Link address, required property.
---
/**
* @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
Image to display on hover, supports ImageSource type. When this property is provided, hovering over the link will display the specified image.
---
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 text for the hover image, used for accessibility.
icon
Icon name, supports all available icon components.
---
/**
* @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>
navigationType
Navigation type, requires the navigation variant to be used together. Optional values: 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
Whether to remove the underline, defaults to true.
---
import { Link } from "@coffic/cosy-ui";
---
<Link href="/no-underline" noUnderline={false}>带下划线链接</Link>
rounded
Whether to add rounded corners.
---
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
Size, controls the font size and spacing of the link. Optional values: 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
Style variant, used to define the visual style of the link. Optional values: 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
Other HTML <a> tag attributes.
---
import { Link } from "@coffic/cosy-ui";
---
<Link href="/rest" title="工具提示" data-testid="test-link">其他属性链接</Link>
Slots
default
The text content of the link.
---
/**
* @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>