@antmjs/vantui/types/steps.d.ts

一套适用于Taro3及React的vantui组件库

import { FunctionComponent } from 'react'
import { ViewProps, ITouchEvent } from '@tarojs/components'

export interface Step {
  index?: number
  /**
   * @description 描述信息
   */
  desc: React.ReactNode
  /**
   * @description 步骤名称
   */
  text: string
  /**
   * @description 激活图标
   */
  activeIcon?: string
  /**
   * @description 未激活图标
   */
  inactiveIcon?: string
}

export interface StepsProps extends ViewProps {
  /**
   * @description icon统一class的前缀
   */
  iconClassPrefix?: string
  /**
   * @description 	Step 配置项数组
   */
  steps?: Step[]
  /**
   * @description 	自定义 Step 渲染
   */
  renderStep?: (step: Step) => React.ReactNode
  /**
   * @description 	当前步骤
   * @default 0
   */
  active?: number
  /**
   * @description 	 显示方向
   * @default `horizontal`
   */
  direction?: 'horizontal' | 'vertical'
  /**
   * @description 	 激活颜色
   * @default `#07c160`
   */
  activeColor?: string
  /**
   * @description 	 未激活颜色
   * @default `#969799`
   */
  inactiveColor?: string
  /**
   * @description 	 激活图标
   * @default `#checked`
   */
  activeIcon?: string
  /**
   * @description 	 未激活图标
   * @default `#checked`
   */
  inactiveIcon?: string
  /**
   * @description 	 点击步骤时触发的事件，event.detail当前步骤的索引
   */
  onClickStep?: (event: ITouchEvent & { detail: number }) => void
}

declare const Steps: FunctionComponent<StepsProps>

export { Steps }