Easy UI

Segmented 分段选择器 ​

分段选择器用于在一组互斥的选项中进行选择。

引入 ​

js

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

css

TIP

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

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

基础用法 ​

设置 options 为选项值。

html
<div class="demo">
  <ea-segmented
    id="basicSegmentedLarge"
    name="week"
    value="Mon"
    size="large"
  ></ea-segmented>
  <ea-segmented
    id="basicSegmentedDefault"
    name="week"
    value="Mon"
    size="default"
  ></ea-segmented>
  <ea-segmented
    id="basicSegmentedSmall"
    name="week"
    value="Mon"
    size="small"
  ></ea-segmented>
</div>

配置方向 ​

设置 vertical 来改变方向。

查看代码
html
<div class="demo">
  <ea-segmented id="sizeSegmented" name="size" value="default"></ea-segmented>
  <ea-segmented
    id="directionSegmented"
    name="direction"
    value="horizontal"
  ></ea-segmented>
  <ea-segmented
    id="directionSegmentedOptions"
    name="fruit"
    value="Apple"
  ></ea-segmented>
</div>

禁用状态 ​

设置 disabled 属性来禁用一些选项。

html
<div class="demo">
  <ea-segmented
    id="disabledSegmented1"
    name="week"
    value="Mon"
    disabled
  ></ea-segmented>
  <ea-segmented id="disabledSegmented2" name="week" value="Mon"></ea-segmented>
</div>

自定义选项 ​

当您的 options 格式不同于默认格式时，可通过 propsConfiguration 属性自定义 options

html
<div class="demo">
  <ea-segmented id="customSegmented" name="week" value="Mon"></ea-segmented>
</div>

Block 分段选择器 ​

设置 block 为 true 以适应父元素的宽度。

html
<div class="demo">
  <ea-segmented
    id="blockSegmented"
    name="week"
    value="Mon"
    block
  ></ea-segmented>
</div>

自定义样式 ​

html
<div class="demo">
  <ea-segmented
    id="customStyleSegmented"
    name="fruit"
    value="Apple"
  ></ea-segmented>
</div>
css
#customStyleSegmented {
  --ea-segmented-item-checked-color: black;
  --ea-segmented-indicator-color: #ffd100;
  --ea-segmented-border-radius: 16px;
}

API ​

Attributes ​

参数说明类型可选值默认值
value当前选中值string-""
options prop选项列表（可为字符串数组或对象数组）array-[ ]
propsConfiguration prop自定义选项字段映射object{ label, value, disabled }{ label: 'label', value: 'value', disabled: 'disabled' }
size组件尺寸stringlarge | default | smalldefault
block是否在父容器内占满宽度（块级）boolean-false
direction排列方向stringhorizontal | verticalhorizontal
disabled是否禁用整个组件boolean-false

CSS Part ​

名称说明
container组件根元素，part="container"
item每个选项的容器，part="item"
label选项标签，part="label"
input原生 input，part="input"
indicator当前选中指示器，part="indicator"

Events ​

事件名说明
change选项改变时触发