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

# @ray-js/components-ty-popup

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

> 弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。

为了提供更优质的开发体验和更强大的功能支持，我们建议您从当前组件切换到全新的 [SmartUI 组件库](https://developer.tuya.com/material/smartui?comId=help-getting-started)，其中内置了 `Popup` 组件。SmartUI 不仅处于积极维护状态，还为小程序开发提供了诸多优势：

- **跨平台预览**：轻松查看组件在不同平台上的表现，确保一致性和高质量。
- **在线编辑**：通过 Codesandbox 实现实时在线编辑和预览，加速开发流程，提升效率。

## 安装

```sh
$ npm install @ray-js/components-ty-popup
// 或者
$ yarn add @ray-js/components-ty-popup
```

## 使用

### 基本使用

```tsx
import React, { useState } from 'react';
import Popup from '@ray-js/components-ty-popup';
import { View, Button } from '@ray-js/ray';

export default function Demo() {
  const [show, setShow] = useState(false);

  return (
    <View>
      <Popup
        show={show}
        onClickOverlay={() => setShow(false)}
        position="bottom"
        round
        customStyle={{
          height: '30%',
          width: '100%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        Content
      </Popup>
      <Button type="primary" onClick={() => setShow(true)}>
        显示 Popup
      </Button>
    </View>
  );
}
```