赞助商成为赞助商

Sheet Modal React 组件

Sheet Modal 是一种特殊的覆盖类型，类似于 Picker/Calendar 的覆盖。这种模态允许创建带有自定义内容的自定义选择器覆盖。

Sheet Modal React 组件代表 Sheet Modal 组件。

Sheet Modal 组件

以下组件已包含

Sheet Modal 属性

属性类型描述
<Sheet> 属性
position字符串Sheet 位置，可以是 top 或 bottom。默认值为 bottom
top布尔值与 position="top" 相同
bottom布尔值与 position="bottom" 相同
backdrop布尔值启用以在需要时渲染额外的 sheet modal 背景。
backdropEl字符串
对象		自定义背景元素的 HTML 元素或字符串 CSS 选择器。
backdropUnique布尔值如果启用，它将创建专门为此模态的唯一背景元素。
opened布尔值允许打开/关闭 Sheet Modal 并设置其初始状态。
closeByBackdropClick布尔值启用后，点击背景将关闭 sheet。默认情况下，继承相同的应用程序参数值。
closeByOutsideClick布尔值启用后，点击 sheet 外部将关闭 sheet。默认情况下，继承相同的应用程序参数值。
closeOnEscape布尔值启用后，按下 ESC 键将关闭 sheet。
swipeToClose布尔值Sheet 是否可以通过滑动手势关闭。
swipeToStep布尔值启用后，可以将打开的 sheet 分成两种状态：部分打开和完全打开，可以通过滑动来控制。
swipeHandlerHTMLElement
字符串		如果没有传递，则整个 Sheet 可以滑动关闭。您可以在这里传递 HTML 元素或字符串 CSS 选择器，用于自定义元素，该元素将用作滑动目标。（swipeToClose 或 swipeToStep 也必须启用）
push布尔值启用后，它会在打开时将后面的视图推入。仅在顶部安全区域到位时有效。也可以通过向 Sheet 元素添加 sheet-modal-push 类来启用它。
breakpointsnumber[]用它代替 swipeToStep 来启用滑动断点。必须是大于 0 小于 1 的数字数组，其中 0 表示完全关闭，1 表示完全打开，例如 [0.33, 0.66], [0.5] 等。
backdropBreakpoint数字定义背景变得可见时的断点。从 0（理想情况下从 breakpoints 数组的最低（第一个）值开始）到 1（默认 0）。
pushBreakpoint数字定义何时将后面的视图推回的断点（必须启用 push）。从 0（理想情况下从 breakpoints 数组的最低（第一个）值开始）到 1（默认 0）。
animate布尔值模态是否应该以动画形式打开/关闭。
containerElHTMLElement
字符串		将模态安装到的元素（默认情况下为应用程序根元素）。

Sheet Modal 事件

事件描述
<Sheet> 事件
sheetOpen当 Sheet Modal 开始其打开动画时，将触发事件。
sheetOpened当 Sheet Modal 完成其打开动画后，将触发事件。
sheetClose当 Sheet Modal 开始其关闭动画时，将触发事件。
sheetClosed当 Sheet Modal 完成其关闭动画后，将触发事件。
sheetStepOpen当 Sheet 滑动打开/展开时，将触发事件。
sheetStepClose当 Sheet 滑动关闭/折叠时，将触发事件。
sheetStepProgress当 Sheet 滑动在打开和关闭状态之间时，将触发事件。作为第二个参数，它接收步骤打开进度号（从 0 到 1）。
sheetBreakpoint当 Sheet 断点更改时，将触发事件。作为第二个参数，它接收当前断点（从 0 到 1）。

Sheet Modal 插槽

<Sheet> 组件具有用于自定义元素的附加插槽。

<Sheet>
  <span slot="fixed">Fixed slot</span>
  <span slot="static">Static slot</span>
  <span>Default slot</span>
</Sheet>

渲染到

<div class="sheet-modal">
  <span>Fixed slot</span>
  <div class="sheet-modal-inner">
    <span>Default slot</span>
    <span>Static slot</span>
  </div>
</div>

打开和关闭 Sheet Modal

您可以控制 Sheet Modal 状态，打开和关闭它。

示例

sheet-modal.jsx
import React, { useRef, useState } from 'react';
import {
  Page,
  Navbar,
  Sheet,
  PageContent,
  Toolbar,
  BlockTitle,
  Block,
  Button,
  Link,
  List,
  ListItem,
  f7,
} from 'framework7-react';

export default () => {
  const sheet = useRef(null);
  const [sheetOpened, setSheetOpened] = useState(false);

  const toggleSwipeStep = () => {
    f7.sheet.stepToggle('.demo-sheet-swipe-to-step');
  };
  const createSheet = () => {
    const $ = f7.$;
    // Create sheet modal
    if (!sheet.current) {
      sheet.current = f7.sheet.create({
        content: `
          <div class="sheet-modal sheet-modal-bottom">
            <div class="toolbar">
              <div class="toolbar-inner justify-content-flex-end">
                <a  class="link sheet-close">Close</a>
              </div>
            </div>
            <div class="sheet-modal-inner">
              <div class="page-content">
                <div class="block">
                  <p>This sheet modal 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(),
      });
    }
    // Close inline sheet
    if ($('.demo-sheet.modal-in').length > 0) f7.sheet.close('.demo-sheet');
    // Open it
    sheet.current.open();
  };
  const onPageBeforeOut = () => {
    // Close opened sheets on page out
    f7.sheet.close();
  };
  const onPageBeforeRemove = () => {
    // Destroy sheet modal when page removed
    if (sheet.current) sheet.current.destroy();
  };

  return (
    <Page onPageBeforeOut={onPageBeforeOut} onPageBeforeRemove={onPageBeforeRemove}>
      <Navbar title="Sheet Modal"></Navbar>
      <Block strongIos outlineIos>
        <p>
          Sheet Modals slide up from the bottom of the screen to reveal more content. Such modals
          allow to create custom overlays with custom content.
        </p>
        <p className="grid grid-cols-2 grid-gap">
          <Button fill sheetOpen=".demo-sheet">
            Open Sheet
          </Button>
          <Button fill onClick={createSheet}>
            Dynamic Sheet
          </Button>
        </p>
        <p>
          <Button fill sheetOpen=".demo-sheet-top">
            Top Sheet
          </Button>
        </p>
        <p>
          <Button
            fill
            onClick={() => {
              setSheetOpened(true);
            }}
          >
            Open Via Prop Change
          </Button>
        </p>
      </Block>

      <BlockTitle>Push View</BlockTitle>
      <Block strongIos outlineIos>
        <p>
          Sheet can push view behind on open. By default it has effect only when
          `safe-area-inset-top` is more than zero (iOS fullscreen webapp or iOS cordova app)
        </p>
        <p>
          <Button fill sheetOpen=".demo-sheet-push">
            Sheet Push
          </Button>
        </p>
      </Block>

      <BlockTitle>Swipeable Sheet</BlockTitle>
      <Block strongIos outlineIos>
        <p>
          Sheet modal can be closed with swipe to top (for top Sheet) or bottom (for default Bottom
          sheet):
        </p>
        <p>
          <Button fill sheetOpen=".demo-sheet-swipe-to-close">
            Swipe To Close
          </Button>
        </p>
        <p>Also there is swipe-step that can be set on Sheet modal to expand it with swipe:</p>
        <p>
          <Button fill sheetOpen=".demo-sheet-swipe-to-step">
            Swipe To Step
          </Button>
        </p>
        <p>
          In addition to "swipe step" there is a support for position breakpoints (multiple steps):
        </p>
        <p>
          <Button fill sheetOpen=".demo-sheet-breakpoints">
            Breakpoints
          </Button>
        </p>
      </Block>

      <Sheet
        className="demo-sheet"
        opened={sheetOpened}
        onSheetClosed={() => {
          setSheetOpened(false);
        }}
      >
        <Toolbar>
          <div className="left"></div>
          <div className="right">
            <Link sheetClose>Close</Link>
          </div>
        </Toolbar>
        {/*  Scrollable sheet content */}
        <PageContent>
          <Block>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ducimus dolorum ipsa
              aliquid accusamus perferendis laboriosam delectus numquam minima animi, libero illo in
              tempora harum sequi corporis alias ex adipisci.
            </p>
            <p>
              Sunt magni enim saepe quasi aspernatur delectus consectetur fugiat necessitatibus qui
              sed, similique quis facere tempora, laudantium quae expedita ea, aperiam dolores. Aut
              deserunt soluta alias magnam. Consequatur, nisi, enim.
            </p>
            <p>
              Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis
              voluptatibus similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae
              adipisci vel voluptatum, autem libero minus dignissimos repellat.
            </p>
            <p>
              Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam
              expedita sapiente ut cum reprehenderit aliquid odio amet praesentium vero temporibus
              obcaecati beatae aspernatur incidunt, perferendis voluptates doloribus?
            </p>
            <p>
              Illum id laborum tempore, doloribus culpa labore ex iusto odit. Quibusdam consequuntur
              totam nam obcaecati, enim cumque nobis, accusamus, quos voluptates, voluptatibus
              sapiente repellendus nesciunt praesentium velit ipsa illo iusto.
            </p>
          </Block>
        </PageContent>
      </Sheet>

      <Sheet top className="demo-sheet-top">
        <Toolbar bottom>
          <div className="left"></div>
          <div className="right">
            <Link sheetClose>Close</Link>
          </div>
        </Toolbar>
        {/*  Scrollable sheet content */}
        <PageContent>
          <Block>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ducimus dolorum ipsa
              aliquid accusamus perferendis laboriosam delectus numquam minima animi, libero illo in
              tempora harum sequi corporis alias ex adipisci.
            </p>
            <p>
              Sunt magni enim saepe quasi aspernatur delectus consectetur fugiat necessitatibus qui
              sed, similique quis facere tempora, laudantium quae expedita ea, aperiam dolores. Aut
              deserunt soluta alias magnam. Consequatur, nisi, enim.
            </p>
            <p>
              Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis
              voluptatibus similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae
              adipisci vel voluptatum, autem libero minus dignissimos repellat.
            </p>
            <p>
              Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam
              expedita sapiente ut cum reprehenderit aliquid odio amet praesentium vero temporibus
              obcaecati beatae aspernatur incidunt, perferendis voluptates doloribus?
            </p>
            <p>
              Illum id laborum tempore, doloribus culpa labore ex iusto odit. Quibusdam consequuntur
              totam nam obcaecati, enim cumque nobis, accusamus, quos voluptates, voluptatibus
              sapiente repellendus nesciunt praesentium velit ipsa illo iusto.
            </p>
          </Block>
        </PageContent>
      </Sheet>

      <Sheet className="demo-sheet-push" push>
        <Toolbar>
          <div className="left"></div>
          <div className="right">
            <Link sheetClose>Close</Link>
          </div>
        </Toolbar>
        <PageContent>
          <Block>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ducimus dolorum ipsa
              aliquid accusamus perferendis laboriosam delectus numquam minima animi, libero illo in
              tempora harum sequi corporis alias ex adipisci.
            </p>
            <p>
              Sunt magni enim saepe quasi aspernatur delectus consectetur fugiat necessitatibus qui
              sed, similique quis facere tempora, laudantium quae expedita ea, aperiam dolores. Aut
              deserunt soluta alias magnam. Consequatur, nisi, enim.
            </p>
            <p>
              Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis
              voluptatibus similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae
              adipisci vel voluptatum, autem libero minus dignissimos repellat.
            </p>
            <p>
              Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam
              expedita sapiente ut cum reprehenderit aliquid odio amet praesentium vero temporibus
              obcaecati beatae aspernatur incidunt, perferendis voluptates doloribus?
            </p>
            <p>
              Illum id laborum tempore, doloribus culpa labore ex iusto odit. Quibusdam consequuntur
              totam nam obcaecati, enim cumque nobis, accusamus, quos voluptates, voluptatibus
              sapiente repellendus nesciunt praesentium velit ipsa illo iusto.
            </p>
          </Block>
        </PageContent>
      </Sheet>

      <Sheet
        className="demo-sheet-swipe-to-close"
        style={{ height: 'auto' }}
        swipeToClose
        push
        backdrop
      >
        <div className="swipe-handler"></div>

        <PageContent>
          <BlockTitle large>Hello!</BlockTitle>
          <Block>
            <p>
              Eaque maiores ducimus, impedit unde culpa qui, explicabo accusamus, non vero corporis
              voluptatibus similique odit ab. Quaerat quasi consectetur quidem libero? Repudiandae
              adipisci vel voluptatum, autem libero minus dignissimos repellat.
            </p>
            <p>
              Iusto, est corrupti! Totam minus voluptas natus esse possimus nobis, delectus veniam
              expedita sapiente ut cum reprehenderit aliquid odio amet praesentium vero temporibus
              obcaecati beatae aspernatur incidunt, perferendis voluptates doloribus?
            </p>
          </Block>
        </PageContent>
      </Sheet>

      <Sheet
        className="demo-sheet-swipe-to-step"
        style={{ height: 'auto' }}
        swipeToClose
        swipeToStep
        push
        backdrop
      >
        <div className="swipe-handler" onClick={() => toggleSwipeStep()}></div>
        <div className="sheet-modal-swipe-step">
          <div className="display-flex padding justify-content-space-between align-items-center">
            <div style={{ fontSize: '18px' }}>
              <b>Total:</b>
            </div>
            <div style={{ fontSize: '22px' }}>
              <b>$500</b>
            </div>
          </div>
          <div className="padding-horizontal padding-bottom">
            <Button large fill>
              Make Payment
            </Button>
            <div className="margin-top text-align-center">Swipe up for more details</div>
          </div>
        </div>
        <BlockTitle medium className="margin-top">
          Your order:
        </BlockTitle>
        <List>
          <ListItem title="Item 1">
            <b slot="after">$200</b>
          </ListItem>
          <ListItem title="Item 2">
            <b slot="after">$180</b>
          </ListItem>
          <ListItem title="Delivery">
            <b slot="after">$120</b>
          </ListItem>
        </List>
      </Sheet>

      <Sheet
        className="demo-sheet-breakpoints"
        style={{ height: 'auto' }}
        swipeToClose
        breakpoints={[0.33, 0.66]}
        backdrop
        backdropBreakpoint={0.66}
        push
        pushBreakpoint={0.66}
      >
        <div className="swipe-handler" style={{ backgroundColor: 'transparent' }}></div>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            height: '20vh',
          }}
        >
          Section 1
        </div>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            height: '20vh',
          }}
        >
          Section 2
        </div>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            height: '20vh',
          }}
        >
          Section 3
        </div>
      </Sheet>
    </Page>
  );
};
改进此文档
在此页面上