Link

基础用法

最简单的链接展示方式

<Link href="/about">关于我们</Link>

外部链接

链接到外部网站，自动添加新窗口打开属性

访问外部网站

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

样式变体

通过variant属性应用不同的样式变体

主要链接

次要链接

文本链接

行动号召

幽灵链接

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

块级显示

通过block属性使链接占据整行显示

独占一行的链接

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

<Link href="/contact" block variant="primary">独占一行的链接</Link>
<p class="cosy:mt-2">这是一段文字，其中包含一个<Link href="/inline">内联链接</Link>。</p>

动画效果

通过animation属性添加悬停动画效果

上浮效果

发光效果

缩放效果

<Link href="/contact" animation="hover-lift" variant="primary">上浮效果</Link>
<Link href="/features" animation="hover-glow" variant="secondary">发光效果</Link>
<Link href="/pricing" animation="hover-scale" variant="cta">缩放效果</Link>

尺寸变体

通过size属性控制链接的尺寸

小型链接

中型链接

大型链接

<Link href="/small" size="sm">小型链接</Link>
<Link href="/medium" size="md">中型链接</Link>
<Link href="/large" size="lg">大型链接</Link>

文本居中

通过centerText属性使链接文本居中显示

居中显示的链接文本

<Link href="/centered" block centerText variant="primary">居中显示的链接文本</Link>

调试模式

通过debug属性显示链接边界，便于开发调试

显示边界的链接

<Link href="/debug" debug>显示边界的链接</Link>