nuke-button

Button

• category: UI
• chinese: 按钮
• type: UI组件

---

Nuke UI

设计思路

Button 由 View + Text 封装完成，实现了大小、强调程度等 API 控制。

对于 onPress 事件解决了 native 端事件不能冒泡的问题，抹平了三端差异。

Button 自带一套 UI 色彩，你可以添加 style 属性，覆盖默认值。

API

Button

属性	说明	类型	默认值
type	按钮的强调程度类型，可选：normal(普通) primary(重要) secondary(次要) (dark, light，仅shape="ghost"有效)	string	normal
shape	ghost(线框) , warning(警告)	string	normal
size	设置按钮大小，可选： small medium large	string	medium
disabled	设置按钮禁用状态	boolean	false
onPress	点击 press 事件的 handler	function	无
onLongpress	长按事件的 handler( 仅 native 生效)	function	无
icon	icon的url地址	string	无
loading	是否加载中	boolean	无
rect	是否直角	boolean	false
block	以block的方式展现	boolean	false
fixedFont	按钮文字是否固定字号	boolean	false

请注意：onLongpress 中，p 小写，且该事件仅 native 生效

Button.Group

属性配置	说明	类型	默认值
rect	是否直角，所有子级button都会直角	boolean	false
block	以block的方式展现	boolean	false

demo 参考

扫码预览(手淘、千牛、天猫等)

使用方法

• 安装

// 切换到你的 rax 项目中
tnpm i nuke-button --save
// 参考如下 demo 您可能还需要安装
// tnpm i nuke-view nuke-page --save

• 调用示例

/** @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/>);

其他

• bug、建议联系 @翊晨
• 钉钉交流群