彈出式視窗 React 元件
彈出式視窗是一個包含任何 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 類別新增到彈出視窗元素來啟用。 |
| 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>
);
};