動作表單 React 元件

動作表單是一個滑動式面板，用於向使用者提供一組替代方案，說明如何執行特定任務。您也可以使用動作表單提示使用者確認可能有害的動作。動作表單包含一個選用的標題和一個或多個按鈕，每個按鈕都對應於要執行的動作。

動作表單 React 元件代表動作表單元件。

動作表單元件

包含以下元件

Actions - 動作表單元件
ActionsGroup - 動作表單按鈕群組
ActionsButton - 動作表單按鈕
ActionsLabel - 動作表單標籤

動作表單屬性

屬性	類型	預設值	說明
<Actions> 屬性
opened	布林值	false	允許開啟/關閉動作表單並設定其初始狀態
grid	布林值	false	啟用格狀按鈕配置
convertToPopover	布林值		啟用時，動作表單會在大型螢幕上轉換為浮動視窗。預設繼承相同的應用程式參數值
forceToPopover	布林值		啟用時，動作表單會永遠轉換為浮動視窗。預設繼承相同的應用程式參數值
target	HTMLElement 字串		目標元素的 HTML 元素或字串 CSS 選擇器。在使用轉換為浮動視窗時需要
backdrop	布林值		啟用動作表單背景（背後深色半透明圖層）。預設繼承相同的應用程式參數值（`true`）
backdropUnique	布林值		啟用時，會為此模式建立獨特的背景元素
backdropEl	字串物件		自訂背景元素的 HTML 元素或字串 CSS 選擇器
closeByBackdropClick	布林值	true	啟用時，動作表單會在背景按一下時關閉。預設繼承相同的應用程式參數值
closeByOutsideClick	布林值	false	啟用時，動作表單會在按一下其外部時關閉。預設繼承相同的應用程式參數值
closeOnEscape	布林值		啟用時，動作表單會在按下 ESC 鍵盤按鍵時關閉
animate	布林值		模式是否應以動畫開啟/關閉
containerEl	HTMLElement 字串		要將模式掛載到的元素（預設為應用程式根元素）
<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>
  );
};

改善此文件

在此頁面

動作表單元件
動作表單屬性
動作表單事件
開啟和關閉動作表單
範例