Action Sheet Svelte 组件

Action Sheet 是一个向上滑动的面板，用于向用户展示一组关于如何继续执行给定任务的选项。您也可以使用操作表来提示用户确认一个潜在的危险操作。操作表包含一个可选的标题和一个或多个按钮，每个按钮都对应一个要执行的操作。

Action Sheet Svelte 组件表示Action Sheet组件。

Action Sheet 组件

包含以下组件：

Actions- 操作表元素
ActionsGroup- 操作表按钮组
ActionsButton- 操作表按钮
ActionsLabel- 操作表标签

Action Sheet 属性

属性	类型	默认	描述
<Actions> 属性
opened	布尔值	false	允许打开/关闭 Action Sheet 并设置其初始状态
网格	布尔值	false	启用网格按钮布局
convertToPopover	布尔值		当启用时，操作表将在大屏幕上转换为 Popover。默认继承相同的应用参数值
forceToPopover	布尔值		当启用时，操作表将始终转换为 Popover。默认继承相同的应用参数值
target	HTMLElement 字符串		目标元素的 HTML 元素或字符串 CSS 选择器。在转换为 Popover 时需要
背景遮罩	布尔值		启用操作表背景（背后的深色半透明层）。默认继承相同的应用参数值`true`)
backdropEl	字符串对象		自定义背景元素的HTML元素或字符串CSS选择器
backdropUnique	布尔值		如果启用，它将为该模态创建唯一的背景元素
closeByBackdropClick	布尔值	true	当启用时，操作表将在背景点击时关闭。默认继承相同的应用参数值
closeByOutsideClick	布尔值	false	当启用时，操作表将在点击其外部时关闭。默认继承相同的应用参数值
closeOnEscape	布尔值		当启用时，操作表将在按 ESC 键盘键时关闭
animate	布尔值		模态是否应该以动画方式打开/关闭
containerEl	HTMLElement 字符串		模态挂载到的元素（默认为应用根元素）
<ActionsLabel> 属性
strong	布尔值	false	定义标签文本是否加粗
<ActionsButton> 属性
strong	布尔值	false	定义按钮文本是否加粗
close	布尔值	true	按钮点击时是否关闭 Action Sheet

Action Sheet 事件

事件	描述
<Actions> 事件
actionsOpen	当 Action Sheet 开始打开动画时将触发事件
actionsOpened	当 Action Sheet 完成打开动画后触发事件
actionsClose	当 Action Sheet 开始关闭动画时触发事件
actionsClosed	当 Action Sheet 完成关闭动画后触发事件

打开和关闭 Action Sheet

除了 Action Sheet open()/close() 方法外，您还可以通过以下方式打开和关闭它：

使用Action Sheet API
通过将其true或false传递给其openedprop

访问 Action Sheet 实例

您可以通过调用访问 Action Sheet 初始化的实例.instance()组件的方法来访问初始化的Sheet Modal实例。例如：

<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>

改进此文档

在本页上

Action Sheet 组件
Action Sheet 属性
Action Sheet 事件
打开和关闭 Action Sheet
访问 Action Sheet 实例
示例