Taro UI

Taro UI is a multi-terminal UI component library based on the Taro framework. It is designed to support running across multiple platforms, including WeChat Mini Programs, H5, Baidu Mini Programs, and React Native.

Key features include:

• Multi-terminal adaptation: A single set of components works across various platforms.
• Rich component library: Provides a wide range of basic components covering most functional requirements.
• On-demand loading: Supports importing individual components to minimize project bundle size.
• Multiple themes: Includes a default blue theme, a red theme, and support for custom themes to meet different visual requirements.

The project is undergoing a major modernization effort. Key milestones include:

• v3.3.x (Foundation & Stabilize): Monorepo restructuring, CSS pre-compilation, and experimental Taro v4 validation.
• v3.4.0 (Modernization): Migration of high-frequency components (e.g., AtButton, AtInput, AtModal, AtToast) from Class Components to Function Components with Hooks. Removal of PropTypes in favor of pure TypeScript types.
• v3.5.0 (Completion): Full migration of all components to Function Components and upgrading the styling system from SCSS @import to @use/@forward.
• v4.0.0 (Major): Official Taro v4 support, potential introduction of i18n, dark mode (CSS Variables), and new components like Skeleton and Watermark.

To use the AtRange component, ensure taro-ui is at version v1.5.0 or higher. Import the component directly from taro-ui.

If you are using on-demand style imports (Sass), you must also import the component's specific style file.

To use the AtAvatar component in a Taro project, import it from taro-ui. If you are using on-demand style imports, you must also import the component's SCSS file.

import { AtAvatar } from 'taro-ui'

@import '~taro-ui/dist/style/components/avatar.scss';

If you are using on-demand loading for styles, import the specific SCSS file for the Card component:

@import 'taro-ui/dist/style/components/card.scss';

If you are using SCSS and want to reduce bundle size by importing only the necessary styles for the Slider component, use the following import statement:

@import 'taro-ui/dist/style/components/slider.scss';

If you are using on-demand loading (按需加载), import the specific SCSS files for toast and icon to ensure the component renders correctly.

@import 'taro-ui/dist/style/components/toast.scss';
@import 'taro-ui/dist/style/components/icon.scss';

To use the AtFloatLayout component, import it from the taro-ui package. This component is used to create floating layers/overlays.

import { AtFloatLayout } from 'taro-ui'

If you are using on-demand style loading, import the specific SCSS file for the Checkbox component to ensure styles are applied correctly.

@import 'taro-ui/dist/style/components/checkbox.scss';

To use the styles for the AtPagination component, import the specific SCSS file in your stylesheet:

@import 'taro-ui/dist/style/components/pagination.scss';