Popover 气泡卡片
点击/鼠标移入元素,弹出气泡式的卡片浮层。
import { Popover } from 'uiw';
// or
import Popover from '@uiw/react-popover';
基础用法
最简单的用法。
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 (
<Row style={{ alignItems: 'center' }}>
<Popover
trigger="click"
placement="top"
isOpen={this.state.isOpen}
onVisibleChange={this.handleVisibleChange.bind(this, 'isOpen')}
content={
<Card bordered={false} title="Card标题" extra={<a href="#">更多</a>} style={{ width: 200 }}>
<div>Are you sure you want to delete these items? You won't be able to recover them.</div>
<div style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}>
<Button size="small" onClick={this.onClick.bind(this, 'isOpen')}>
Cancel
</Button>
<Button type="danger" size="small" onClick={this.onClick.bind(this, 'isOpen')}>
Delete
</Button>
</div>
</Card>
}
>
<Button active={this.state.isOpen}>弹出目标</Button>
</Popover>
<div style={{ marginLeft: 20 }}>
<Popover
trigger="click"
placement="top"
isOpen={this.state.isOpen1}
onVisibleChange={this.handleVisibleChange.bind(this, 'isOpen1')}
content={
<Card bordered={false} title="Card标题" extra={<a href="#">更多</a>} style={{ width: 200 }}>
<div>Are you sure you want to delete these items? You won't be able to recover them.</div>
<div style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}>
<Button size="small" onClick={this.onClick.bind(this, 'isOpen1')}>
Cancel
</Button>
<Button type="danger" size="small" onClick={this.onClick.bind(this, 'isOpen1')}>
Delete
</Button>
</div>
</Card>
}
>
<div>
<Icon type="setting" color="#343a40" style={{ fontSize: 20 }} />
</div>
</Popover>
</div>
</Row>
)
}
}
export default Demo;
位置
位置有 12
个方向,根据 placement
参数来设置。
import React from 'react';
import { Popover, Card, Button } from 'uiw';
const btnStl = {position: 'relative', width: 70 }
const content = (
<Card bordered={false} style={{ width: 120 }}>
<div>Are you sure you want to delete these items? You won't be able to recover them.</div>
</Card>
)
export default function Demo() {
return (
<div>
<div style={{ position: 'relative' }}>
<Popover trigger="click" placement="topLeft" content={content}>
<Button style={{ ...btnStl, left: 70 }}>TL</Button>
</Popover>
<Popover trigger="click" placement="top" content={content}>
<Button style={{ ...btnStl, left: 70}}>Top</Button>
</Popover>
<Popover trigger="click" placement="topRight" content={content}>
<Button style={{ ...btnStl, left: 70 }}>TR</Button>
</Popover>
</div>
<div style={{ position: 'relative', paddingTop: 10 }}>
<Popover trigger="click" placement="leftTop" content={content}>
<Button style={{ ...btnStl }}>LT</Button>
</Popover>
<Popover trigger="click" placement="rightTop" content={content}>
<Button style={{ ...btnStl, left: 216 }}>RT</Button>
</Popover>
</div>
<div style={{ position: 'relative', paddingTop: 10 }}>
<Popover trigger="click" placement="left" content={content}>
<Button style={{ ...btnStl }}>Left</Button>
</Popover>
<Popover trigger="click" placement="right" content={content}>
<Button style={{ ...btnStl, left: 216 }}>Right</Button>
</Popover>
</div>
<div style={{ position: 'relative', paddingTop: 10 }}>
<Popover trigger="click" placement="leftBottom" content={content}>
<Button style={{ ...btnStl }}>LB</Button>
</Popover>
<Popover trigger="click" placement="rightBottom" content={content}>
<Button style={{ ...btnStl, left: 216 }}>RB</Button>
</Popover>
</div>
<div style={{ position: 'relative', paddingTop: 10 }}>
<Popover trigger="click" placement="bottomLeft" content={content}>
<Button style={{ ...btnStl, left: 70 }}>BL</Button>
</Popover>
<Popover trigger="click" placement="bottom" content={content}>
<Button style={{ ...btnStl, left: 70 }}>Bottom</Button>
</Popover>
<Popover trigger="click" placement="bottomRight" content={content}>
<Button style={{ ...btnStl, left: 70 }}>BR</Button>
</Popover>
</div>
</div>
);
}
鼠标经过弹出目标
import React from 'react';
import { Popover, Card, Button } from 'uiw';
const btnStl = {position: 'relative', width: 70 }
const content = (
<Card
style={{ width: 220 }}
bordered={false}
title="Card标题"
footer={
<span>这里是页脚</span>
}
>
<div>这是你鼠标经过弹出的目标。</div>
</Card>
)
export default function Demo() {
return (
<div>
<Popover trigger="hover" placement="top" content={content}>
<Button>鼠标经过弹出目标</Button>
</Popover>
</div>
)
}
焦点展示
通过设置 trigger="focus"
让 Input
组件在获取焦点的时候展示 Popover
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 (
<Card
style={{ width: 220 }}
bordered={false}
footer={
<div style={{ display: "flex", justifyContent: "flex-end" }}>
<Button size="small" onClick={this.onClick.bind(this, undefined)}>
取消
</Button>
<Button size="small" onClick={this.onClick.bind(this, null)}>
清空
</Button>
<Button type="success" size="small" onClick={this.onClick.bind(this, '这是向 Input 输入框插入的内容')}>
插入内容
</Button>
</div>
}
>
<div>通过设置 `trigger="focus"` 让 `Input` 组件在获取焦点的时候展示 `Popover`</div>
</Card>
)
}
render() {
return (
<div>
<div style={{ width: 200 }}>
<Popover
trigger="focus"
placement="top"
isOpen={this.state.isOpen}
onVisibleChange={this.handleVisibleChange.bind(this)}
content={this.renderPopup()}
>
<Input placeholder="请输入内容" value={this.state.value} onChange={this.onChange.bind(this)}/>
</Popover>
</div>
</div>
)
}
}
export default Demo;
usePortal
设置 usePortal={false}
将模态对话框生成到根节点的里面,这样为了计算位置准确,你需要将父层样式设为 position: relative;
。
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 (
<div>
<div style={{ position: 'relative' }}>
<Popover
trigger="click"
placement="right"
usePortal={false}
isOpen={this.state.isOpen}
onVisibleChange={this.handleVisibleChange.bind(this)}
content={
<Card bordered={false} title="Card标题" extra={<a href="#">更多</a>} style={{ width: 200 }}>
<div>Are you sure you want to delete these items? You won't be able to recover them.</div>
<div style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}>
<Button size="small" onClick={this.onClick.bind(this)}>
Cancel
</Button>
<Button type="danger" size="small" onClick={this.onClick.bind(this)}>
Delete
</Button>
</div>
</Card>
}
>
<Button>弹出目标</Button>
</Popover>
</div>
</div>
)
}
}
export default Demo;
Confirm 用法
import React from 'react';
import { Popover, Row } from 'uiw';
class Demo extends React.Component {
render() {
return (
<Row style={{ alignItems: 'center' }}>
<Popover.Confirm title="Are you sure delete this?">delete</Popover.Confirm>
</Row>
)
}
}
export default Demo;
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
content | 显示的内容 | String,React.ReactNode | - |
placement | 气泡框位置,可现实箭头在不同的方位 | Enum{top , topLeft , topRight ,left , leftTop , leftBottom ,right , rightTop , rightBottom ,bottom , bottomLeft , bottomRight } |
top |
visibleArrow | 是否显示箭头 | Boolean | true |
delay | 延迟进入和消失,{ show: 2000, hide: 4000 } 或者直接设置 2000 ,只对 trigger=hover 有效,继承 <OverlayTrigger /> 组件属性 |
Object/Number | - |
trigger | 悬停/点击弹出窗口,继承 <OverlayTrigger /> 组件属性 |
Enum{hover , click , focus } |
hover |
disabled | 是否禁用弹出目标 | Boolean | false |
isOpen | 默认是否显示弹窗,继承 <OverlayTrigger /> 组件属性 |
Boolean | false |
autoAdjustOverflow | 弹出层被遮挡时自动调整位置,继承 <OverlayTrigger /> 组件属性 |
Boolean | false |
onVisibleChange | 显示隐藏的回调,继承 <OverlayTrigger /> 组件属性 |
Function(isVisible:bool) | - |
Confirm Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
trigger | 悬停/点击弹出窗口,继承 <OverlayTrigger /> 组件属性 |
Enum{hover , click , focus } |
hover |
placement | 气泡框位置,可现实箭头在不同的方位 | Enum{top , topLeft , topRight ,left , leftTop , leftBottom ,right , rightTop , rightBottom ,bottom , bottomLeft , bottomRight } |
top |
visibleArrow | 是否显示箭头 | Boolean | true |
children | 子元素 | React.ReactNode | - |
onConfirm | 确定方法 | ()=>void | |
confirmText | 确定按钮文本 | string | Yes |
title | 标题信息 | React.ReactNode | - |
cancelText | 取消按钮文本 | string | No |
更多属性请参考 OverlayTrigger。