Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
nuke-button
Advanced tools
Button 由 View + Text 封装完成,实现了大小、强调程度等 API 控制。
对于 onPress 事件解决了 native 端事件不能冒泡的问题,抹平了三端差异。
Button 自带一套 UI 色彩,你可以添加 style 属性,覆盖默认值。
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
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 |
请注意:onLongpress
中,p
小写,且该事件仅 native 生效
属性配置 | 说明 | 类型 | 默认值 |
---|---|---|---|
rect | 是否直角,所有子级button都会直角 | boolean | false |
block | 以block的方式展现 | boolean | false |
扫码预览(手淘、千牛、天猫等)
// 切换到你的 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/>);
FAQs
We found that nuke-button demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.