@ray-js/smart-ui/README-zh_CN.md

轻量、可靠的智能小程序 UI 组件库

[English](./README.md) | 简体中文

# @ray-js/smart-ui

## 介绍

`@ray-js/smart-ui` 是一个基于 `Ray` 框架和 `@tuya-miniapp/smart-ui` 的 React 组件库，旨在提供符合智能小程序移动端设计规范的轻量、可靠的 UI 组件。通过结合 `Ray` 的规范适配中间层和内置的完善 TS 类型，我们提供了一整套适用于智能小程序的 React 组件，让开发者能够快速构建符合设计规范的移动端应用。

## 预览

扫描下方智能小程序二维码，体验组件库示例。

<img src="https://images.tuyacn.com/content-platform/hestia/1716260412b7f2ae02271.png" width="200" height="200">

## 使用之前

使用 Smart UI 前，请确保你已经学习过智能小程序官方的 [Ray 开发概述](https://developer.tuya.com/cn/miniapp/develop/ray/guide/overview) 和 [Ray 组件介绍](https://developer.tuya.com/cn/miniapp/develop/ray/framework/component)。

## 安装

```bash
# 通过 yarn 安装（推荐）
yarn add @ray-js/smart-ui

# 通过 npm 安装
npm i @ray-js/smart-ui
```

## 使用组件

以按钮组件为例

```jsx
import { Button } from '@ray-js/smart-ui';

export default function Demo() {
  return <Button type="info">信息按钮</Button>;
}
```

## 动态按需引入（推荐）
考虑到项目的按需引入以及整体体积问题，上面的引入方式会导致部分组件样式文件残留影响打包产物体积，所以我们推荐使用按需引入插件，其会自动将 `import { Button } from '@ray-js/smart-ui';` 引入方式解析成 `import Button from '@ray-js/smart-ui/es/button';`。

1. 环境要求
   * \>= @ray-js/cli@1.7.4
   * esbuild 构建模式 (不支持 webpack 模式)
   * 使用 ESModule import 语法的导入
   * **SmartUI 版本 2.4.0 及以上**

2. 在项目文件 ray.config.ts 内引入 SmartUIAutoImport 即可：
```ts
import { RayConfig } from '@ray-js/types';
import SmartUIAutoImport from '@ray-js/smart-ui/lib/auto-import';

const config: RayConfig = {
  ...
  importTransformer: [SmartUIAutoImport],
};
module.exports = config;
```

## 在开发者工具中预览

```bash
# 安装项目依赖
$ yarn
```

打开 [Tuya MiniApp Tools](https://developer.tuya.com/cn/miniapp/devtools/tools)，把 `example` 目录添加进去就可以预览示例了。

## 基础库版本

@ray-js/smart-ui 从智能小程序基础库 `2.19.0` 版本 `@ray-js/ray@^1.5.1` 及 IDE `0.6.5` 开始提供稳定的支持。

## 开源协议

本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。