Swipe

左滑组件

  • 向左滑动出现可操作按钮, 类似IOS列表操作的组件。
  • 通过buttons设置可操作按钮的文字text、样式phStyle以及点击按钮的回调函数onHandle。
  • buttons的phStyle默认'primary', 可选primary、info、error、warning、danger、link、gray、success。

示例:

    <Swipe buttons={[
        {text: '删除', onHandle: this.onDelete, phStyle: 'error'},
        {text: '取消', onHandle: this.onCancle, phStyle: 'info'}
    ]}>
        <div style={{padding: '1rem'}}>
            // 内容
        </div>
    </Swipe>

方法

属性

事件

Extends Component
Defined in: src/Swipe.js:9
Module: 操作类组件

Available since 0.3.0

Constructor

Swipe

Swipe ()

Defined in src/Swipe.js:9

Available since 0.3.0

Example:

import React, { Component } from "react";
import {Swipe} from "phoenix-ui";
import Code from "./code/code";

export default class swipe extends Component{

    constructor(props,context){
        super(props,context); 
    }

    onDelete(){
        console.log("delete!!");
    }

    onCancle(){
        console.log("cancle!!");
    }

    render(){
        return(
            <div>
                <h2 className="comp-title">Swipe</h2>
                <h3 className="comp-type">buttons(默认空数组) 左滑后出现的操作按钮</h3>
                <div className="contents">
                    <h3 className="comp-tip">buttons的phStyle默认primary</h3>
                    <Swipe buttons={[
                        {text: "删除", onHandle: this.onDelete}
                    ]}>
                        <div style={{padding: "1rem"}}>
                            滑动块1
                        </div>
                    </Swipe>
                </div>
                <Code target="swipe-phstyle" />

                <div className="contents">
                    <h3 className="comp-tip">自定义buttons参数</h3>
                    <Swipe buttons={[
                        {text: "删除", onHandle: this.onDelete, phStyle: "error"},
                        {text: "取消", onHandle: this.onCancle, phStyle: "info"}
                    ]}>
                        <div style={{padding: "1rem"}}>
                            滑动块2
                        </div>
                    </Swipe>
                </div>
                <Code target="swipe-buttons" />
            </div>
        );
    }
}

属性

buttons

Array

Defined in src/Swipe.js:52

按钮组

classPrefix

String

Defined in src/Swipe.js:39

样式前缀

Default:

'swipe'

componentTag

String

Defined in src/Swipe.js:46

标签tagName