ea-ui

Link 文字链接 ​

文字超链接

引入 ​

js

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

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

基础用法 ​

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

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

禁用状态 ​

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

未禁用状态禁用状态
查看代码
html
<div class="row left">
  <ea-link type="primary" href="https://github.com/LuminaQAQ"
    >未禁用状态</ea-link
  >
  <ea-link disabled>禁用状态</ea-link>
</div>

下划线 ​

文字链接下划线。通过设置 underline 属性来定义是否显示下划线。

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

图标 ​

带图标的文字链接可增强辨识度。

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

Attributes ​

参数说明类型可选值默认值
type类型stringprimary / success / warning / danger / info-
disabled是否禁用boolean-false
underline是否下划线boolean-true
icon图标string--
href链接地址string--

CSS Part ​

名称说明
container外层容器