@wines/segmented-control

SegmentedControl 分段器

分段器由至少 2 个分段控件组成，用作不同视图的显示，预设 9 种颜色 light, stable, positive, calm, assertive, balanced, energized, royal, dark 可选用。

使用指南

在 page.json 中引入组件

``json
{
"navigationBarTitleText": "segmented-control",
"usingComponents": {
"wux-segmented-control": "@wines/segmented-control"
}
}
`

示例

`xml


SegmentedControl
分段器


Default

Theme









Disabled

DefaultCurrent

Controlled
current="{{ current }}"
controlled
values="{{ ['Segment1', 'Segment2', 'Segment3'] }}"
bind:change="onChange"
/>



`

`ts
import { PageData, PageCustom } from '@wines/core';
import './index.less';

Page({
data: {
current: 1,
},
key: 0,
onLoad() {
this.key = Math.floor(Math.random() * 3);
},
onChange(e) {
console.log(e);
if (e.detail.key === this.key) {
void wx.showModal({
title: 'No switching is allowed',
showCancel: !1,
});
return;
}
this.setData({
current: e.detail.key,
});
},
});
`

API

$3

| 参数 | 类型 | 描述 | 默认值 |
| -------------- | ---------- | ------------------------------------------------------------------------------------------- | ----------- |
| prefixCls | string | 自定义类名前缀 | wux-segment |
| theme | string | 主题色，可选值为 light、stable、positive、calm、assertive、balanced、energized、royal、dark | balanced |
| defaultCurrent | number | 默认激活 tab 面板的 key，当 controlled 为 false 时才生效 | 0 |
| current | number | 用于手动激活 tab 面板的 key，当 controlled 为 true 时才生效 | 0 |
| controlled | boolean | 是否受控 说明文档 | false |
| disabled | boolean | 是否禁用 | false |
| values | array | 选项数组 | [] |
| bind:change | function` | 切换面板的回调函数 | - |

$3

| 名称 | 描述 |
| --------- | ------------ |
| wux-class | 根节点样式类 |