English | 简体中文

@ray-js/components-ty-popup

Popup container for displaying modals, information prompts, and other content. It supports stacking multiple popups for display.

To provide a better development experience and more powerful features, we recommend switching from the current component to the new SmartUI Component Library, which includes a built-in Popup component. SmartUI is not only actively maintained but also offers numerous advantages for applet development:

• Cross-Platform Preview: Easily view component performance 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 improving efficiency.

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