SegmentedControl 分段器

规则

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

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

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

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

代码演示

示例

import { SegmentedControl, 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" className="sc-example">
        <p className="title">最简</p>
        <SegmentedControl values={['切换一', '切换二']} />
        <p className="title">禁用</p>
        <SegmentedControl values={['切换一', '切换二']} enabled={false} />
        <p className="title">默认选中一项</p>
        <SegmentedControl selectedIndex={1} values={['切换一', '切换二', '切换三']} />
        <p className="title">主色调样式 tintColor</p>
        <SegmentedControl
          values={['切换一', '切换二', '切换三']}
          tintColor={'#ff0000'}
          style={{ height: '0.8rem', width: '5rem' }}
        />
        <p className="title">事件</p>
        <SegmentedControl
          values={['切换一', '切换二', '切换三']}
          onChange={this.onChange}
          onValueChange={this.onValueChange}
        />
      </WingBlank>
    );
  },
});
ReactDOM.render(<SegmentedControlExample />, mountNode);

.sc-example {
  padding-bottom: 0.26rem;
}
.sc-example .title {
  padding: 0.26rem 0;
}

API ( 适用平台：WEB、React-Native )