弹出式 Svelte 组件
弹出窗口是一个包含任何 HTML 内容的弹出窗口，它会弹出到应用程序的主内容之上。弹出窗口与所有其他叠加层一样，是所谓的“临时视图”的一部分。
弹出式 Svelte 组件表示 弹出窗口 组件。
弹出式组件
包含以下组件
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 | 当弹出窗口通过滑动关闭时触发事件 |
打开和关闭弹出窗口
您可以使用以下方法控制弹出窗口状态，打开和关闭它
访问弹出窗口实例
您可以通过调用 .instance() 组件的方法来访问初始化的弹出窗口实例。例如
<Popup bind:this={component}>...</Popup>
<script>
let component;
// to get instance in some method
component.instance()
</script>
示例
popup.svelte
<script>
import {
f7,
Navbar,
Page,
Popup,
BlockTitle,
Block,
NavRight,
Link,
Button,
View,
} from 'framework7-svelte';
let popupOpened = false;
let dynamicPopup;
function createPopup() {
// Create popup
if (!dynamicPopup) {
dynamicPopup = 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
dynamicPopup.open();
}
function onPageBeforeRemove() {
// Destroy popup when page removed
if (dynamicPopup) dynamicPopup.destroy();
}
</script>
<Page {onPageBeforeRemove}>
<Navbar title="Popup" />
<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={() => (popupOpened = 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 class="demo-popup" opened={popupOpened} onPopupClosed={() => (popupOpened = 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 class="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 class="demo-popup-swipe" swipeToClose>
<Page>
<Navbar title="Swipe To Close">
<NavRight>
<Link popupClose>Close</Link>
</NavRight>
</Navbar>
<div style="height: 100%" class="display-flex justify-content-center align-items-center">
<p>Swipe me up or down</p>
</div>
</Page>
</Popup>
<Popup class="demo-popup-swipe-handler" swipeToClose="to-bottom" swipeHandler=".swipe-handler">
<Page>
<div slot="fixed" class="swipe-handler" />
<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>