Easy UI

Appearance

Link 文字链接 ​

文字超链接，用于页面之间的导航跳转，支持原生 <a> 标签的全部能力。

引入 ​

html
<script type="module">
  import "./node_modules/easy-component-ui/dist/components/ea-link.js";
</script>
js
import "easy-component-ui/ea-link";

自定义样式 ​

移步到 CSS Part。

基础用法 ​

基础的文字链接用法。通过设置 variant 属性来定义文字链接的类型。

默认链接主要链接成功链接警告链接危险链接信息链接
查看代码
html
<div class="row left">
  <ea-link href="https://github.com/LuminaQAQ">默认链接</ea-link>
  <ea-link href="https://github.com/LuminaQAQ" variant="primary"
    >主要链接</ea-link
  >
  <ea-link href="https://github.com/LuminaQAQ" variant="success"
    >成功链接</ea-link
  >
  <ea-link href="https://github.com/LuminaQAQ" variant="warning"
    >警告链接</ea-link
  >
  <ea-link href="https://github.com/LuminaQAQ" variant="danger"
    >危险链接</ea-link
  >
  <ea-link href="https://github.com/LuminaQAQ" variant="info">信息链接</ea-link>
</div>

禁用状态 ​

文字链接不可用状态。通过设置 disabled 属性来定义是否禁用状态。

默认链接主要链接成功链接警告链接危险链接信息链接
查看代码
html
<div class="row left">
  <ea-link href="https://github.com/LuminaQAQ" disabled>默认链接</ea-link>
  <ea-link variant="primary" href="https://github.com/LuminaQAQ" disabled
    >主要链接</ea-link
  >
  <ea-link variant="success" href="https://github.com/LuminaQAQ" disabled
    >成功链接</ea-link
  >
  <ea-link variant="warning" href="https://github.com/LuminaQAQ" disabled
    >警告链接</ea-link
  >
  <ea-link variant="danger" href="https://github.com/LuminaQAQ" disabled
    >危险链接</ea-link
  >
  <ea-link variant="info" href="https://github.com/LuminaQAQ" disabled
    >信息链接</ea-link
  >
</div>

下划线 ​

文字链接下划线。通过设置 underline 属性来控制是否显示下划线，支持 'always' | 'hover' | 'never' 三种模式。

无下划线无下划线hover下划线always下划线
查看代码
html
<div class="row left">
  <ea-link>无下划线</ea-link>
  <ea-link underline="never">无下划线</ea-link>
  <ea-link variant="primary" underline="hover">hover下划线</ea-link>
  <ea-link variant="primary" underline="always">always下划线</ea-link>
</div>

图标 ​

带图标的文字链接可增强辨识度。通过 icon 属性设置图标名称，也可以在默认插槽中直接使用 ea-icon 组件。

查看分享
查看代码
html
<div class="row left">
  <ea-link icon="eye">查看</ea-link>
  <ea-link icon="share">分享</ea-link>
</div>

原生链接属性 ​

ea-link 支持原生 <a> 标签的 target、rel、download 属性，提供完整的原生链接能力。

新窗口打开下载文件
查看代码
html
<div class="row left">
  <ea-link
    href="https://github.com/LuminaQAQ"
    target="_blank"
    rel="noopener noreferrer"
    >新窗口打开</ea-link
  >
  <ea-link href="/files/document.pdf" download="document.pdf">下载文件</ea-link>
</div>
参数说明类型可选值默认值
variant链接类型stringprimary / success / warning / danger / info / normalnormal
disabled是否禁用boolean—false
underline下划线模式always / hover / never——
icon图标名称string——
href链接地址string——
target链接打开方式string_blank / _self / _parent / _top—
rel链接关系string——
download下载文件名string——
名称说明
container链接容器元素
icon图标元素
名称说明
default默认插槽，链接文本内容
属性名说明默认值
--ea-link-font-size链接字体大小var(--font-size-md)
--ea-link-transition过渡动画时长var(--transition-fast)
--ea-link-icon-margin-right图标右边距var(--spacing-sm)