Nutmeg Pumpkin Macchiato

    nuke-button

    2.3.12 • Public • Published

    Button

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

    Nuke UI

    nuke-button@ALINPM nuke-button@ALINPM

    设计思路

    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、建议联系 @翊晨
    • 钉钉交流群

    Install

    npm i nuke-button

    DownloadsWeekly Downloads

    53

    Version

    2.3.12

    License

    Apache-2.0

    Unpacked Size

    117 kB

    Total Files

    28

    Last publish

    Collaborators

    • doub
    • fnatic
    • leanhunter
    • no-repeat