@ray-js/components-ty-popup v1.0.4

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>
  );
}