弹出层 React 组件
弹出层是以 App 主要内容为背景弹出的，包含任意 HTML 内容的弹出式窗口。弹出层如同所有其他覆盖层之一，是所谓“临时视图”的一部分。
弹出层 React 组件表示 弹出层 组件。
弹出层组件
包括以下组件
Popup- 弹出层元素
弹出层属性
| 属性 | 类型 | 说明 |
|---|---|---|
| <Popup> 属性 | ||
| tabletFullscreen | 布尔值 | 定义弹出层在平板电脑上是否应全屏显示 |
| opened | 布尔值 | 允许打开/关闭弹出窗口并设置其初始状态 |
| backdrop | 布尔值 | 启用弹出窗口背景（后面的深色半透明层）。默认情况下，继承相同的应用程序参数值（true） |
| backdropEl | 字符串 对象 | HTML 元素或自定义背景元素的字符串 CSS 选择器 |
| backdropUnique | 布尔值 | 如果启用，则为该模式创建独有且专用的背景元素 |
| closeByBackdropClick | 布尔值 | 如果启用，则在单击背景时关闭弹出窗口。默认情况下，继承相同应用程序参数值（true） |
| closeOnEscape | 布尔值 | 如果启用，则在按下 ESC 键盘键时关闭弹出窗口 |
| animate | 布尔值 | 弹出窗口是否应该使用动画打开/关闭。可以在 .open() 和 .close() 方法中覆盖。默认情况下，继承相同应用程序参数值（true） |
| swipeToClose | 布尔值 字符串 | 弹出窗口是否可以使用滑动手势关闭。可以为 true 以允许通过向上和向下滑动关闭弹出窗口，也可以为 to-top（字符串）以仅允许向上滑动关闭弹出窗口，或为 to-bottom（字符串）以仅允许向下滑动关闭弹出窗口。 |
| swipeHandler | HTMLElement 字符串 | 如果没有传递，则可以滑动整个弹出窗口以关闭。可以在此传递 HTML 元素或用作滑动目标的自定义元素的字符串 CSS 选择器。（还必须启用 swipeToClose） |
| push | 布尔值 | 在打开时，启用后它将突出显示后面的视图。仅在顶部安全区域就位时才有效。还可通过将 popup-push 类添加到 Popup 元素来启用它。 |
| containerEl | HTMLElement 字符串 | 将模式安装到的元素（默认为应用程序根元素） |
弹出窗口事件
| 事件 | 说明 |
|---|---|
| <Popup> 事件 | |
| popupOpen | 当弹出窗口开始打开动画时触发该事件 |
| popupOpened | 弹出窗口完成其打开动画后触发该事件 |
| popupClose | 当弹出窗口开始关闭动画时触发该事件 |
| popupClosed | 弹出窗口完成其关闭动画后触发该事件 |
| popupSwipeStart | 在滑动关闭交互开始时触发该事件（当用户刚开始拖动弹出窗口时） |
| popupSwipeMove | 在滑动关闭移动交互时触发该事件 |
| popupSwipeEnd | 在滑动关闭释放时触发该事件 |
| popupSwipeClose | 当使用滑动关闭弹出窗口时触发该事件 |
打开和关闭弹出窗口
可以通过以下方式控制弹出窗口状态、打开和关闭它
示例
popup.jsx
import React, { useRef, useState } from 'react';
import {
Navbar,
Page,
Popup,
BlockTitle,
Block,
NavRight,
Link,
Button,
View,
f7,
} from 'framework7-react';
export default () => {
const [popupOpened, setPopupOpened] = useState(false);
const popup = useRef(null);
const createPopup = () => {
// Create popup
if (!popup.current) {
popup.current = f7.popup.create({
content: `
<div class="popup">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="navbar-bg"></div>
<div class="title">Dynamic Popup</div>
<div class="right"><a class="link popup-close">Close</a></div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>This popup was created dynamically</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>
</div>
</div>
</div>
</div>
`.trim(),
});
}
// Open it
popup.current.open();
};
const onPageBeforeRemove = () => {
// Destroy popup when page removed
if (popup.current) popup.current.destroy();
};
return (
<Page onPageBeforeRemove={onPageBeforeRemove}>
<Navbar title="Popup"></Navbar>
<Block strongIos outlineIos>
<p>
Popup is a modal window with any HTML content that pops up over App's main content. Popup
as all other overlays is part of so called "Temporary Views".
</p>
<p>
<Button fill popupOpen=".demo-popup">
Open Popup
</Button>
</p>
<p>
<Button fill onClick={() => setPopupOpened(true)}>
Open Via Prop Change
</Button>
</p>
<p>
<Button fill onClick={createPopup}>
Create Dynamic Popup
</Button>
</p>
</Block>
<BlockTitle>Swipe To Close</BlockTitle>
<Block strongIos outlineIos>
<p>Popup can be closed with swipe to top or bottom:</p>
<p>
<Button fill popupOpen=".demo-popup-swipe">
Swipe To Close
</Button>
</p>
<p>
Or it can be closed with swipe on special swipe handler and, for example, only to bottom:
</p>
<p>
<Button fill popupOpen=".demo-popup-swipe-handler">
With Swipe Handler
</Button>
</p>
</Block>
<BlockTitle>Push View</BlockTitle>
<Block strongIos outlineIos>
<p>
Popup can push view behind. By default has effect only when `safe-area-inset-top` is more
than zero (iOS fullscreen webapp or iOS cordova app)
</p>
<p>
<Button fill popupOpen=".demo-popup-push">
Popup Push
</Button>
</p>
</Block>
<Popup
className="demo-popup"
opened={popupOpened}
onPopupClosed={() => setPopupOpened(false)}
>
<Page>
<Navbar title="Popup Title">
<NavRight>
<Link popupClose>Close</Link>
</NavRight>
</Navbar>
<Block>
<p>
Here comes popup. You can put here anything, even independent view with its own
navigation. Also not, that by default popup looks a bit different on iPhone/iPod and
iPad, on iPhone it is fullscreen.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris
leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac
urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia
venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros.
Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra
pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero
mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor.
Suspendisse a faucibus lectus.
</p>
<p>
Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl
ut lorem semper pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed
quam. Nam risus libero, auctor vel tristique ac, malesuada ut ante. Sed molestie, est
in eleifend sagittis, leo tortor ullamcorper erat, at vulputate eros sapien nec
libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit in
iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus.
Vestibulum nunc eros, convallis blandit dui sit amet, gravida adipiscing libero.
</p>
</Block>
</Page>
</Popup>
<Popup push className="demo-popup-push">
<View>
<Page>
<Navbar title="Push Popup" large transparent>
<NavRight>
<Link popupClose>Close</Link>
</NavRight>
</Navbar>
<Block>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris
leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac
urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam
lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit
eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat
nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque
sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed
porttitor. Suspendisse a faucibus lectus.
</p>
<p>
Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit
nisl ut lorem semper pharetra. Nullam tortor nibh, suscipit in consequat vel,
feugiat sed quam. Nam risus libero, auctor vel tristique ac, malesuada ut ante. Sed
molestie, est in eleifend sagittis, leo tortor ullamcorper erat, at vulputate eros
sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem,
suscipit in iaculis id, pharetra at urna. Pellentesque tempor congue massa quis
faucibus. Vestibulum nunc eros, convallis blandit dui sit amet, gravida adipiscing
libero.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris
leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac
urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam
lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit
eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat
nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque
sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed
porttitor. Suspendisse a faucibus lectus.
</p>
</Block>
</Page>
</View>
</Popup>
<Popup className="demo-popup-swipe" swipeToClose>
<Page>
<Navbar title="Swipe To Close">
<NavRight>
<Link popupClose>Close</Link>
</NavRight>
</Navbar>
<div
style={{ height: '100%' }}
className="display-flex justify-content-center align-items-center"
>
<p>Swipe me up or down</p>
</div>
</Page>
</Popup>
<Popup
className="demo-popup-swipe-handler"
swipeToClose="to-bottom"
swipeHandler=".swipe-handler"
>
<Page>
<div slot="fixed" className="swipe-handler"></div>
<BlockTitle large>Hello!</BlockTitle>
<Block strongIos outlineIos>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris
leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac
urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia
venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros.
Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra
pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero
mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor.
Suspendisse a faucibus lectus.
</p>
<p>
Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl
ut lorem semper pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed
quam. Nam risus libero, auctor vel tristique ac, malesuada ut ante. Sed molestie, est
in eleifend sagittis, leo tortor ullamcorper erat, at vulputate eros sapien nec
libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit in
iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus.
Vestibulum nunc eros, convallis blandit dui sit amet, gravida adipiscing libero.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris
leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac
urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia
venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros.
Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra
pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero
mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor.
Suspendisse a faucibus lectus.
</p>
<p>
Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl
ut lorem semper pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed
quam. Nam risus libero, auctor vel tristique ac, malesuada ut ante. Sed molestie, est
in eleifend sagittis, leo tortor ullamcorper erat, at vulputate eros sapien nec
libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit in
iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus.
Vestibulum nunc eros, convallis blandit dui sit amet, gravida adipiscing libero.
</p>
</Block>
</Page>
</Popup>
</Page>
);
};