English | 简体中文
@ray-js/components-ty-popup
弹出层容器,用于展示弹窗、信息提示等内容,支持多个弹出层叠加展示。
Installation
$ npm install @ray-js/components-ty-popup
# or
$ yarn add @ray-js/components-ty-popup
Usage
import Foo from '@ray-js/components-ty-popup';
export default () => <Foo />;
Basic Usage
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)}>
Show Popup
</Button>
</View>
);
}