@wines/segmented-control v1.5.1

@wines/segmented-control

SegmentedControl 分段器

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

使用指南

在 page.json 中引入组件

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

示例

<view class="page">
	<view class="page__hd">
		<view class="page__title">SegmentedControl</view>
		<view class="page__desc">分段器</view>
	</view>
	<view class="page__bd">
		<view class="sub-title">Default</view>
		<wux-segmented-control values="{{ ['Segment1', 'Segment2'] }}" />
		<view class="sub-title">Theme</view>
		<wux-segmented-control theme="light" values="{{ ['Segment1', 'Segment2'] }}" />
		<wux-segmented-control theme="stable" values="{{ ['Segment1', 'Segment2'] }}" />
		<wux-segmented-control theme="positive" values="{{ ['Segment1', 'Segment2'] }}" />
		<wux-segmented-control theme="calm" values="{{ ['Segment1', 'Segment2'] }}" />
		<wux-segmented-control theme="balanced" values="{{ ['Segment1', 'Segment2'] }}" />
		<wux-segmented-control theme="energized" values="{{ ['Segment1', 'Segment2'] }}" />
		<wux-segmented-control theme="assertive" values="{{ ['Segment1', 'Segment2'] }}" />
		<wux-segmented-control theme="royal" values="{{ ['Segment1', 'Segment2'] }}" />
		<wux-segmented-control theme="dark" values="{{ ['Segment1', 'Segment2'] }}" />
		<view class="sub-title">Disabled</view>
		<wux-segmented-control disabled values="{{ ['Segment1', 'Segment2'] }}" />
		<view class="sub-title">DefaultCurrent</view>
		<wux-segmented-control default-current="2" values="{{ ['Segment1', 'Segment2', 'Segment3'] }}" />
		<view class="sub-title">Controlled</view>
		<wux-segmented-control
		 current="{{ current }}"
		 controlled
		 values="{{ ['Segment1', 'Segment2', 'Segment3'] }}"
		 bind:change="onChange"
		/>
	</view>
</view>

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

Page<PageData, PageCustom>({
  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

SegmentedControl props

SegmentedControl externalClasses