链接 Link
链接组件,用于页面跳转或外部链接。
何时使用
- 需要在页面中添加可点击的链接时
- 需要统一链接样式时
- 需要区分不同类型链接(主要、次要、危险)时
示例
基础用法
最简单的用法,创建一个基本链接。
正在加载组件...
链接变种
支持主色和次色两种变种。
正在加载组件...
下划线样式
支持三种下划线显示方式:始终显示、悬停显示、从不显示。
正在加载组件...
危险链接
用于表示危险操作的链接,显示为红色。
正在加载组件...
新窗口打开
设置 target="_blank" 使链接在新窗口打开。
正在加载组件...
内联文本中的链接
链接可以嵌入到普通文本中使用。
正在加载组件...
所有变体展示
展示所有链接变体的组合效果。
正在加载组件...
API
Link
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| variant | 链接变种 | 'primary' | 'secondary' | 'secondary' |
| underline | 下划线显示方式 | 'always' | 'hover' | 'never' | 'never' |
| danger | 是否为危险链接(红色) | boolean | false |
| href | 链接地址 | string | - |
| target | 链接打开方式 | '_self' | '_blank' | '_parent' | '_top' | - |
| children | 链接文本 | ReactNode | - |
| className | 自定义类名 | string | - |