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

アクションシートは、与えられたタスクをどのように進めるか、一連の選択肢をユーザーに提示するためのスライドアップペインです。また、アクションシートを使用して、潜在的に危険なアクションを確認するようユーザーに促すこともできます。アクションシートには、任意のタイトルと1つまたは複数のボタンが含まれ、それぞれが取るべき行動に対応します。

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

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

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

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

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

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

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

Event	Description
<Actions> events
actionsOpen	アクションシートがオープニングアニメーションを開始するとイベントが発生する
actionsOpened	アクションシートのオープニングアニメーションが完了するとイベントが発生します。
actionsClose	アクションシートが閉じるアニメーションを開始するとイベントが発生する
actionsClosed	イベントはアクションシートが閉じるアニメーションを完了した後に発生します。

アクションシートのオープンとクローズ

Action Sheetのopen()/close()メソッドに加えて、Action Sheetを開いたり閉じたりすることができます。

アクションシートAPIを使って
の opened プロパティーに true または false を渡します。

Examples

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

export default () => {
  const [actionGridOpened, setActionGridOpened] = useState(false);
  const actionsToPopover = useRef(null);

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

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

  return (
    
      
    <Page>
      <Navbar title="Action Sheet" />
      <Block strong>
        <p className="row">
          {/* One group, open by "actionsOpen" attribute */}
          <Button className="col" raised actionsOpen="#actions-one-group">
            One group
          </Button>
          {/*  Two groups, open by "actionsOpen" attribute */}
          <Button className="col" raised actionsOpen="#actions-two-groups">
            Two groups
          </Button>
        </p>
        <p>
          {/* Actions Grid, open by changing actionGridOpened state property */}
          <Button raised onClick={() => setActionGridOpened(true)}>
            Action Grid
          </Button>
        </p>
      </Block>

      <BlockTitle>Action Sheet To Popover</BlockTitle>
      <Block strong>
        <p>
          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 id="actions-one-group">
        <ActionsGroup>
          <ActionsLabel>Do something</ActionsLabel>
          <ActionsButton bold>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 bold>Button 1</ActionsButton>
          <ActionsButton>Button 2</ActionsButton>
        </ActionsGroup>
        <ActionsGroup>
          <ActionsButton color="red">Cancel</ActionsButton>
        </ActionsGroup>
      </Actions>

      {/* Grid */}
      <Actions
        grid={true}
        opened={actionGridOpened}
        onActionsClosed={() => setActionGridOpened(false)}
      >
        <ActionsGroup>
          <ActionsButton>
            <img
              slot="media"
              src="https://cdn.framework7.io/placeholder/people-96x96-1.jpg"
              width="48"
            />
            <span>Button 1</span>
          </ActionsButton>
          <ActionsButton>
            <img
              slot="media"
              src="https://cdn.framework7.io/placeholder/people-96x96-2.jpg"
              width="48"
            />
            <span>Button 2</span>
          </ActionsButton>
          <ActionsButton>
            <img
              slot="media"
              src="https://cdn.framework7.io/placeholder/people-96x96-3.jpg"
              width="48"
            />
            <span>Button 3</span>
          </ActionsButton>
        </ActionsGroup>
        <ActionsGroup>
          <ActionsButton>
            <img
              slot="media"
              src="https://cdn.framework7.io/placeholder/fashion-96x96-4.jpg"
              width="48"
            />
            <span>Button 4</span>
          </ActionsButton>
          <ActionsButton>
            <img
              slot="media"
              src="https://cdn.framework7.io/placeholder/fashion-96x96-5.jpg"
              width="48"
            />
            <span>Button 5</span>
          </ActionsButton>
          <ActionsButton>
            <img
              slot="media"
              src="https://cdn.framework7.io/placeholder/fashion-96x96-6.jpg"
              width="48"
            />
            <span>Button 6</span>
          </ActionsButton>
        </ActionsGroup>
      </Actions>
    </Page>
      
    
  );
};