赞助商成为赞助商

操作表 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>
改进此文档
在这个页面上