Stepper

Stepper UI提供与WeLink规范一致的视图

参数说明

CellBody

TabSelection

TabSelectionItem

效果示例

import React from 'react';

import {
  TabSelection, TabSelectionItem, Cells, Cell, CellBody 
} from '@wecode/react-weui';

export default class TabSelectionDemo extends React.Component {
  state = {
    typeH: 'horizontal',
    typeV: 'vertical',
    tab: 0,
    data: [
      { label: 'Small', tab: 0 },
      { label: 'Default', tab: 1 },
      { label: 'Large', tab: 2 },
      { label: 'Large2', tab: 3 }
    ]
  };

  render() {
    const {
      tab, data, typeH, typeV 
    } = this.state;
    return (
      <section>
        <Cells>
          <Cell list>
            <CellBody tabselection_multipline>左右结构单行</CellBody>
            <TabSelection type={typeH}>
              {data.map((item, index) => (
                <TabSelectionItem
                  key={index}
                  active={tab === item.tab}
                  label={item.label}
                  onClick={e => this.setState({ tab: item.tab })}
                />
              ))}
            </TabSelection>
          </Cell>
          <Cell list>
            <CellBody tabselection_multipline>
              左右结构多行左右结构多行左右结构多行左右结构多行左右结构多行
            </CellBody>
            <TabSelection type={typeH}>
              {data.map((item, index) => (
                <TabSelectionItem
                  key={index}
                  active={tab === item.tab}
                  label={item.label}
                  onClick={e => this.setState({ tab: item.tab })}
                />
              ))}
            </TabSelection>
          </Cell>
          <Cell list vertical>
            <CellBody tabselection_multipline>上下结构单行</CellBody>
            <TabSelection type={typeV} vertical>
              {data.map((item, index) => (
                <TabSelectionItem
                  key={index}
                  active={tab === item.tab}
                  label={item.label}
                  vertical
                  onClick={e => this.setState({ tab: item.tab })}
                />
              ))}
            </TabSelection>
          </Cell>
          <Cell list vertical>
            <CellBody tabselection_multipline>
              上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行上下结构多行
            </CellBody>
            <TabSelection type={typeV} vertical>
              {data.map((item, index) => (
                <TabSelectionItem
                  key={index}
                  active={tab === item.tab}
                  label={item.label}
                  vertical
                  onClick={e => this.setState({ tab: item.tab })}
                />
              ))}
            </TabSelection>
          </Cell>
        </Cells>
      </section>
    );
  }
}