组件 · 操作 · 原生 HTML 与 React
文字链接按钮 Link
看起来像链接的按钮:句子里的次要操作,比如「改为新建一篇」。
演示
<button class="xxd-link">改为新建一篇</button>export function LinkDemo() {
return <Link href="#">改为新建一篇</Link>;
}状态
同一个元素的各种状态并排。悬停、聚焦、按下用的是组件 CSS 里真实的规则(构建时复制成强制状态),不是手画的。
属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| data-variant | inline(缺省)| plain | current |
| data-external / target=_blank | 后面带外链图标 |
| 类名 | xxd-link |
键盘与读屏
- 跳转用 <a href>,执行操作用 <button class="xxd-link">——读屏据此告诉用户会发生什么
- 下划线常在,不只靠颜色区分
规则
- 40% 下划线,hover 变实