SegmentedControl 分段器

规则

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

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

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

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

代码演示

基本

import { SegmentedControl, WingBlank } from 'antd-mobile';
class SegmentedControlExample extends React.Component {
  onChange = (e) => {
    console.log(`selectedIndex:${e.nativeEvent.selectedSegmentIndex}`);
  }
  onValueChange = (value) => {
    console.log(value);
  }
  render() {
    return (
      <WingBlank size="lg" className="sc-example">
        <p className="sub-title">Simplest</p>
        <SegmentedControl values={['Segment1', 'Segment2']} />
        <p className="sub-title">Disabled</p>
        <SegmentedControl values={['Segment1', 'Segment2']} disabled />
        <p className="sub-title">SelectedIndex</p>
        <SegmentedControl selectedIndex={1} values={['Segment1', 'Segment2', 'Segment3']} />
        <p className="sub-title">TintColor</p>
        <SegmentedControl
          values={['Segment1', 'Segment2', 'Segment3']}
          tintColor={'#ff0000'}
          style={{ height: '40px', width: '250px' }}
        />
        <p className="sub-title">onChange/onValueChange</p>
        <SegmentedControl
          values={['Segment1', 'Segment2', 'Segment3']}
          onChange={this.onChange}
          onValueChange={this.onValueChange}
        />
      </WingBlank>
    );
  }
}
ReactDOM.render(<SegmentedControlExample />, mountNode);

.sc-example {
  padding-bottom: 13px;
}
.sub-title {
  color: #888;
  font-size: 14px;
  padding: 30px 0 18px 0;
    margin: 0;
}

API