@antmjs/vantui

@antmjs/vantui is a UI component library developed based on Youzan's VantWeapp. It is designed to support Taro and React environments, allowing developers to use Vant-style components in cross-platform mobile applications.

Key Features

• High Consistency: Maintains 99% of the original style files and most JS logic from VantWeapp to ensure a familiar API and UI.
• TypeScript Support: Written in TypeScript with full type definitions provided.
• Cross-Platform: Supports Taro targets including H5, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program. (Note: React Native is not supported).
• Rich Component Set: Includes over 50 high-quality components covering mainstream mobile scenarios.
• Customization: Supports theme customization and on-demand loading (tree shaking).

The Picker component is a selector used for choosing values from a list. It supports single-column selection and multi-column linkage (cascading). It can be used in two modes:

• normal: The standard flat list display.
• content: Displays the currently selected content; clicking it opens the picker.

Common use cases include:

• Basic usage: Simple list selection.
• Complex data: Using valueKey to specify the text field and idKey for the actual value.
• Multi-column linkage: Using syncColumns for asynchronous data fetching between columns (only supported in content mode).
• Disabled options: Passing objects with a disabled: true property to prevent selection.

The TreeSelect component allows users to select items from a hierarchical, tree-structured dataset. It is designed for category selection or navigating through related data sets.

import { TreeSelect } from '@antmjs/vantui'

The Dialog component is a modal popup used for message alerts, confirmations, or specific interactive operations within the current page. It supports two usage patterns: functional calls (calling a function to trigger the dialog) and component calls (using the component directly in your template/JSX).

Important Version Note:

• In versions below 1.8.0, clicking the cancel button triggers the catch block of the returned Promise.
• In versions 1.8.0 and later, clicking the cancel button triggers the then block. You must check the returned value (which will be 'confirm' or 'cancel') to determine the user's action.

import { Dialog } from '@antmjs/vantui'

The Table component is a lightweight table component designed for Taro projects. It supports features such as custom styling, custom sorting, server-side sorting, and fixed columns.

import { Table } from '@antmjs/vantui'

The Stepper component consists of increment and decrement buttons and an input field. It is used to input or adjust numeric values within a specified range.

import { Stepper } from '@antmjs/vantui'

The Form component is used for data entry and validation. It supports various input types such as text inputs, switches, and file uploads. It also supports custom components for flexible form building.

import { Form, FormItem } from '@antmjs/vantui'

The TreeSelect component allows users to select items from a hierarchical structure. It features a two-pane layout: a left-side navigation menu and a right-side content area displaying items. It supports both single-selection and multi-selection modes based on how the activeId prop is provided.

<TreeSelect
  items={items}
  mainActiveIndex={state.mainActiveIndex}
  activeId={state.activeId}
  onClickNav={onClickNav}
  onClickItem={onClickItem}
/>

The DatetimePicker component is used for selecting time, supporting various dimensions such as date, hours, and minutes. It is typically used in conjunction with a Popup component to create a time-selection dialog.

Note on Version 3.5+ Behavior: Due to the introduction of mode='content' in the underlying picker, DatetimePicker has been adapted. In this mode, onInput is triggered upon confirmation, and the value can support string formats. For the standard flat mode, onConfirm outputs values in the YYYY-MM-DD HH:mm:ss format. You can use the formatValue prop to modify this output (e.g., to return a timestamp instead).

import { DatetimePicker } from '@antmjs/vantui'