贊助商成為贊助商

動作表 Svelte 組件

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

動作表 Svelte 組件代表 動作表 組件。

動作表單元件

包含下列元件

動作表單屬性

屬性類型預設值說明
<Actions> 屬性
opened布林值false允許開啟/關閉動作表單並設定其初始狀態
grid布林值false啟用網格按鈕版面配置
convertToPopover布林值啟用時，動作表單將在大螢幕上轉換為彈出視窗。預設繼承相同的應用程式參數值
forceToPopover布林值啟用時，動作表單將始終轉換為彈出視窗。預設繼承相同的應用程式參數值
targetHTMLElement
字串		目標元素的 HTML 元素或字串 CSS 選擇器。在使用轉換為彈出視窗時需要
backdrop布林值啟用動作表單背景（深色半透明圖層）。預設繼承相同的應用程式參數值 (true)
backdropEl字串
物件		自訂背景元素的 HTML 元素或字串 CSS 選擇器
backdropUnique布林值啟用時，會為此模式建立獨特的背景元素
closeByBackdropClick布林值true啟用時，動作表單將在背景按一下時關閉。預設繼承相同的應用程式參數值
closeByOutsideClick布林值false啟用時，動作表單將在按一下其外部時關閉。預設繼承相同的應用程式參數值
closeOnEscape布林值啟用時，動作表單將在按下 ESC 鍵盤按鍵時關閉
animate布林值模式是否應以動畫開啟/關閉
containerElHTMLElement
字串		要將模式掛載到的元素（預設為應用程式根元素）
<ActionsLabel> 屬性
strong布林值false定義標籤文字是否為粗體
<ActionsButton> 屬性
strong布林值false定義按鈕文字是否為粗體
close布林值true動作表單是否應在按一下按鈕時關閉

動作表單事件

事件說明
<Actions> 事件
actionsOpen動作表單開始開啟動畫時，將觸發事件
actionsOpened動作表單完成開啟動畫後，將觸發事件
actionsClose當動作表開始其關閉動畫時，將觸發事件
actionsClosed在動作表完成其關閉動畫後，將觸發事件

開啟和關閉動作表

除了動作表的 open()/close() 方法之外，您還可以開啟和關閉它

存取動作表實例

您可以透過呼叫元件的 .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>
改善此文件
在本頁