滑动单元格 SwipeCell

可以左右滑动来展示操作按钮的单元格组件。

使用

API

安装使用

import { TiSwipeCell } from '@titian-design/mobile-react';

用法示例

基本使用

codesanbox

copy

code

import React from 'react';
import { TiSwipeCell } from 'titian-h5-react';

export default function App() {
  return (
    <div className="content">
      <TiSwipeCell>
        <div className="left" slot="left">
          left
        </div>
        <div>center</div>
        <div className="right" slot="right">
          right
        </div>
      </TiSwipeCell>
    </div>
  );
}

禁用滑动

codesanbox

copy

code

import React from 'react';
import { TiSwipeCell } from 'titian-h5-react';

export default function App() {
  return (
    <div className="content">
      <TiSwipeCell disabled leftWidth={200}>
        <div slot="left">left</div>
        <div>center</div>
      </TiSwipeCell>
    </div>
  );
}

事件监听

codesanbox

copy

code

import React, { useCallback } from 'react';
import { TiSwipeCell } from 'titian-h5-react';

export default function App() {
  const handleOpen = useCallback((e: CustomEvent) => {
    console.log('打开', e);
  }, []);

  const handleClose = useCallback((e: CustomEvent) => {
    console.log('关闭', e);
  }, []);

  const handleTiClick = useCallback((e: CustomEvent) => {
    console.log('点击事件触发了', e);
  }, []);

  return (
    <div className="content">
      <TiSwipeCell onOpen={handleOpen} onClose={handleClose} onTiClick={handleTiClick}>
        <div slot="left">left</div>
        <div>center</div>
      </TiSwipeCell>
    </div>
  );
}

自定义宽度

codesanbox

copy

code

import React from 'react';
import { TiSwipeCell } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container">
      <div className="content">
        <TiSwipeCell leftWidth={200}>
          <div slot="left">left</div>
          <div>center</div>
        </TiSwipeCell>
      </div>

      <div className="content">
        <TiSwipeCell rightWidth={200}>
          <div>center</div>
          <div slot="right">right</div>
        </TiSwipeCell>
      </div>
    </div>
  );
}

异步操作控制

codesanbox

copy

code

import React, { useState } from 'react';
import { TiButton, TiSwipeCell } from 'titian-h5-react';

export default function App() {
  const [visible, setVisible] = useState(false);

  return (
    <div className="code-container">
      <TiButton onClick={() => setVisible(!visible)}>控制</TiButton>
      <div className="content">
        <TiSwipeCell visible={visible}>
          <div slot="left">left</div>
          <div>center</div>
        </TiSwipeCell>
      </div>
    </div>
  );
}

TiSwipeCell API

属性 Properties

名称	类型	必填	默认值	说明	备注
leftWidth	number	否	0	左边滑动区域宽度	-
rightWidth	number	否	0	右边滑动区域宽度	-
visible	boolean	否	false	设置可滑动区域划开	会先从左边到右开始查找是否有内容用于展示
disabled	boolean	否	false	禁止滑动	-
asyncClose	boolean	否	false	是否异步关闭	-
name	string	否	-	唯一标识	-

事件 Events

事件名	参数	说明	备注
onOpen	(e: CustomEvent<OpenParams>) => void	打开时触发	-
onClose	(e: CustomEvent<CloseParams>) => void	关闭时触发	-
onTiClick	(e: CustomEvent<left | right | outside | cell >) => void	点击时触发	关闭时的点击位置 (left right cell outside)

OpenParams

interface OpenParams {
  position: Position;
  name: string;
}

CloseParams

interface CloseParams {
  position: ClickPosition;
  name: string;
  instance: TiSwipeCell;
}

插槽 Slots

名称	说明	备注
right	右侧内容	-
left	左侧内容	-

可扩展样式名 External Class

名称	说明	备注
extClass	根节点可扩展的类名	-