SegmentedControl 分段器

规则

• 和 Tabs 功能相似，尽可能避免一个页面中同时出现这两个组件。

• 可以搭配 NavBar 一起使用，用于显示多个视图，分段数一般为 2 个。

• 单独放置一行时，分段数最多为 5 个；文案需要精简，一般 2-4 个字。

• 尽可能保持文案长度一致。

代码演示

分段控制

import { SegmentedControl, WhiteSpace, WingBlank } from 'antd-mobile';
const SegmentedControlExample = React.createClass({
  onChange(e) {
    console.log(`selectedIndex:${e.nativeEvent.selectedSegmentIndex}`);
  },
  onValueChange(value) {
    console.log(value);
  },
  render() {
    return (
      <WingBlank size="lg">
        <div style={{ padding: 16 }}>禁用/enabled=false</div>
        <SegmentedControl
          values={['切换一', '切换二']}
          enabled={false}
        />
        <WhiteSpace size="lg" />
        <div style={{ padding: 16 }}>设置 tintColor/style </div>
        <SegmentedControl
          values={['切换一', '切换二', '切换三']}
          tintColor={'#ff0000'}
          style={{ height: '0.8rem', width: '5rem' }}
        />
        <WhiteSpace size="lg" />
        <div style={{ padding: 16 }}>设置默认选中 selectedIndex </div>
        <SegmentedControl
          selectedIndex={1}
          values={['切换一', '切换二', '切换三']}
        />
        <WhiteSpace size="lg" />
        <div style={{ padding: 16 }}>事件 onChange/onValueChange </div>
        <SegmentedControl
          values={['切换一', '切换二', '切换三']}
          onChange={this.onChange}
          onValueChange={this.onValueChange}
        />
      </WingBlank>
    );
  },
});
ReactDOM.render(<SegmentedControlExample />, mountNode);

API

SegmentedControl