Easy UI

Button 按钮 ​

常用的操作按钮。

引入 ​

js

html
<script type="module">
  import "./node_modules/easy-component-ui/components/ea-button/index.js";
  import "./node_modules/easy-component-ui/components/ea-button-group/index.js"; // 需要使用按钮组时才需引入
</script>

css

TIP

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

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

自定义样式 ​

移步到 CSS Part。

基础用法 ​

使用 type、plain、round 和 circle 来定义按钮的样式。

默认按钮主要按钮成功按钮警告按钮危险按钮
朴素按钮主要按钮成功按钮警告按钮危险按钮
圆角按钮主要按钮成功按钮警告按钮危险按钮
查看代码
html
<div class="row">
  <ea-button>默认按钮</ea-button>
  <ea-button class="part">默认按钮</ea-button>
  <ea-button type="primary">主要按钮</ea-button>
  <ea-button type="success">成功按钮</ea-button>
  <ea-button type="warning">警告按钮</ea-button>
  <ea-button type="danger">危险按钮</ea-button>
</div>

禁用状态 ​

你可以使用 disabled 属性来定义按钮是否被禁用。

使用 disabled 属性来控制按钮是否为禁用状态。 该属性接受一个 Boolean 类型的值。

禁用按钮主要按钮成功按钮警告按钮危险按钮
禁用按钮主要按钮成功按钮警告按钮危险按钮
圆角按钮主要按钮成功按钮警告按钮危险按钮
查看代码

html

html
<div class="row">
  <ea-button disabled>禁用按钮</ea-button>
  <ea-button type="primary" disabled>主要按钮</ea-button>
  <ea-button type="success" disabled>成功按钮</ea-button>
  <ea-button type="warning" disabled>警告按钮</ea-button>
  <ea-button type="danger" disabled>危险按钮</ea-button>
</div>

js: 操作 disabled 属性

js
const btn = document.querySelector("ea-button");
btn.addEventListener("click", function (e) {
  btn.disabled = e.target.checked;
});

链接按钮 ​ ​

DANGER

type="text" 已被 废弃，将于版本 3.0.0 时 移除，请考虑切换至新的 API。

新的 API link 于 3.0.0 版本时添加，你可以使用 type API 设置链接按钮的主题样式

通过设置 href 属性来改变链接。

链接按钮文本按钮危险按钮警告按钮成功按钮链接按钮
链接按钮文本按钮危险按钮警告按钮成功按钮链接按钮
查看代码
html
<div class="demo">
  <div class="row left">
    <ea-button href="https://luminaqaq.github.io/ea-ui-component/ea-button" link
      >链接按钮</ea-button
    >
    <ea-button
      type="primary"
      href="https://luminaqaq.github.io/ea-ui-component/ea-button"
      link
      >文本按钮</ea-button
    >
    <ea-button
      type="danger"
      href="https://luminaqaq.github.io/ea-ui-component/ea-button"
      link
      >危险按钮</ea-button
    >
    <ea-button
      type="warning"
      href="https://luminaqaq.github.io/ea-ui-component/ea-button"
      link
      >警告按钮</ea-button
    >
    <ea-button
      type="success"
      href="https://luminaqaq.github.io/ea-ui-component/ea-button"
      link
      >成功按钮</ea-button
    >
    <ea-button
      disabled
      id="ea-button-a"
      type="text"
      href="https://luminaqaq.github.io/ea-ui-component/ea-button"
      link
      >链接按钮</ea-button
    >
  </div>

  <div class="row left">
    <ea-button
      disabled
      href="https://luminaqaq.github.io/ea-ui-component/ea-button"
      link
      >链接按钮</ea-button
    >
    <ea-button
      disabled
      type="primary"
      href="https://luminaqaq.github.io/ea-ui-component/ea-button"
      link
      >文本按钮</ea-button
    >
    <ea-button
      disabled
      type="danger"
      href="https://luminaqaq.github.io/ea-ui-component/ea-button"
      link
      >危险按钮</ea-button
    >
    <ea-button
      disabled
      type="warning"
      href="https://luminaqaq.github.io/ea-ui-component/ea-button"
      link
      >警告按钮</ea-button
    >
    <ea-button
      disabled
      type="success"
      href="https://luminaqaq.github.io/ea-ui-component/ea-button"
      link
      >成功按钮</ea-button
    >
    <ea-button
      disabled
      id="ea-button-a"
      type="text"
      href="https://luminaqaq.github.io/ea-ui-component/ea-button"
      link
      >链接按钮</ea-button
    >
  </div>
</div>

文字按钮 ​

TIP

没有边框和背景色的按钮。 通过设置 type 属性为 text 来切换按钮类型。

API 也已更新，由于 type 属性会同时控制按钮的样式， 因此于 3.0.0，我们通过一个新的 API text: boolean 来控制文字按钮。

文字按钮文字按钮文字按钮文字按钮文字按钮
文字按钮文字按钮文字按钮文字按钮文字按钮
查看代码
html
<div class="demo">
  <div class="row left">
    <ea-button icon="icon-coffee" text>文字按钮</ea-button>
    <ea-button type="primary" text>文字按钮</ea-button>
    <ea-button type="danger" text>文字按钮</ea-button>
    <ea-button type="warning" text>文字按钮</ea-button>
    <ea-button type="success" text>文字按钮</ea-button>
  </div>
  <div class="row left">
    <ea-button disabled icon="icon-coffee" text>文字按钮</ea-button>
    <ea-button disabled type="primary" text>文字按钮</ea-button>
    <ea-button disabled type="danger" text>文字按钮</ea-button>
    <ea-button disabled type="warning" text>文字按钮</ea-button>
    <ea-button disabled type="success" text>文字按钮</ea-button>
  </div>
</div>

图标按钮 ​

使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。

通过设置 icon 属性为 icon-xxx 来改变图标，更多图标请查看 图标文档。

图标按钮 图标按钮 图标按钮
查看代码
html
<div class="row left">
  <ea-button type="primary" icon="icon-coffee" circle></ea-button>
  <ea-button type="primary" icon="icon-edit" round></ea-button>
  <ea-button type="primary" icon="icon-edit"></ea-button>
  <ea-button type="primary" icon="icon-comment-empty">图标按钮</ea-button>
  <ea-button type="primary" icon="icon-trash-empty" disabled>
    图标按钮
  </ea-button>
  <ea-button type="primary" disabled>
    图标按钮 <ea-icon icon="icon-trash-empty"></ea-icon>
  </ea-button>
</div>

按钮组 ​

以按钮组的方式出现，常用于多项类似操作。

上一页 下一页 后退刷新前进
查看代码
html
<div class="row left">
  <ea-button-group>
    <ea-button icon="icon-angle-left" type="primary">上一页</ea-button>
    <ea-button type="primary">
      下一页 <ea-icon icon="icon-angle-right"></ea-icon>
    </ea-button>
  </ea-button-group>
  <ea-button-group>
    <ea-button type="primary">后退</ea-button>
    <ea-button type="primary">刷新</ea-button>
    <ea-button type="primary">前进</ea-button>
  </ea-button-group>
</div>

加载状态按钮 ​ ​

点击按钮来加载数据，并向用户反馈加载状态。

通过设置 loading 属性为 true 来显示加载中状态。

加载中按钮
查看代码

html

html
<div class="row">
  <ea-switch id="ea-radio-loading" value="true"></ea-switch>
  <ea-button id="ea-button-loading" type="primary" loading
    >加载中按钮</ea-button
  >
</div>

js: 操作 loading 属性。

js
document
  .querySelector("#ea-radio-loading")
  .addEventListener("change", function (e) {
    const btn = document.querySelector("#ea-button-loading");

    e.target.value ? (btn.loading = true) : (btn.loading = false);
  });

不同尺寸 ​

除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。

使用 size 属性额外配置尺寸，可使用 large 和 small 两种值。

大型按钮默认按钮小型按钮
大型按钮默认按钮小型按钮
大型按钮默认按钮小型按钮
查看代码
html
<div class="demo">
  <div class="row left">
    <ea-button type="primary" size="large">大型按钮</ea-button>
    <ea-button type="primary">默认按钮</ea-button>
    <ea-button type="primary" size="small">小型按钮</ea-button>
  </div>
  <div class="row left">
    <ea-button type="primary" icon="icon-coffee" size="large"
      >大型按钮</ea-button
    >
    <ea-button type="primary" icon="icon-coffee">默认按钮</ea-button>
    <ea-button type="primary" icon="icon-coffee" size="small"
      >小型按钮</ea-button
    >
  </div>
  <div class="row left">
    <ea-button type="primary" round size="large">大型按钮</ea-button>
    <ea-button type="primary" round>默认按钮</ea-button>
    <ea-button type="primary" round size="small">小型按钮</ea-button>
  </div>
  <div class="row left">
    <ea-button
      type="primary"
      circle
      icon="icon-coffee"
      size="large"
    ></ea-button>
    <ea-button type="primary" circle icon="icon-coffee"></ea-button>
    <ea-button
      type="primary"
      circle
      icon="icon-coffee"
      size="small"
    ></ea-button>
  </div>
</div>

Button Attributes ​

参数说明类型可选值默认值
size按钮尺寸stringnormal|medium|small|mini"normal"
type按钮类型stringnormal|primary|success|warning|danger|text|link"normal"
plain朴素效果booleantrue|falsefalse
disabled是否禁用booleantrue|falsefalse
round圆角按钮booleantrue|falsefalse
loading加载状态booleantrue|falsefalse
icon图标类名string——
href链接地址string——

ButtonGroup Attributes ​

参数说明类型可选值默认值
disabled是否禁用booleantrue|falsefalse
type按钮类型stringnormal|primary|success|warning|danger|text|link"normal"
size按钮尺寸stringnormal|medium|small|mini"normal"

Button CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container按钮容器