赞助商成为赞助商

Swipeout Svelte 组件

Swipeout 列表不是一个独立的组件，而只是使用 <List>、<ListItem swipeout> Svelte 组件和额外的 Swipeout 组件的一个特殊情况。

Swipeout Svelte 组件代表 Framework7 的 Swipeout 组件。

Swipeout 组件

以下组件包含在内

Swipeout 属性

属性类型默认值描述
<SwipeoutActions> 属性
side字符串rightSwipeout 操作侧
right布尔值side="right" 属性的快捷方式
left布尔值side="left" 属性的快捷方式
<SwipeoutButton> 属性
delete布尔值false单击时会自动删除 Swipeout 列表项
close布尔值false单击时会自动关闭 Swipeout 列表项
overswipe布尔值false如果您过度滑动操作，则会自动触发单击 - overswipe
text字符串Swipeout 按钮的文本标签
confirmText字符串此文本将显示在对话框中，用户必须在此同意才能删除项目
confirmTitle字符串此文本将显示为对话框标题，用户必须在此同意才能删除项目

Swipeout 事件

事件描述
<SwipeoutButton> 事件
click单击 Swipeout 按钮时会触发该事件
<ListItem> 事件
以下事件将在启用了 swipeout 的 <ListItem> 上可用
swipeout当您移动 Swipeout 元素时会触发该事件。event.detail.progress 包含当前打开的进度百分比
swipeoutOpen当 Swipeout 元素开始其打开动画时会触发该事件
swipeoutOpened当 Swipeout 元素完成其打开动画时会触发该事件
swipeoutClose当 Swipeout 元素开始其关闭动画时会触发该事件
swipeoutClosed当 Swipeout 元素完成其关闭动画时会触发该事件
swipeoutDelete当 Swipeout 元素开始其删除动画时会触发该事件
swipeoutDeleted当 Swipeout 元素完成其删除动画并在从 DOM 中删除之前会触发该事件
swipeoutOverswipeEnter启用 overswipe 时会触发该事件
swipeoutOverswipeExit禁用 overswipe 时会触发该事件

示例

swipeout.svelte
<script>
  import {
    f7,
    Navbar,
    Page,
    BlockTitle,
    List,
    ListItem,
    SwipeoutActions,
    SwipeoutButton,
    Block,
  } from 'framework7-svelte';

  let actions;

  function more() {
    actions.open();
  }
  function mark() {
    f7.dialog.alert('Mark');
  }
  function reply() {
    f7.dialog.alert('Reply');
  }
  function forward() {
    f7.dialog.alert('Forward');
  }
  function onDeleted() {
    f7.dialog.alert('Thanks, item removed!');
  }
  function onPageBeforeRemove() {
    actions.destroy();
  }
  function onPageInit() {
    actions = f7.actions.create({
      buttons: [
        [
          {
            text: 'Here comes some optional description or warning for actions below',
            label: true,
          },
          {
            text: 'Action 1',
          },
          {
            text: 'Action 2',
          },
        ],
        [
          {
            text: 'Cancel',
            strong: true,
          },
        ],
      ],
    });
  }
</script>

<Page {onPageBeforeRemove} {onPageInit}>
  <Navbar title="Swipeout" />

  <Block>
    <p>
      Swipe out actions on list elements is one of the most awesome F7 features. It allows you to
      call hidden menu for each list element where you can put default ready-to use delete button or
      any other buttons for some required actions.
    </p>
  </Block>

  <BlockTitle>Swipe to delete with confirm modal</BlockTitle>
  <List strong insetMd outlineIos dividersIos>
    <ListItem swipeout title="Swipe left on me please">
      <i slot="media" class="icon icon-f7" />
      <SwipeoutActions right>
        <SwipeoutButton delete confirmText="Are you sure you want to delete this item?">
          Delete
        </SwipeoutButton>
      </SwipeoutActions>
    </ListItem>
    <ListItem swipeout title="Swipe left on me too">
      <i slot="media" class="icon icon-f7" />
      <SwipeoutActions right>
        <SwipeoutButton delete confirmText="Are you sure you want to delete this item?">
          Delete
        </SwipeoutButton>
      </SwipeoutActions>
    </ListItem>
    <ListItem title="I am not removable"><i slot="media" class="icon icon-f7" /></ListItem>
  </List>

  <BlockTitle>Swipe to delete without confirm</BlockTitle>
  <List strong insetMd outlineIos dividersIos>
    <ListItem swipeout title="Swipe left on me please">
      <i slot="media" class="icon icon-f7" />
      <SwipeoutActions right>
        <SwipeoutButton delete>Delete</SwipeoutButton>
      </SwipeoutActions>
    </ListItem>
    <ListItem swipeout title="Swipe left on me too">
      <i slot="media" class="icon icon-f7" />
      <SwipeoutActions right>
        <SwipeoutButton delete>Delete</SwipeoutButton>
      </SwipeoutActions>
    </ListItem>
    <ListItem title="I am not removable"><i slot="media" class="icon icon-f7" /></ListItem>
  </List>

  <BlockTitle>Swipe for actions</BlockTitle>
  <List strong insetMd outlineIos dividersIos>
    <ListItem swipeout title="Swipe left on me please">
      <i slot="media" class="icon icon-f7" />
      <SwipeoutActions right>
        <SwipeoutButton onClick={more}>More</SwipeoutButton>
        <SwipeoutButton delete>Delete</SwipeoutButton>
      </SwipeoutActions>
    </ListItem>
    <ListItem swipeout title="Swipe left on me too">
      <i slot="media" class="icon icon-f7" />
      <SwipeoutActions right>
        <SwipeoutButton onClick={more}>More</SwipeoutButton>
        <SwipeoutButton delete>Delete</SwipeoutButton>
      </SwipeoutActions>
    </ListItem>
    <ListItem swipeout title="You can't delete me">
      <i slot="media" class="icon icon-f7" />
      <SwipeoutActions right>
        <SwipeoutButton onClick={more}>More</SwipeoutButton>
      </SwipeoutActions>
    </ListItem>
  </List>

  <BlockTitle>With callback on remove</BlockTitle>
  <List strong insetMd outlineIos dividersIos>
    <ListItem swipeout onSwipeoutDeleted={onDeleted} title="Swipe left on me please">
      <i slot="media" class="icon icon-f7" />
      <SwipeoutActions right>
        <SwipeoutButton delete>Delete</SwipeoutButton>
      </SwipeoutActions>
    </ListItem>
    <ListItem swipeout onSwipeoutDeleted={onDeleted} title="Swipe left on me too">
      <i slot="media" class="icon icon-f7" />
      <SwipeoutActions right>
        <SwipeoutButton delete>Delete</SwipeoutButton>
      </SwipeoutActions>
    </ListItem>
    <ListItem title="I am not removable"><i slot="media" class="icon icon-f7" /></ListItem>
  </List>

  <BlockTitle>With actions on left side (swipe to right)</BlockTitle>
  <List strong insetMd outlineIos dividersIos>
    <ListItem swipeout title="Swipe right on me please">
      <i slot="media" class="icon icon-f7" />
      <SwipeoutActions left>
        <SwipeoutButton color="green" onClick={reply}>Reply</SwipeoutButton>
        <SwipeoutButton color="blue" onClick={forward}>Forward</SwipeoutButton>
      </SwipeoutActions>
    </ListItem>
    <ListItem swipeout title="Swipe right on me too">
      <i slot="media" class="icon icon-f7" />
      <SwipeoutActions left>
        <SwipeoutButton color="green" onClick={reply}>Reply</SwipeoutButton>
        <SwipeoutButton color="blue" onClick={forward}>Forward</SwipeoutButton>
      </SwipeoutActions>
    </ListItem>
  </List>

  <BlockTitle>On both sides with overswipes</BlockTitle>
  <List mediaList strong insetMd outlineIos dividersIos>
    <ListItem
      swipeout
      title="Facebook"
      after="17:14"
      subtitle="New messages from John Doe"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    >
      <SwipeoutActions left>
        <SwipeoutButton overswipe color="green" onClick={reply}>Reply</SwipeoutButton>
        <SwipeoutButton color="blue" onClick={forward}>Forward</SwipeoutButton>
      </SwipeoutActions>
      <SwipeoutActions right>
        <SwipeoutButton onClick={more}>More</SwipeoutButton>
        <SwipeoutButton color="orange" onClick={mark}>Mark</SwipeoutButton>
        <SwipeoutButton delete overswipe confirmText="Are you sure you want to delete this item?">
          Delete
        </SwipeoutButton>
      </SwipeoutActions>
    </ListItem>
    <ListItem
      swipeout
      title="John Doe (via Twitter)"
      after="17:11"
      subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    >
      <SwipeoutActions left>
        <SwipeoutButton overswipe color="green" onClick={reply}>Reply</SwipeoutButton>
        <SwipeoutButton color="blue" onClick={forward}>Forward</SwipeoutButton>
      </SwipeoutActions>
      <SwipeoutActions right>
        <SwipeoutButton onClick={more}>More</SwipeoutButton>
        <SwipeoutButton color="orange" onClick={mark}>Mark</SwipeoutButton>
        <SwipeoutButton delete overswipe confirmText="Are you sure you want to delete this item?">
          Delete
        </SwipeoutButton>
      </SwipeoutActions>
    </ListItem>
    <ListItem
      swipeout
      title="Facebook"
      after="16:48"
      subtitle="New messages from John Doe"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    >
      <SwipeoutActions left>
        <SwipeoutButton overswipe color="green" onClick={reply}>Reply</SwipeoutButton>
        <SwipeoutButton color="blue" onClick={forward}>Forward</SwipeoutButton>
      </SwipeoutActions>
      <SwipeoutActions right>
        <SwipeoutButton onClick={more}>More</SwipeoutButton>
        <SwipeoutButton color="orange" onClick={mark}>Mark</SwipeoutButton>
        <SwipeoutButton delete overswipe confirmText="Are you sure you want to delete this item?">
          Delete
        </SwipeoutButton>
      </SwipeoutActions>
    </ListItem>
    <ListItem
      swipeout
      title="John Doe (via Twitter)"
      after="15:32"
      subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
    >
      <SwipeoutActions left>
        <SwipeoutButton overswipe color="green" onClick={reply}>Reply</SwipeoutButton>
        <SwipeoutButton color="blue" onClick={forward}>Forward</SwipeoutButton>
      </SwipeoutActions>
      <SwipeoutActions right>
        <SwipeoutButton onClick={more}>More</SwipeoutButton>
        <SwipeoutButton color="orange" onClick={mark}>Mark</SwipeoutButton>
        <SwipeoutButton delete overswipe confirmText="Are you sure you want to delete this item?">
          Delete
        </SwipeoutButton>
      </SwipeoutActions>
    </ListItem>
  </List>
</Page>
改进此文档
在此页面上