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

アクションシートは、あるタスクをどのように進めるかの選択肢をユーザーに提示するためのスライドアップペインです。また、アクションシートを使用して、危険性のあるアクションの確認をユーザに促すこともできます。アクションシートには、任意のタイトルと1つ以上のボタンが含まれており、それぞれが取るべき行動に対応しています。

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

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

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

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 を渡します。

アクションシートのインスタンスへのアクセス

Action Sheetの初期化されたインスタンスにアクセスするには、.instance()コンポーネントのメソッドを呼び出します。例えば、以下のようになります。

<Actions bind:this={component}>...</Actions>

<script>
  let component;

  // あるメソッドでインスタンスを取得する
  component.instance()
</script>

Examples

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

  <BlockTitle>Action Sheet To Popover</BlockTitle>
  <Block strong>
    <p bind:this={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"
        class="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={() => actionGridOpened = 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>
  

<script>
  import { onDestroy } from 'svelte';
  import { f7, Page, Navbar, Block, BlockTitle, Button, Actions, ActionsGroup, ActionsLabel, ActionsButton } from 'framework7-svelte';

  let actionGridOpened = false;
  let actionsToPopover = null;
  let buttonToPopoverWrapper;

  onDestroy(() => {
    if (actionsToPopover) {
      actionsToPopover.destroy();
    }
  })

  function openActionsPopover() {
    if (!actionsToPopover) {
      actionsToPopover = 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: buttonToPopoverWrapper.querySelector('.button-to-popover'),
      });
    }

    // Open
    actionsToPopover.open();
  }

</script>