アクションシート React コンポーネント

アクションシートは、特定のタスクをどのように進めるかについて、ユーザーに一連の選択肢を提示するためのスライドアップペインです。アクションシートを使用して、潜在的に危険なアクションを確認するようにユーザーに促すこともできます。アクションシートには、オプションのタイトルと、実行するアクションに対応する1つ以上のボタンが含まれています。

アクションシートReactコンポーネントは、アクションシートコンポーネントを表します。

アクションシートコンポーネント

以下のコンポーネントが含まれています

Actions - アクションシート要素
ActionsGroup - アクションシートボタンのグループ
ActionsButton - アクションシートボタン
ActionsLabel - アクションシートラベル

アクションシートプロパティ

プロパティ	タイプ	デフォルト	説明
<Actions> プロパティ
opened	boolean	false	アクションシートを開閉したり、初期状態を設定したりできます
grid	boolean	false	グリッドボタンレイアウトを有効にします
convertToPopover	boolean		有効にすると、アクションシートは大きな画面でポップオーバーに変換されます。デフォルトでは、同じアプリのパラメーター値を継承します
forceToPopover	boolean		有効にすると、アクションシートは常にポップオーバーに変換されます。デフォルトでは、同じアプリのパラメーター値を継承します
target	HTMLElement string		ターゲット要素のHTML要素または文字列CSSセレクター。ポップオーバーへの変換を使用する場合は必須
backdrop	boolean		アクションシートの背景（背後の暗い半透明のレイヤー）を有効にします。デフォルトでは、同じアプリのパラメーター値（`true`）を継承します
backdropUnique	boolean		有効にすると、このモーダルのための専用のユニークな背景要素を作成します
backdropEl	string object		カスタム背景要素のHTML要素または文字列CSSセレクター
closeByBackdropClick	boolean	true	有効にすると、背景をクリックするとアクションシートが閉じられます。デフォルトでは、同じアプリのパラメーター値を継承します
closeByOutsideClick	boolean	false	有効にすると、アクションシートの外側をクリックすると閉じられます。デフォルトでは、同じアプリのパラメーター値を継承します
closeOnEscape	boolean		有効にすると、ESCキーを押すとアクションシートが閉じられます
animate	boolean		モーダルをアニメーション付きで開閉するかどうか
containerEl	HTMLElement string		モーダルをマウントする要素（デフォルトはアプリのルート要素）
<ActionsLabel> プロパティ
strong	boolean	false	ラベルテキストを太字にするかどうかを定義します
<ActionsButton> プロパティ
strong	boolean	false	ボタンテキストを太字にするかどうかを定義します
close	boolean	true	ボタンをクリックしたときにアクションシートを閉じるかどうか

アクションシートイベント

イベント	説明
<Actions> イベント
actionsOpen	アクションシートが開くアニメーションを開始するときにイベントがトリガーされます
actionsOpened	アクションシートが開くアニメーションが完了した後にイベントがトリガーされます
actionsClose	アクションシートが閉じるアニメーションを開始するときにイベントがトリガーされます
actionsClosed	アクションシートが閉じるアニメーションが完了した後にイベントがトリガーされます

アクションシートを開閉する

アクションシートの open（）/close（）メソッドに加えて、開閉することもできます。

アクションシートAPIを使用する
openedプロパティにtrueまたはfalseを渡すことで

例

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

このドキュメントを改善する

このページについて

アクションシートコンポーネント
アクションシートプロパティ
アクションシートイベント
アクションシートを開閉する
例