logo
English

导航菜单

Documents
Vue

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.

Component Features:

  • Supports multiple style variants (default, primary, secondary, text, cta, ghost, light, navigation, github)
  • Supports multiple sizes (sm, md, lg)
  • Supports animation effects (hover-lift, hover-glow, hover-scale)
  • Supports button style and ghost buttons
  • Supports icon slots (left, right, navigation, GitHub)
  • Supports external links opening in new windows automatically
  • Supports block display and full width display
  • Responsive design, adapts to different screen sizes

Examples

<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>

Props

active

Whether the link is in an active state.

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

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/home" :active="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="/about" :active="false">关于我们（非激活状态）</Link>
    </div>
</template>

align

Alignment method. Optional values: left, center, right.

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

<template>
    <div style="border: 1px solid #e5e7eb; padding: 1rem; width: 300px;">
        <Link href="/left" align="left">左对齐链接</Link>
    </div>
</template>

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

<template>
    <div style="border: 1px solid #e5e7eb; padding: 1rem; width: 300px;">
        <Link href="/center" align="center">居中对齐链接</Link>
    </div>
</template>

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

<template>
    <div style="border: 1px solid #e5e7eb; padding: 1rem; width: 300px;">
        <Link href="/right" align="right">右对齐链接</Link>
    </div>
</template>

animation

Animation effects that define the animation behavior on mouse hover. Optional values: none, hover-lift, hover-glow, hover-scale.

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

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/none" animation="none">无动画效果</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="/lift" animation="hover-lift">悬停上浮效果</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="/glow" animation="hover-glow">悬停发光效果</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="/scale" animation="hover-scale">悬停缩放效果</Link>
    </div>
</template>

block

Whether to display as a block element. When set to true, the link will occupy a full line.

内联链接（默认）

这是一段文字，其中包含一个 内联链接。 

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

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/inline">内联链接（默认）</Link>
        <p>这是一段文字，其中包含一个
            <Link href="/inline">内联链接</Link>。
        </p>
    </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="/block" :block="true">块级链接</Link>
    </div>
</template>

btn

Whether to enable button style. When set to true, button styles will be applied.

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

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/normal">普通链接</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="/button" :btn="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="/primary" :btn="true" variant="primary">主要按钮链接</Link>
    </div>
</template>

circle

Whether it’s a circular button, requires the btn attribute to be used together.

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

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/normal" :btn="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="/circle" :btn="true" :circle="true">圆形按钮链接</Link>
    </div>
</template>

class

Custom CSS class name.

<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">默认样式</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="/custom" class="text-red-500 font-bold">自定义样式</Link>
    </div>
</template>

class:list

Class name list.

<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">默认样式</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="/custom" :class:list="['text-blue-500', 'font-semibold']">类名列表样式</Link>
    </div>
</template>

color

Button color, requires the btn attribute to be used together. Optional values: primary, secondary, accent, info, success, warning, error.

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

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/primary" :btn="true" color="primary">主要颜色</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="/secondary" :btn="true" color="secondary">次要颜色</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="/accent" :btn="true" color="accent">强调颜色</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="/info" :btn="true" color="info">信息颜色</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="/success" :btn="true" color="success">成功颜色</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="/warning" :btn="true" color="warning">警告颜色</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="/error" :btn="true" color="error">错误颜色</Link>
    </div>
</template>

debug

Whether to display debug borders.

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

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/normal">正常模式</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="/debug" :debug="true">调试模式</Link>
    </div>
</template>

external

Whether it’s an external link. When set to true, it will automatically open in a new window.

<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>
    </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="https://example.com" :external="true">外部链接</Link>
    </div>
</template>

fullWidth

Whether to occupy full width.

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

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/normal">普通宽度</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="/full" :full-width="true">全宽显示</Link>
    </div>
</template>

ghost

Whether it’s a ghost button, requires the btn attribute to be used together.

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

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/normal" :btn="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="/ghost" :btn="true" :ghost="true">幽灵按钮</Link>
    </div>
</template>

href

Link address, required property.

<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>

icon

Icon name, supports all available icon components.

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

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/home">
        <template #icon-left>
            <span>🏠</span>
        </template>
        首页
        </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="/settings">
        <template #icon-left>
            <span>⚙️</span>
        </template>
        设置
        </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="/search">
        <template #icon-left>
            <span>🔍</span>
        </template>
        搜索
        </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="/user">
        <template #icon-left>
            <span>👤</span>
        </template>
        用户
        </Link>
    </div>
</template>

Navigation type, requires the navigation variant to be used together. Optional values: previous, next.

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

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/previous" navigation-type="previous">
        <template #icon-previous>
            <span>←</span>
        </template>
        上一页
        </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="/next" navigation-type="next">
        <template #icon-next>
            <span>→</span>
        </template>
        下一页
        </Link>
    </div>
</template>

noUnderline

Whether to remove the underline, defaults to true.

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

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/with">带下划线</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="/without" :no-underline="true">无下划线</Link>
    </div>
</template>

rounded

Whether to add rounded corners.

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

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/normal">普通链接</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="/rounded" :rounded="true">圆角链接</Link>
    </div>
</template>

size

Size, controls the font size and spacing of the link. Optional values: sm, md, lg.

<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.

<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">默认</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="/primary" variant="primary">主要</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="/secondary" variant="secondary">次要</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="/text" variant="text">文本</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="/cta" variant="cta">行动号召</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="/ghost" variant="ghost">幽灵</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="/light" variant="light">浅色</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="/nav" variant="nav">导航</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="https://github.com" variant="github">
        <template #icon-github>
            <span>🐙</span>
        </template>
        GitHub
        </Link>
    </div>
</template>

Slots

default

The text content of the 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="/about">关于我们</Link>
        <Link href="/contact">联系我们</Link>
        <Link href="/docs">文档</Link>
    </div>
</template>

icon-left

Left icon slot, displayed to the left of the link content.

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

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/home">
        <template #icon-left>
            <span>🏠</span>
        </template>
        首页
        </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="/settings">
        <template #icon-left>
            <span>⚙️</span>
        </template>
        设置
        </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="/search">
        <template #icon-left>
            <span>🔍</span>
        </template>
        搜索
        </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="/user">
        <template #icon-left>
            <span>👤</span>
        </template>
        用户
        </Link>
    </div>
</template>

icon-right

Right icon slot, displayed to the right of the link content.

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

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/home">
        <template #icon-left>
            <span>🏠</span>
        </template>
        首页
        </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="/settings">
        <template #icon-left>
            <span>⚙️</span>
        </template>
        设置
        </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="/search">
        <template #icon-left>
            <span>🔍</span>
        </template>
        搜索
        </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="/user">
        <template #icon-left>
            <span>👤</span>
        </template>
        用户
        </Link>
    </div>
</template>

icon-previous

Previous icon slot, displayed when navigationType="previous".

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

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/previous" navigation-type="previous">
        <template #icon-previous>
            <span>←</span>
        </template>
        上一页
        </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="/next" navigation-type="next">
        <template #icon-next>
            <span>→</span>
        </template>
        下一页
        </Link>
    </div>
</template>

icon-next

Next icon slot, displayed when navigationType="next".

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

<template>
    <div style="display: flex; flex-direction: column; gap: 1rem;">
        <Link href="/previous" navigation-type="previous">
        <template #icon-previous>
            <span>←</span>
        </template>
        上一页
        </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="/next" navigation-type="next">
        <template #icon-next>
            <span>→</span>
        </template>
        下一页
        </Link>
    </div>
</template>

icon-github

GitHub icon slot, displayed when variant="github".

<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">默认</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="/primary" variant="primary">主要</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="/secondary" variant="secondary">次要</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="/text" variant="text">文本</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="/cta" variant="cta">行动号召</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="/ghost" variant="ghost">幽灵</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="/light" variant="light">浅色</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="/nav" variant="nav">导航</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="https://github.com" variant="github">
        <template #icon-github>
            <span>🐙</span>
        </template>
        GitHub
        </Link>
    </div>
</template>

搜索