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

アクションシートは、ユーザーに特定のタスクの処理方法に関する複数の選択肢を提供するためのスライドアップパネルです。危険な可能性のある操作を確認するようユーザーに促す場合にも、アクションシートを使用できます。アクションシートには、オプションのタイトルと1つ以上のボタンが含まれており、各ボタンは実行するアクションに対応しています。

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

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

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

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

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

プロパティ	型	デフォルト	説明
<Actions> プロパティ
opened	boolean	false	アクションシートを開閉し、初期状態を設定できます。
grid	boolean	false	グリッドボタンレイアウトを有効にします。
convertToPopover	boolean		有効にすると、大画面でアクションシートがポップオーバーに変換されます。デフォルトでは、同じアプリのパラメーター値を継承します。
forceToPopover	boolean		有効にすると、アクションシートは常にポップオーバーに変換されます。デフォルトでは、同じアプリのパラメーター値を継承します。
target	HTMLElement string		ターゲット要素のHTML要素または文字列CSSセレクター。ポップオーバーへの変換を使用する場合は必須です。
backdrop	boolean		アクションシートのバックドロップ（背後の暗い半透明レイヤー）を有効にします。デフォルトでは、同じアプリのパラメーター値（`true`）を継承します。
backdropEl	string object		カスタムバックドロップ要素のHTML要素または文字列CSSセレクター。
backdropUnique	boolean		有効にすると、このモーダル専用の独自のバックドロップ要素が作成されます。
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を渡すことによっても開閉できます。

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

コンポーネントの.instance()メソッドを呼び出すことで、初期化されたアクションシートインスタンスにアクセスできます。例：

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

<script>
  let component;

  // to get instance in some method
  component.instance()
</script>

例

action-sheet.svelte

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

  let actionsOneGroupOpened = false;
  let actionGridOpened = false;

  let actionsToPopover;
  let buttonToPopoverWrapper;

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

    // Open
    actionsToPopover.open();
  }

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

<!-- svelte-ignore a11y-missing-attribute -->
<Page>
  <Navbar title="Action Sheet" />
  <Block strong inset>
    <p class="grid grid-cols-2 grid-gap">
      <!-- One group, open by direct accessing instance .open() method -->
      <Button
        fill
        onClick={() => {
          actionsOneGroupOpened = 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 actionGridOpened state property -->
      <Button
        fill
        onClick={() => {
          actionGridOpened = true;
        }}
      >
        Action Grid
      </Button>
    </p>
  </Block>

  <BlockTitle>Action Sheet To Popover</BlockTitle>
  <Block strong inset>
    <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 bind:opened={actionsOneGroupOpened}>
    <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} bind:opened={actionGridOpened}>
    <ActionsGroup>
      <ActionsButton>
        <img
          slot="media"
          src="https://cdn.framework7.io/placeholder/people-96x96-1.jpg"
          width="48"
          style="max-width: 100%; border-radius: 8px"
        />
        <span>Button 1</span>
      </ActionsButton>
      <ActionsButton>
        <img
          slot="media"
          src="https://cdn.framework7.io/placeholder/people-96x96-2.jpg"
          width="48"
          style="max-width: 100%; border-radius: 8px"
        />
        <span>Button 2</span>
      </ActionsButton>
      <ActionsButton>
        <img
          slot="media"
          src="https://cdn.framework7.io/placeholder/people-96x96-3.jpg"
          width="48"
          style="max-width: 100%; border-radius: 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="max-width: 100%; border-radius: 8px"
        />
        <span>Button 4</span>
      </ActionsButton>
      <ActionsButton>
        <img
          slot="media"
          src="https://cdn.framework7.io/placeholder/fashion-96x96-5.jpg"
          width="48"
          style="max-width: 100%; border-radius: 8px"
        />
        <span>Button 5</span>
      </ActionsButton>
      <ActionsButton>
        <img
          slot="media"
          src="https://cdn.framework7.io/placeholder/fashion-96x96-6.jpg"
          width="48"
          style="max-width: 100%; border-radius: 8px"
        />
        <span>Button 6</span>
      </ActionsButton>
    </ActionsGroup>
  </Actions>
</Page>

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

このページについて

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