Steps.mdx

title
Steps 步骤条

示例

import { Steps } from '@tarojsx/ui'; import { UI } from '@/ui';

const Demo = () => {
  const [current, setCurrent] = React.useState(0);
  const onChange = React.useCallback((index) => {
    setCurrent(index);
  }, []);
  return (
    <Steps
      items={[
        { title: '选购' },
        {
          title: '确认',
          desc: '这里是额外的信息，最多两行',
          icon: {
            value: 'shopping-cart',
            activeColor: '#fff',
            inactiveColor: '#78A4FA',
            size: '14',
          },
        },
        {
          title: '支付',
          icon: {
            value: 'credit-card',
            activeColor: '#fff',
            inactiveColor: '#78A4FA',
            size: '14',
          },
        },
        {
          title: '完成',
          status: 'success',
        },
      ]}
      current={current}
      onChange={onChange}
    />
  );
};

{() => { const [current, setCurrent] = React.useState(0); const onChange = React.useCallback((index) => { setCurrent(index); }, []); return ( ); }}

API

• Taro UI 文档
• <Steps />
• StepsProps