# 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>

### 方法

### 属性

- buttons
- classPrefix
- componentTag

### 事件

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