Sheet Modal React 组件

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

Sheet Modal 组件表示表格模态组件。

Sheet Modal组件

包含以下组件：

Sheet Modal属性

属性类型描述
<Sheet>属性
位置字符串Sheet位置，可以是top或bottom.默认是bottom
顶部布尔值与position="top"
底部相同布尔值与position="bottom"
背景遮罩布尔值在需要时启用渲染额外的Sheet Modal背景遮罩
backdropEl字符串
对象		自定义背景元素的HTML元素或字符串CSS选择器
backdropUnique布尔值如果启用，它将为该模态创建唯一的背景元素
opened布尔值允许打开/关闭Sheet Modal并设置其初始状态
closeByBackdropClick布尔值当启用时，点击背景遮罩将关闭Sheet。默认继承相同的应用参数值
closeByOutsideClick布尔值当启用时，点击其外部将关闭Sheet。默认继承相同的应用参数值
closeOnEscape布尔值当启用时，按下ESC键盘键将关闭Sheet
swipeToClose布尔值Sheet是否可以用滑动手势关闭
swipeToStep布尔值当启用时，可以将其分为两种状态：部分打开和完全打开，可以通过滑动控制
swipeHandlerHTMLElement
字符串		如果未传递，则整个Sheet都可以滑动关闭。您可以在此处传递HTML元素或字符串CSS选择器，该元素将用作滑动目标。（必须启用）swipeToClose或swipeToSteppush
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开始其打开动画时将触发事件
sheetOpenedSheet Modal完成其打开动画后触发事件
sheetClose当Sheet Modal开始其关闭动画时将触发事件
sheetClosedSheet 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>
  );
};
改进此文档
在本页上
无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗