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/index.js:13
Module: 操作类组件

Available since 0.3.0

Constructor

Swipe

Swipe ()

Defined in src/swipe/index.js:13

Available since 0.3.0

Example:

import React, { Component } from "react"

import Swipe from "phoenix-ui/lib/swipe"
import List from "phoenix-ui/lib/list"
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(){
        const buttons = [
            {text: "删除", onHandle: this.onDelete, phStyle: "error"},
            {text: "取消", onHandle: this.onCancle, phStyle: "info"}
        ]

        return(
            <div>
                <h2 className="comp-title">Swipe</h2>
                <h3 className="comp-type">buttons 左滑后出现的操作按钮</h3>
                <List style={{backgroundColor:'transparent'}}>
                    <Swipe style={{marginBottom:'16px'}} buttons={buttons}>
                        <List.Item>
                            <List.Col>
                                滑动块1
                            </List.Col>
                        </List.Item>
                    </Swipe>
                    <Swipe buttons={buttons}>
                        <List.Item>
                            <List.Col>
                                滑动块2
                            </List.Col>
                        </List.Item>
                    </Swipe>
                </List>
                <Code target="swipe-buttons" />
            </div>
        );
    }
}

属性

buttons

Array

Defined in src/swipe/index.js:56

按钮组

classPrefix

String

Defined in src/swipe/index.js:43

样式前缀

Default:

'swipe'

componentTag

String

Defined in src/swipe/index.js:50

标签tagName