@ray-js/components-ty-popover v0.1.0

English | 简体中文

@ray-js/components-ty-popover

涂鸦风格气泡卡片组件

Installation

$ npm install @ray-js/components-ty-popover
# or
$ yarn add @ray-js/components-ty-popover

Usage

Basic Usage

import React from 'react';
import Popover from '@ray-js/components-ty-popover';

const [visibleBase, setVisibleBase] = React.useState(false);

const contentBase = (
  <View>
    <Text style={{ fontSize: '30rpx' }}>Hi!</Text>
  </View>
);

const handleClickBase = () => {
  setVisibleBase(!visibleBase);
};

<Popover visible={visibleBase} content={contentBase} placement="right">
  <View className={styles.demoBtn} onClick={handleClickBase}>
    右侧
  </View>
</Popover>;

PopoverItem-Without Icon

import React from 'react';
import Popover from '@ray-js/components-ty-popover';

const [visibleItem, setVisibleItem] = React.useState(false);

const handleClickItem = () => {
  setVisibleItem(!visibleItem);
};

const contentItem = (
  <View>
    <Popover.Item onItemClick={handleTap} text="文案一" />
    <Popover.Item disabled text="文案二" />
    <Popover.Item text="文案三" />
  </View>
);

<Popover visible={visibleItem} content={contentItem} placement="bottom-left">
  <View className={styles.demoBtn} onClick={handleClickItem}>
    无图标
  </View>
</Popover>