Action Sheet React 组件

Action Sheet 是一个向上滑动的面板，用于向用户展示一组关于如何继续执行给定任务的选项。您也可以使用操作表来提示用户确认一个潜在的危险操作。操作表包含一个可选的标题和一个或多个按钮，每个按钮都对应一个要执行的操作。

Action Sheet React 组件表示Action Sheet组件。

Action Sheet 组件

包含以下组件：

Actions- 操作表元素
ActionsGroup- 操作表按钮组
ActionsButton- 操作表按钮
ActionsLabel- 操作表标签

Action Sheet 属性

属性	类型	默认	描述
<Actions> 属性
opened	布尔值	false	允许打开/关闭 Action Sheet 并设置其初始状态
网格	布尔值	false	启用网格按钮布局
convertToPopover	布尔值		当启用时，操作表将在大屏幕上转换为 Popover。默认继承相同的应用参数值
forceToPopover	布尔值		当启用时，操作表将始终转换为 Popover。默认继承相同的应用参数值
target	HTMLElement 字符串		目标元素的 HTML 元素或字符串 CSS 选择器。在转换为 Popover 时需要
背景遮罩	布尔值		启用操作表背景（背后的深色半透明层）。默认继承相同的应用参数值`true`)
backdropUnique	布尔值		如果启用，它将为该模态创建唯一的背景元素
backdropEl	字符串对象		自定义背景元素的HTML元素或字符串CSS选择器
closeByBackdropClick	布尔值	true	当启用时，操作表将在背景点击时关闭。默认继承相同的应用参数值
closeByOutsideClick	布尔值	false	当启用时，操作表将在点击其外部时关闭。默认继承相同的应用参数值
closeOnEscape	布尔值		当启用时，操作表将在按 ESC 键盘键时关闭
animate	布尔值		模态是否应该以动画方式打开/关闭
containerEl	HTMLElement 字符串		模态挂载到的元素（默认为应用根元素）
<ActionsLabel> 属性
strong	布尔值	false	定义标签文本是否加粗
<ActionsButton> 属性
strong	布尔值	false	定义按钮文本是否加粗
close	布尔值	true	按钮点击时是否关闭 Action Sheet

Action Sheet 事件

事件	描述
<Actions> 事件
actionsOpen	当 Action Sheet 开始打开动画时将触发事件
actionsOpened	当 Action Sheet 完成打开动画后触发事件
actionsClose	当 Action Sheet 开始关闭动画时触发事件
actionsClosed	当 Action Sheet 完成关闭动画后触发事件

打开和关闭 Action Sheet

除了 Action Sheet open()/close() 方法外，您还可以通过以下方式打开和关闭它：

使用Action Sheet API
通过将其true或false传递给其openedprop

示例

action-sheet.jsx

import React, { useRef, useState, useEffect } from 'react';
import {
  Navbar,
  Page,
  BlockTitle,
  Block,
  Button,
  Actions,
  ActionsGroup,
  ActionsLabel,
  ActionsButton,
  f7,
} from 'framework7-react';

export default () => {
  const actionsToPopover = useRef(null);
  const buttonToPopoverWrapper = useRef(null);
  const [actionsOneGroupOpened, setActionsOneGroupOpened] = useState(false);
  const [actionsGridOpened, setActionsGridOpened] = useState(false);

  useEffect(() => {
    return () => {
      if (actionsToPopover.current) {
        actionsToPopover.current.destroy();
      }
    };
  }, []);

  const openActionsPopover = () => {
    if (!actionsToPopover.current) {
      actionsToPopover.current = f7.actions.create({
        buttons: [
          {
            text: 'Do something',
            label: true,
          },
          {
            text: 'Button 1',
            strong: true,
          },
          {
            text: 'Button 2',
          },
          {
            text: 'Cancel',
            color: 'red',
          },
        ],
        // Need to specify popover target
        targetEl: buttonToPopoverWrapper.current.querySelector('.button-to-popover'),
      });
    }

    // Open
    actionsToPopover.current.open();
  };

  return (
    <Page>
      <Navbar title="Action Sheet"></Navbar>
      <Block strong inset>
        <p className="grid grid-cols-2 grid-gap">
          {/* One group, open by changing actionsOneGroupOpened property */}
          <Button fill onClick={() => setActionsOneGroupOpened(true)}>
            One group
          </Button>
          {/*  Two groups, open by "actionsOpen" attribute */}
          <Button fill actionsOpen="#actions-two-groups">
            Two groups
          </Button>
        </p>
        <p>
          {/* Actions Grid, open by changing actionsGridOpened property */}
          <Button fill onClick={() => setActionsGridOpened(true)}>
            Action Grid
          </Button>
        </p>
      </Block>

      <BlockTitle>Action Sheet To Popover</BlockTitle>
      <Block strong inset>
        <p ref={buttonToPopoverWrapper}>
          Action Sheet can be automatically converted to Popover (for tablets). This button will
          open Popover on tablets and Action Sheet on phones:
          <Button
            style={{ display: 'inline-block' }}
            className="button-to-popover"
            onClick={openActionsPopover}
          >
            Actions
          </Button>
        </p>
      </Block>

      {/* One Group */}
      <Actions
        opened={actionsOneGroupOpened}
        onActionsClosed={() => setActionsOneGroupOpened(false)}
      >
        <ActionsGroup>
          <ActionsLabel>Do something</ActionsLabel>
          <ActionsButton strong>Button 1</ActionsButton>
          <ActionsButton>Button 2</ActionsButton>
          <ActionsButton color="red">Cancel</ActionsButton>
        </ActionsGroup>
      </Actions>

      {/* Two Groups */}
      <Actions id="actions-two-groups">
        <ActionsGroup>
          <ActionsLabel>Do something</ActionsLabel>
          <ActionsButton strong>Button 1</ActionsButton>
          <ActionsButton>Button 2</ActionsButton>
        </ActionsGroup>
        <ActionsGroup>
          <ActionsButton color="red">Cancel</ActionsButton>
        </ActionsGroup>
      </Actions>

      {/* Grid */}
      <Actions
        grid={true}
        opened={actionsGridOpened}
        onActionsClosed={() => setActionsGridOpened(false)}
      >
        <ActionsGroup>
          <ActionsButton>
            <img
              slot="media"
              src="https://cdn.framework7.io/placeholder/people-96x96-1.jpg"
              width="48"
              style={{ maxWidth: '100%', borderRadius: '8px' }}
            />
            <span>Button 1</span>
          </ActionsButton>
          <ActionsButton>
            <img
              slot="media"
              src="https://cdn.framework7.io/placeholder/people-96x96-2.jpg"
              width="48"
              style={{ maxWidth: '100%', borderRadius: '8px' }}
            />
            <span>Button 2</span>
          </ActionsButton>
          <ActionsButton>
            <img
              slot="media"
              src="https://cdn.framework7.io/placeholder/people-96x96-3.jpg"
              width="48"
              style={{ maxWidth: '100%', borderRadius: '8px' }}
            />
            <span>Button 3</span>
          </ActionsButton>
        </ActionsGroup>
        <ActionsGroup>
          <ActionsButton>
            <img
              slot="media"
              src="https://cdn.framework7.io/placeholder/fashion-96x96-4.jpg"
              width="48"
              style={{ maxWidth: '100%', borderRadius: '8px' }}
            />
            <span>Button 4</span>
          </ActionsButton>
          <ActionsButton>
            <img
              slot="media"
              src="https://cdn.framework7.io/placeholder/fashion-96x96-5.jpg"
              width="48"
              style={{ maxWidth: '100%', borderRadius: '8px' }}
            />
            <span>Button 5</span>
          </ActionsButton>
          <ActionsButton>
            <img
              slot="media"
              src="https://cdn.framework7.io/placeholder/fashion-96x96-6.jpg"
              width="48"
              style={{ maxWidth: '100%', borderRadius: '8px' }}
            />
            <span>Button 6</span>
          </ActionsButton>
        </ActionsGroup>
      </Actions>
    </Page>
  );
};

改进此文档

在本页上

Action Sheet 组件
Action Sheet 属性
Action Sheet 事件
打开和关闭 Action Sheet
示例