vantui

import { Button, Cell, Toast } from '@antmjs/vantui'

// 组件 Props 类型完整导出
import type { ButtonProps } from '@antmjs/vantui'

const props: ButtonProps = {
  type: 'primary',
  size: 'small',
  loading: false,
  onClick: (e) => console.log('clicked', e)
}

# npm
npm install @antmjs/vantui

# pnpm
pnpm add @antmjs/vantui

module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      ts: true,
      compiler: 'webpack5'
    }]
  ],
  plugins: [
    [
      'import',
      {
        libraryName: '@antmjs/vantui',
        libraryDirectory: 'es',
        style: () => false  // 样式已内联
      },
      '@antmjs/vantui'
    ]
  ]
}

import { Component } from 'react'
import { View } from '@tarojs/components'
import { Button, Cell, CellGroup, Toast } from '@antmjs/vantui'

export default class Index extends Component {
  state = {
    show: false
  }

  showToast = () => {
    this.setState({ show: true })
  }

  render() {
    const { show } = this.state
    return (
      <View className="page">
        <CellGroup title="基础示例">
          <Cell title="单元格" value="内容" />
          <Cell title="单元格" value="内容" label="描述信息" border />
        </CellGroup>

        <View style={{ padding: '16px' }}>
          <Button
            type="primary"
            block
            onClick={this.showToast}
          >
            显示 Toast
          </Button>
        </View>

        <Toast
          visible={show}
          message="操作成功"
          duration={2000}
          onClose={() => this.setState({ show: false })}
        />
      </View>
    )
  }
}

import { useState } from 'react'
import { Button, Dialog } from '@antmjs/vantui'

export default function MyPage() {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <Button type="danger" onClick={() => setVisible(true)}>
        删除
      </Button>
      <Dialog
        visible={visible}
        title="确认删除"
        message="删除后不可恢复，确定继续吗？"
        showCancelButton
        onConfirm={() => {
          // 执行删除逻辑
          setVisible(false)
        }}
        onCancel={() => setVisible(false)}
      />
    </>
  )
}

import { ConfigProvider } from '@antmjs/vantui'

// CSS 变量定制
const themeVars = {
  buttonPrimaryBackgroundColor: '#07c160',
  buttonPrimaryBorderColor: '#07c160',
  cellBackgroundColor: '#f7f8fa'
}

export default function App({ children }) {
  return (
    <ConfigProvider themeVars={themeVars}>
      {children}
    </ConfigProvider>
  )
}