Easy UI

Appearance

Checkbox 多选框 ​

一组备选项中进行多选。

引入 ​

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

自定义样式 ​

移步到 CSS Part。

基础用法 ​

可以使用 label 属性或直接在标签内写文本，并可以监听 change 事件。

查看代码
html
<div class="demo">
  <div>
    <ea-checkbox label="Option 1" size="large"></ea-checkbox>
    <ea-checkbox label="Option 2" size="large"></ea-checkbox>
  </div>
  <div>
    <ea-checkbox label="Option 1"></ea-checkbox>
    <ea-checkbox label="Option 2"></ea-checkbox>
  </div>
  <div>
    <ea-checkbox label="Option 1" size="small"></ea-checkbox>
    <ea-checkbox label="Option 2" size="small"></ea-checkbox>
  </div>
</div>

禁用状态 ​

多选框不可用状态。在元素上添加 disabled 属性即可。

Disabled selected and disabled Not disabled
查看代码
html
<div class="demo">
  <ea-checkbox size="large" disabled>Disabled</ea-checkbox>
  <ea-checkbox size="large" disabled checked>
    selected and disabled
  </ea-checkbox>
  <ea-checkbox size="large">Not disabled</ea-checkbox>
</div>

多选框组 ​

checkbox-group 适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

查看代码
html
<div class="demo">
  <ea-checkbox-group id="mulipleGroup" name="mulipleGroup">
    <ea-checkbox label="Option A" value="Value A"></ea-checkbox>
    <ea-checkbox label="Option B" value="Value B"></ea-checkbox>
    <ea-checkbox label="Option C" value="Value C"></ea-checkbox>
    <ea-checkbox label="disabled" value="Value disabled" disabled></ea-checkbox>
    <ea-checkbox
      label="selected and disabled"
      value="Value selected and disabled"
      disabled
    ></ea-checkbox>
  </ea-checkbox-group>
</div>
js
const multipleGroupExample = {
  group: document.querySelector("#mulipleGroup"),

  init() {
    if (!this.group) return;
    this.group.value = ["Value selected and disabled", "Value A"];
  },
};

multipleGroupExample.init();

中间状态 ​

indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果。下面演示如何把单个"全选" checkbox 与一个 checkbox-group 同步。

查看代码
html
<div class="demo">
  <ea-checkbox
    id="indeterminateCheckbox"
    label="Check all"
    indeterminate
  ></ea-checkbox>
  <ea-checkbox-group id="indeterminateGroup" name="city">
    <ea-checkbox label="Shanghai" value="Shanghai"></ea-checkbox>
    <ea-checkbox label="Beijing" value="Beijing"></ea-checkbox>
    <ea-checkbox label="Guangzhou" value="Guangzhou"></ea-checkbox>
    <ea-checkbox label="Shenzhen" value="Shenzhen"></ea-checkbox>
  </ea-checkbox-group>
</div>
js
const indeterminateExample = {
  indeterminateCheckbox: document.querySelector("#indeterminateCheckbox"),
  group: document.querySelector("#indeterminateGroup"),

  cities: ["Shanghai", "Beijing", "Guangzhou", "Shenzhen"],

  init() {
    if (!this.group || !this.indeterminateCheckbox) return;
    this.group.value = ["Guangzhou", "Shenzhen"];

    const getValueLength = () => this.group.value.length;

    this.indeterminateCheckbox.addEventListener("change", e => {
      const { checked } = e.detail;

      if (checked) this.group.value = this.cities;
      else this.group.value = [];

      this.indeterminateCheckbox.indeterminate =
        getValueLength() > 0 && getValueLength() < this.cities.length;
    });

    this.group.addEventListener("change", e => {
      this.indeterminateCheckbox.indeterminate =
        getValueLength() > 0 && getValueLength() < this.cities.length;
      this.indeterminateCheckbox.checked =
        getValueLength() === this.cities.length;
    });
  },
};

indeterminateExample.init();

可选项目数量的限制 ​

ea-checkbox-group 支持 min、max 属性来限制可选项数量。

查看代码
html
<div class="demo">
  <ea-checkbox-group id="limitGroup" name="city" min="1" max="2">
    <ea-checkbox label="Shanghai" value="Shanghai"></ea-checkbox>
    <ea-checkbox label="Beijing" value="Beijing"></ea-checkbox>
    <ea-checkbox label="Guangzhou" value="Guangzhou"></ea-checkbox>
    <ea-checkbox label="Shenzhen" value="Shenzhen"></ea-checkbox>
    <ea-checkbox label="Fujian" value="Fujian" disabled></ea-checkbox>
  </ea-checkbox-group>
</div>
js
const limitExample = {
  group: document.querySelector("#limitGroup"),

  init() {
    if (!this.group) return;
    this.group.value = ["Guangzhou", "Shenzhen"];
  },
};

limitExample.init();

带有边框 ​

支持 border 属性展现带边框的样式。

查看代码
html
<div class="demo">
  <div>
    <ea-checkbox label="Option 1" size="large" border checked></ea-checkbox>
    <ea-checkbox label="Option 2" size="large" border></ea-checkbox>
  </div>
  <div>
    <ea-checkbox label="Option 1" border checked></ea-checkbox>
    <ea-checkbox label="Option 2" border></ea-checkbox>
  </div>
  <div>
    <ea-checkbox label="Option 1" size="small" border checked></ea-checkbox>
    <ea-checkbox label="Option 2" size="small" border></ea-checkbox>
  </div>
  <div>
    <ea-checkbox
      label="Option 1"
      size="small"
      border
      disabled
      checked
    ></ea-checkbox>
    <ea-checkbox label="Option 2" size="small" border disabled></ea-checkbox>
  </div>
</div>

Checkbox API ​

Checkbox Attributes ​

参数说明类型可选值默认值
label通过属性设置的文本string——
value绑定值string——
name原生的 name 属性string——
disabled是否禁用boolean—false
checked是否选中boolean—false
indeterminate是否为半选状态boolean—false
size组件尺寸stringlarge | default | smalldefault
border是否带边框样式boolean—false
limitDisabled是否被限制禁用boolean—false
required是否必填boolean—false

Checkbox CSS Part ​

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

名称说明
container外层 label 容器
original原生 checkbox 元素
input伪复选框元素
label标签容器元素

Checkbox Events ​

事件名说明回调参数(event.detail)
change选中状态变化时触发{ value: string, checked: boolean }
focus获得焦点时触发{ value: string, checked: boolean }
blur失去焦点时触发{ value: string, checked: boolean }

Checkbox Methods ​

方法名说明参数
focus获取焦点—
blur失去焦点—
toggle切换选中状态—

Checkbox Slots ​

名称说明
default默认插槽，用于多选框标签内容

Checkbox CSS Custom Properties ​

属性名说明默认值
--ea-checkbox-size复选框尺寸var(--font-size-md)
--ea-checkbox-spacing内边距var(--spacing-md)
--ea-checkbox-font-size字体大小var(--font-size-md)
--ea-checkbox-box-spacing复选框与标签间距var(--spacing-md)
--ea-checkbox-box-bg-color选中背景颜色var(--blue-500)
--ea-checkbox-box-bg-disabled-color禁用背景颜色var(--grey-100)
--ea-checkbox-box-border-color边框颜色var(--grey-300)
--ea-checkbox-box-border-disabled-color禁用边框颜色var(--grey-200)
--ea-checkbox-box-border-active-color选中边框颜色var(--blue-500)
--ea-checkbox-check-color勾选颜色var(--color-white)
--ea-checkbox-check-disabled-color禁用勾选颜色var(--grey-400)
--ea-checkbox-label-color选中标签颜色var(--blue-500)
--ea-checkbox-disabled-color禁用标签颜色var(--grey-500)

CheckboxGroup API ​

CheckboxGroup Attributes ​

参数说明类型可选值默认值
label表单标签string——
name若该组件位于表单内，则该 name 将作为该组值的键名string——
value当前选中的值any[]—[]
size尺寸stringlarge | default | small—
disabled是否禁用boolean—false
min最少可选数量number—0
max最多可选数量number—Infinity
required是否必填boolean—false

CheckboxGroup CSS Part ​

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

名称说明
container外层容器
form-label表单标签元素

CheckboxGroup Slots ​

名称说明
default默认插槽，用于放置 ea-checkbox

CheckboxGroup CSS Custom Properties ​

属性名说明默认值
--ea-checkbox-group-gap子组件间距var(--spacing-md)