Swipeout React 组件

Swipeout 列表不是一个单独的组件，而只是使用<List>, <ListItem swipeout>React 组件和额外的 Swipeout 组件。

Swipeout React 组件代表 Framework7 的滑动删除组件。

Swipeout 组件

包含以下组件：

Swipeout 属性

属性类型默认描述
<SwipeoutActions> 属性
侧字符串右Swipeout 动作侧
右布尔值快捷方式side="right"prop
左布尔值快捷方式side="left"prop
<SwipeoutButton> 属性
删除布尔值false点击时将自动删除 swipeout 列表项
close布尔值false点击时将自动关闭 swipeout 列表项
溢出布尔值false如果你滑动动作过多，将自动触发点击 -溢出
text字符串Swipeout 按钮文本标签
confirmText字符串此文本将在用户同意删除项目之前显示在对话框中
confirmTitle字符串此文本将显示为对话框标题，用户必须在删除项目前同意

Swipeout 事件

事件描述
<SwipeoutButton> 事件
click点击 swipeout 按钮时将触发事件
<ListItem> 事件
在带有swipeout启用
swipeout滑动 swipeout 元素时将触发事件。event.detail.progress包含当前打开的进度百分比
swipeoutOpen当滑动删除元素开始其打开动画时将触发事件
swipeoutOpened当滑动删除元素完成其打开动画后触发事件
swipeoutClose当滑动删除元素开始其关闭动画时将触发事件
swipeoutClosed当滑动删除元素完成其删除动画后触发事件
swipeoutDelete当滑动删除元素开始其删除动画后触发事件
swipeoutDeleted当滑动删除元素完成其删除动画后触发事件，就在它将被从 DOM 中移除之前
swipeoutOverswipeEnter当启用溢出时将触发事件
swipeoutOverswipeExit当禁用溢出时将触发事件

示例

swipeout.jsx
import React, { useRef } from 'react';
import {
  Navbar,
  Page,
  BlockTitle,
  List,
  ListItem,
  Icon,
  SwipeoutActions,
  SwipeoutButton,
  Block,
  f7,
} from 'framework7-react';

export default () => {
  const actions = useRef(null);
  const more = () => {
    actions.current.open();
  };
  const mark = () => {
    f7.dialog.alert('Mark');
  };
  const reply = () => {
    f7.dialog.alert('Reply');
  };
  const forward = () => {
    f7.dialog.alert('Forward');
  };
  const onDeleted = () => {
    f7.dialog.alert('Thanks, item removed!');
  };
  const onPageBeforeRemove = () => {
    actions.current.destroy();
  };
  const onPageInit = () => {
    actions.current = 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,
          },
        ],
      ],
    });
  };
  return (
    <Page onPageBeforeRemove={onPageBeforeRemove} onPageInit={onPageInit}>
      <Navbar title="Swipeout"></Navbar>

      <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">
          <Icon slot="media" 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">
          <Icon slot="media" 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">
          <Icon slot="media" 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">
          <Icon slot="media" icon="icon-f7" />
          <SwipeoutActions right>
            <SwipeoutButton delete>Delete</SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
        <ListItem swipeout title="Swipe left on me too">
          <Icon slot="media" icon="icon-f7" />
          <SwipeoutActions right>
            <SwipeoutButton delete>Delete</SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
        <ListItem title="I am not removable">
          <Icon slot="media" icon="icon-f7" />
        </ListItem>
      </List>

      <BlockTitle>Swipe for actions</BlockTitle>
      <List strong insetMd outlineIos dividersIos>
        <ListItem swipeout title="Swipe left on me please">
          <Icon slot="media" icon="icon-f7" />
          <SwipeoutActions right>
            <SwipeoutButton onClick={more}>More</SwipeoutButton>
            <SwipeoutButton delete>Delete</SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
        <ListItem swipeout title="Swipe left on me too">
          <Icon slot="media" icon="icon-f7" />
          <SwipeoutActions right>
            <SwipeoutButton onClick={more}>More</SwipeoutButton>
            <SwipeoutButton delete>Delete</SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
        <ListItem swipeout title="You can't delete me">
          <Icon slot="media" 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">
          <Icon slot="media" icon="icon-f7" />
          <SwipeoutActions right>
            <SwipeoutButton delete>Delete</SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
        <ListItem swipeout onSwipeoutDeleted={onDeleted} title="Swipe left on me too">
          <Icon slot="media" icon="icon-f7" />
          <SwipeoutActions right>
            <SwipeoutButton delete>Delete</SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
        <ListItem title="I am not removable">
          <Icon slot="media" 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">
          <Icon slot="media" 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">
          <Icon slot="media" 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>
  );
};
改进此文档
在本页上
无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗