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

# @ray-js/components-ty

[![latest](https://img.shields.io/npm/v/@ray-js/components-ty/latest.svg)](https://www.npmjs.com/package/@ray-js/components-ty) [![download](https://img.shields.io/npm/dt/@ray-js/components-ty.svg)](https://www.npmjs.com/package/@ray-js/components-ty)

> 涂鸦风格跨端组件库

To provide a superior development experience and more powerful feature support, we recommend switching from the current extension component library to the new [SmartUI Component Library](https://developer.tuya.com/material/smartui?comId=help-getting-started). SmartUI is not only actively maintained but also offers numerous advantages for MiniApp development:

- **Cross-Platform Preview**: Easily view the performance of components across different platforms to ensure consistency and high quality.
- **Online Editing**: Achieve real-time online editing and preview through Codesandbox, accelerating the development process and enhancing efficiency.

## Installation

```sh
$ npm install @ray-js/components-ty
// or
$ yarn add @ray-js/components-ty
```

## Usage

<!--START_SECTION:txp-usage-->
```ts
import { TyDialog, TyTypography, TyAlert, TyPicker, TyTimePicker, TySwipeout, TyInput, TyActionsheet, TyCell, TyPopover, TySlider, TySwitch, TyProgressBar, TyProgressCircle } from '@ray-js/components-ty';
```
<!--END_SECTION:txp-usage-->

**Note:** Some components have child components or methods that need to be invoked through static properties or static methods，e.g. `TyDialog.useDialog`、`TyPopover.Item`、`TyCell.Item`.

## Design

See [MiniProgram UI Specification](https://www.figma.com/file/z6TDUyCo2Q6ov9nhh3guSd/%E5%B0%8F%E7%A8%8B%E5%BA%8FUI%E8%A7%84%E8%8C%83%E5%92%8C%E7%BB%84%E4%BB%B6?node-id=1%3A2483)