操作表 React 组件

操作表是一个向上滑动的面板，用于向用户呈现一组选择，以确定如何继续执行给定任务。您还可以使用操作表提示用户确认可能存在危险的操作。操作表包含一个可选的标题和一个或多个按钮，每个按钮对应一个要执行的操作。

操作表 React 组件代表操作表组件。

操作表组件

包含以下组件

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

操作表属性

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

操作表事件

事件	描述
<Actions> 事件
actionsOpen	操作表开始其打开动画时将触发该事件
actionsOpened	操作表完成其打开动画后将触发该事件
actionsClose	操作表开始其关闭动画时将触发该事件
actionsClosed	操作表完成其关闭动画后将触发该事件

打开和关闭操作表

除了操作表 open()/close() 方法之外，您还可以打开和关闭它

使用操作表 API
将 true 或 false 传递给它的 opened 属性

示例

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>
  );
};

改进此文档

在此页面上

操作表组件
操作表属性
操作表事件
打开和关闭操作表
示例