Popover component
npm install @uiw/react-popoverPopover 气泡卡片
===
点击/鼠标移入元素，弹出气泡式的卡片浮层。
``jsx`
import { Popover } from 'uiw';
// or
import Popover from '@uiw/react-popover';
最简单的用法。
`jsx mdx:preview&bg=#fff
import React from 'react';
import { Popover, Card, Icon,Row,Col, Button } from 'uiw';
class Demo extends React.Component {
constructor() {
super();
this.state = {
isOpen: false,
isOpen1: false,
}
}
onClick(field) {
this.setState({ [field]: false });
}
handleVisibleChange(field, isOpen) {
this.setState({ [field]:isOpen });
}
render() {
return (
placement="top"
isOpen={this.state.isOpen}
onVisibleChange={this.handleVisibleChange.bind(this, 'isOpen')}
content={
Are you sure you want to delete these items? You won't be able to recover them.
}
>
placement="top"
isOpen={this.state.isOpen1}
onVisibleChange={this.handleVisibleChange.bind(this, 'isOpen1')}
content={
Are you sure you want to delete these items? You won't be able to recover them.
}
>
)
}
}
export default Demo;
`
位置有 12 个方向，根据 placement 参数来设置。
`jsx mdx:preview&bg=#fff
import React from 'react';
import { Popover, Card, Button } from 'uiw';
const btnStl = {position: 'relative', width: 70 }
const content = (
Are you sure you want to delete these items? You won't be able to recover them.
)
export default function Demo() {
return (
$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Popover, Card, Button } from 'uiw';const btnStl = {position: 'relative', width: 70 }
const content = (
bordered={false}
title="Card标题"
footer={
这里是页脚
}
>
这是你鼠标经过弹出的目标。
)
export default function Demo() {
return (
)
}
`$3
通过设置
让 Input 组件在获取焦点的时候展示 Popoverjsx mdx:preview&bg=#fff
import React from 'react';
import { Popover, Card, Button, Input } from 'uiw';const btnStl = {position: 'relative', width: 70 }
class Demo extends React.Component {
constructor() {
super();
this.state = {
isOpen: false,
value: '',
}
}
onClick(val) {
const state = { isOpen: false }
if (val) {
state.value = val;
}
if (val === null) state.value = '';
this.setState({ ...state });
}
handleVisibleChange(isOpen) {
this.setState({ isOpen });
}
onChange(e) {
this.setState({ value: e.target.value });
}
renderPopup() {
return (
bordered={false}
footer={
}
>
通过设置 trigger="focus" 让 Input 组件在获取焦点的时候展示 Popover
)
}
render() {
return (
placement="top"
isOpen={this.state.isOpen}
onVisibleChange={this.handleVisibleChange.bind(this)}
content={this.renderPopup()}
>
)
}
}
export default Demo;
`$3
设置
将模态对话框生成到根节点的里面，这样为了计算位置准确，你需要将父层样式设为 position: relative; 。`jsx mdx:preview&bg=#fff
import React from 'react';
import { Popover, Card, Button } from 'uiw';class Demo extends React.Component {
constructor() {
super();
this.state = {
isOpen: false,
}
}
onClick() {
this.setState({ isOpen: false });
}
handleVisibleChange(isOpen) {
this.setState({ isOpen });
}
render() {
return (
placement="right"
usePortal={false}
isOpen={this.state.isOpen}
onVisibleChange={this.handleVisibleChange.bind(this)}
content={
更多} style={{ width: 200 }}>
Are you sure you want to delete these items? You won't be able to recover them.
}
>
)
}
}
export default Demo;
`$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Popover, Row } from 'uiw';class Demo extends React.Component {
render() {
return (
delete
|
)
}
}
export default Demo;
`Props
| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| content | 显示的内容 | String,React.ReactNode | - |
| placement | 气泡框位置，可现实箭头在不同的方位 | Enum{
, topLeft, topRight,
left, leftTop, leftBottom,
right, rightTop, rightBottom,
bottom, bottomLeft, bottomRight} | top |
| visibleArrow | 是否显示箭头 | Boolean | true |
| delay | 延迟进入和消失，{ show: 2000, hide: 4000 } 或者直接设置 2000，只对 trigger=hover 有效，继承 组件属性 | Object/Number | - |
| trigger| 悬停/点击弹出窗口，继承 组件属性 | Enum{hover, click, focus} | hover |
| disabled | 是否禁用弹出目标 | Boolean | false |
| isOpen | 默认是否显示弹窗，继承 组件属性 | Boolean | false |
| autoAdjustOverflow | 弹出层被遮挡时自动调整位置，继承 组件属性 | Boolean | false |
| onVisibleChange | 显示隐藏的回调，继承 组件属性 | Function(isVisible:bool) | - |Confirm Props
| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| trigger| 悬停/点击弹出窗口，继承
组件属性 | Enum{hover, click, focus} | hover |
| placement | 气泡框位置，可现实箭头在不同的方位 | Enum{top, topLeft, topRight,
left, leftTop, leftBottom,
right, rightTop, rightBottom,
bottom, bottomLeft, bottomRight} | top |
| visibleArrow | 是否显示箭头 | Boolean | true` |
更多属性请参考 OverlayTrigger。