Easy UI

Radio 单选框 ​

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

引入 ​

js

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

css

TIP

如果使用到带图标的属性/组件，请提前通过 link 引入图标样式文件。

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

自定义样式 ​

移步到 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 ​

Attributes ​

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

Events ​

事件名说明回调参数（event.detail）
change单个选项被点击并成为选中项时可能触发（委托给 group）{ value: string }

Slots ​

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

CSS Part ​

名称说明
container外层容器
input-wrap输入框容器
input输入框（非原生 input）
label-wraplabel 容器

RadioGroup API ​

Attributes ​

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

Events ​

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

Slots ​

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

CSS Part ​

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

名称说明
container外层容器