@ray-js/components-ty-swipeout

English | 简体中文

@ray-js/components-ty-swipeout

Tuya Style Swipeout

Installation

$ npm install @ray-js/components-ty-swipeout
# or
$ yarn add @ray-js/components-ty-swipeout

Usage

import { Icon, View } from '@ray-js/components';
import TyCell from '@ray-js/components-ty-cell';
import Swipeout from '@ray-js/components-ty-swipeout';

<Swipeout
  autoClose
  right={[
    {
      text: 'Action',
      onPress: () => console.log('Action3'),
      style: { backgroundColor: 'red', color: 'white' },
    },
  ]}
>
  <TyCell.Item
    className={styles.title}
    title={
      <>
        <Icon type="icon-a-sunmaxfill" size={24} color="#2B7AFF" />
        Left
      </>
    }
  />
</Swipeout>;

Swipeout.Group

only one swipeout active at same time.

<Swipeout.Group>
  <Swipeout
    autoClose
    right={[
      {
        text: 'Action',
        onPress: () => console.log('Action3'),
        style: { backgroundColor: 'red', color: 'white' },
      },
    ]}
  >
    <TyCell.Item
      className={styles.title}
      title={
        <>
          <Icon type="icon-a-sunmaxfill" size={24} color="#2B7AFF" />
          Left
        </>
      }
    />
  </Swipeout>
  ;
  <Swipeout
    autoClose
    right={[
      {
        text: 'Action',
        onPress: () => console.log('Action3'),
        style: { backgroundColor: 'red', color: 'white' },
      },
    ]}
  >
    <TyCell.Item
      className={styles.title}
      title={
        <>
          <Icon type="icon-a-sunmaxfill" size={24} color="#2B7AFF" />
          Right
        </>
      }
    />
  </Swipeout>
  ;
</Swipeout.Group>