贊助商成為贊助商

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 包含目前開啟的進度百分比
swipeoutOpenSwipeout 元素開始其開啟動畫時將觸發事件
swipeoutOpenedSwipeout 元素完成其開啟動畫後將觸發事件
swipeoutCloseSwipeout 元素開始其關閉動畫時將觸發事件
swipeoutClosed滑動元素完成關閉動畫後觸發事件
swipeoutDelete滑動元素開始刪除動畫後觸發事件
swipeoutDeleted滑動元素完成刪除動畫後，在從 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>
改善此文件
在此頁面上