Button

• category: UI
• chinese: 按钮
• type: UI Component

Nuke UI

Design

Nuke predefined several styles of Buttons, each serving its own semantic purpose.

API

Button

| Props | Description | Type | Default | | ----------- | ---------------------------------------------------- | -------- | ------- | | type | type of button,can be normal primary secondary | string | normal | | size | size of button, can be small medium large | string | medium | | disabled | disable status | boolean | false | | onPress | press event | function | null | | onLongpress | long press event, only works in Weex Native | function | null | | icon | icon url | string | null | | block | expands the button to 100% of available space | boolean | false | | fixedFont | keep text size fixed in different screen resolution | boolean | false |

Please note：the onLongpress with small p only takes effect in Native App.

Button.Group

| Configuration | Description | Type | Default | | :------------ | :--------------------------- | :------ | :------ | | block | represent as a block, or not | boolean | false |

Demos

Sweep the qr code to preview( use apps like Taobao, Qianniu, Tmall... )

How To Use

• Install

// Switch to your rax project
tnpm i nuke-button --save
// following that demo, maybe you also need this...
// tnpm i nuke-view nuke-page --save

• Example

/** @jsx createElement */
import {createElement, Component,render } from 'rax';
import View from 'nuke-view';
import Button from 'nuke-button';
import Page from 'nuke-page';

let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
    }
    press(){
        console.log('111')
    }
    render() {
        return (
            <Page title="Button">
                <Page.Intro main="type:primary" sub="主操作"></Page.Intro>
                <Button.Group style={styles.btnWithMargin} >
                    <Button onPress={this.press} type="primary">primary</Button>
                    <Button disabled type="primary">disabled</Button>
                </Button.Group>
                <Page.Intro main="type:primary" sub="自定义颜色"></Page.Intro>
                <Button.Group style={styles.btnWithMargin} >
                    <Button onPress={this.press} type="primary" style={{borderWidth:'1rem',borderStyle:'solid',borderColor:'#ff6600',backgroundColor:'#ff6600',color:'#ffffff'}}>primary</Button>
                    <Button onPress={this.press} type="primary" style={{borderWidth:'1rem',borderStyle:'solid',borderColor:'#B91630',backgroundColor:'#B91630',color:'#cccccc','borderColor:active':'#770719','backgroundColor:active':'#770719'}}>primary</Button>
                </Button.Group>
                <Page.Intro main="type:secondary" sub="次要操作"></Page.Intro>
                <Button.Group style={styles.btnWithMargin}>
                    <Button type="secondary">secondary</Button>
                    <Button disabled type="secondary">disabled</Button>
                </Button.Group>
                <Page.Intro main="type:normal" sub="普通操作"></Page.Intro>
                <Button.Group style={styles.btnWithMargin}>
                    <Button type="normal">normal</Button>
                    <Button disabled type="normal">disabled</Button>
                </Button.Group>
                <Page.Intro main="shape:warning" sub="警告类操作"></Page.Intro>
                <Button.Group style={styles.btnWithMargin}>
                    <Button type="primary" shape="warning">primary</Button>
                    <Button type="normal" shape="warning">normal</Button>
                </Button.Group>
                <Page.Intro main="block:true" sub="独占一行"></Page.Intro>
                <Button style={styles.btnWithMargin} type="primary" block>primary</Button>
                <Page.Intro main="rect:true" sub="直角"></Page.Intro>
                <Button.Group style={styles.btnWithMargin}>
                    <Button style={styles.btn} rect type="normal">Normal</Button>
                    <Button style={styles.btn} rect type="primary">Primary</Button>
                    <Button style={styles.btn} rect type="secondary">Secondary</Button>
                </Button.Group>

                <Page.Intro main="size" sub="尺寸"></Page.Intro>
                <Button.Group style={styles.btnWithMargin}>
                    <Button style={styles.btn} size="large" type="primary">large</Button>
                    <Button style={styles.btn} size="medium" type="primary">medium</Button>
                    <Button style={styles.btn} size="small" type="primary">small</Button>
                </Button.Group>
                <Page.Intro main="ghost:dark" sub="幽灵模式 深色"></Page.Intro>
                <Button.Group style={[styles.btnLine,{paddingTop:'20rem',paddingBottom:'20rem',backgroundColor:'#4f74b3'}]}>
                    <Button type="dark" shape="ghost">dark</Button>
                    <Button type="dark" shape="ghost" disabled>dark disabled</Button>
                </Button.Group>
                <Page.Intro main="ghost:light" sub="幽灵模式 浅色"></Page.Intro>
                <Button.Group style={[styles.btnLine,{paddingTop:'20rem',paddingBottom:'20rem',backgroundColor:'#e3eaf7'}]}>
                    <Button type="light" shape="ghost">light</Button>
                    <Button type="light" shape="ghost" disabled>light disabled</Button>
                </Button.Group>

                <Page.Intro main="Button.Group rect" sub="Group用法"></Page.Intro>
                <Button.Group style={styles.btnWithMargin} rect>
                    <Button type="normal">Normal</Button>
                    <Button type="third">Third</Button>
                    <Button type="primary">Primary</Button>
                </Button.Group>
            </Page>

        );
    }
}
const styles={
    btnWithMargin:{
        marginTop:'30rem', 
        marginBottom:'50rem', 
        marginLeft:'42rem', 
        marginRight:'42rem' 
    },
    btnLine:{
        marginTop:'30rem', 
        marginBottom:'50rem', 
        paddingLeft:'42rem', 
        paddingRight:'42rem'
    }
}
render(<App/>);