SegmentedControl 分段器

由至少 2 个分段控件组成,用作不同视图的显示;是 iOS 的推荐组件。

规则

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

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

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

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

代码演示

基本

  1. import { SegmentedControl, WingBlank } from 'antd-mobile';
  2. class SegmentedControlExample extends React.Component {
  3. onChange = (e) => {
  4. console.log(`selectedIndex:${e.nativeEvent.selectedSegmentIndex}`);
  5. }
  6. onValueChange = (value) => {
  7. console.log(value);
  8. }
  9. render() {
  10. return (
  11. <WingBlank size="lg" className="sc-example">
  12. <p className="sub-title">Simplest</p>
  13. <SegmentedControl values={['Segment1', 'Segment2']} />
  14. <p className="sub-title">Disabled</p>
  15. <SegmentedControl values={['Segment1', 'Segment2']} disabled />
  16. <p className="sub-title">SelectedIndex</p>
  17. <SegmentedControl selectedIndex={1} values={['Segment1', 'Segment2', 'Segment3']} />
  18. <p className="sub-title">TintColor</p>
  19. <SegmentedControl
  20. values={['Segment1', 'Segment2', 'Segment3']}
  21. tintColor={'#ff0000'}
  22. style={{ height: '40px', width: '250px' }}
  23. />
  24. <p className="sub-title">onChange/onValueChange</p>
  25. <SegmentedControl
  26. values={['Segment1', 'Segment2', 'Segment3']}
  27. onChange={this.onChange}
  28. onValueChange={this.onValueChange}
  29. />
  30. </WingBlank>
  31. );
  32. }
  33. }
  34. ReactDOM.render(<SegmentedControlExample />, mountNode);
  1. .sc-example {
  2. padding-bottom: 13px;
  3. }
  4. .sub-title {
  5. color: #888;
  6. font-size: 14px;
  7. padding: 30px 0 18px 0;
  8. margin: 0;
  9. }

SegmentedControl分段器 - 图1

API

属性说明类型默认值
prefixCls样式前缀Stringam-segment
className样式类String
style自定义样式Object{}
tintColor组件主色调String#2DB7F5
disabled是否启用Booleanfalse
selectedIndex选中项在数组中的索引Number0
values选项数组,值是字符串array[]
onChange回调函数, 其中e.nativeEvent.selectedSegmentIndex是选中项索引, e.nativeEvent.value是选中的值.(e): voidfunction(){}
onValueChange回调函数(val): voidfunction(){}