Easy UI

Appearance

Radio 单选框 ​

在一组备选项中进行单选。

引入 ​

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

自定义样式 ​

移步到 Radio CSS Part 和 RadioGroup CSS Part。

基础用法 ​

以下展示三种尺寸的基本用法

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

禁用状态 ​

展示禁用和已禁用且选中状态

Option AOption B
查看代码
html
<div class="demo">
  <ea-radio-group value="selected and disabled">
    <ea-radio value="disabled" disabled>Option A</ea-radio>
    <ea-radio value="selected and disabled" disabled>Option B</ea-radio>
  </ea-radio-group>
</div>

单选框组 ​

基础的互斥选项组

Option AOption BOption C
查看代码
html
<div class="demo">
  <ea-radio-group value="3">
    <ea-radio value="3">Option A</ea-radio>
    <ea-radio value="6">Option B</ea-radio>
    <ea-radio value="9">Option C</ea-radio>
  </ea-radio-group>
</div>

带有边框 ​

展示不同尺寸和禁用情况下的边框样式

Option AOption B
Option AOption B
Option AOption B
Option AOption B
查看代码
html
<div class="demo">
  <div>
    <ea-radio-group value="1">
      <ea-radio value="1" size="large" border>Option A</ea-radio>
      <ea-radio value="2" size="large" border>Option B</ea-radio>
    </ea-radio-group>
  </div>
  <div style="margin-top: 20px">
    <ea-radio-group value="1">
      <ea-radio value="1" border>Option A</ea-radio>
      <ea-radio value="2" border>Option B</ea-radio>
    </ea-radio-group>
  </div>
  <div style="margin-top: 20px">
    <ea-radio-group value="1" size="small">
      <ea-radio value="1" border>Option A</ea-radio>
      <ea-radio value="2" border disabled>Option B</ea-radio>
    </ea-radio-group>
  </div>
  <div style="margin-top: 20px">
    <ea-radio-group value="1" size="small" disabled>
      <ea-radio value="1" border>Option A</ea-radio>
      <ea-radio value="2" border>Option B</ea-radio>
    </ea-radio-group>
  </div>
</div>

Radio API ​

Radio Attributes ​

参数说明类型可选值默认值
value选项的值string—''
label选项的显示文本（未指定时以 slot 为准）string—''
disabled是否禁用boolean—false
checked是否选中boolean—false
border是否显示边框样式boolean—false
size组件尺寸stringlarge | default | smalldefault

Radio CSS Part ​

名称说明
container外层 label 容器
original原生 radio 元素
input伪单选框元素
input-wrap输入框容器
label标签容器元素

Radio Slots ​

名称说明
default单个选项的显示内容（label）

Radio Methods ​

方法名说明参数
focus获取焦点—
blur失去焦点—

Radio Events ​

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

Radio CSS Custom Properties ​

属性名说明默认值
--ea-radio-input-size-large大号单选框尺寸var(--font-size-lg)
--ea-radio-input-size-default默认单选框尺寸var(--font-size-md)
--ea-radio-input-size-small小号单选框尺寸var(--font-size-sm)
--ea-radio-inner-size-large大号内部圆点尺寸7px
--ea-radio-inner-size-default默认内部圆点尺寸5px
--ea-radio-inner-size-small小号内部圆点尺寸4px
--ea-radio-space间距var(--spacing-md)
--ea-radio-border边框样式var(--ea-border)
--ea-radio-border-radius边框圆角var(--border-radius)
--ea-radio-border-hover悬停/选中边框颜色var(--blue-400)
--ea-radio-inner-background内部圆点背景颜色var(--color-white)
--ea-radio-disabled-color禁用颜色var(--grey-300)

RadioGroup API ​

RadioGroup Attributes ​

参数说明类型可选值默认值
value当前选中值string—''
label表单标签文本string—''
name组名（表单提交时使用）string—''
disabled是否整体禁用boolean—false
size组件尺寸stringlarge | default | small | ''
border是否显示边框样式boolean—false
required是否必填boolean—false

RadioGroup CSS Part ​

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

RadioGroup Slots ​

名称说明
default包含若干 ea-radio 子节点

RadioGroup Events ​

事件名说明回调参数(event.detail)
change组内选中值变化时触发{ value: string, checked: boolean }

RadioGroup CSS Custom Properties ​

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