Button
- category: UI
- chinese: 按钮
- type: 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 */;;;; let App = { super; } { console } { return <Page title="Button"> <PageIntro main="type:primary" sub="主操作"></PageIntro> <ButtonGroup style=stylesbtnWithMargin > <Button onPress=thispress type="primary">primary</Button> <Button disabled type="primary">disabled</Button> </ButtonGroup> <PageIntro main="type:primary" sub="自定义颜色"></PageIntro> <ButtonGroup style=stylesbtnWithMargin > <Button onPress=thispress type="primary" style=borderWidth:'1rem'borderStyle:'solid'borderColor:'#ff6600'backgroundColor:'#ff6600'color:'#ffffff'>primary</Button> <Button onPress=thispress type="primary" style=borderWidth:'1rem'borderStyle:'solid'borderColor:'#B91630'backgroundColor:'#B91630'color:'#cccccc''borderColor:active':'#770719''backgroundColor:active':'#770719'>primary</Button> </ButtonGroup> <PageIntro main="type:secondary" sub="次要操作"></PageIntro> <ButtonGroup style=stylesbtnWithMargin> <Button type="secondary">secondary</Button> <Button disabled type="secondary">disabled</Button> </ButtonGroup> <PageIntro main="type:normal" sub="普通操作"></PageIntro> <ButtonGroup style=stylesbtnWithMargin> <Button type="normal">normal</Button> <Button disabled type="normal">disabled</Button> </ButtonGroup> <PageIntro main="shape:warning" sub="警告类操作"></PageIntro> <ButtonGroup style=stylesbtnWithMargin> <Button type="primary" shape="warning">primary</Button> <Button type="normal" shape="warning">normal</Button> </ButtonGroup> <PageIntro main="block:true" sub="独占一行"></PageIntro> <Button style=stylesbtnWithMargin type="primary" block>primary</Button> <PageIntro main="rect:true" sub="直角"></PageIntro> <ButtonGroup style=stylesbtnWithMargin> <Button style=stylesbtn rect type="normal">Normal</Button> <Button style=stylesbtn rect type="primary">Primary</Button> <Button style=stylesbtn rect type="secondary">Secondary</Button> </ButtonGroup> <PageIntro main="size" sub="尺寸"></PageIntro> <ButtonGroup style=stylesbtnWithMargin> <Button style=stylesbtn size="large" type="primary">large</Button> <Button style=stylesbtn size="medium" type="primary">medium</Button> <Button style=stylesbtn size="small" type="primary">small</Button> </ButtonGroup> <PageIntro main="ghost:dark" sub="幽灵模式 深色"></PageIntro> <ButtonGroup style=stylesbtnLinepaddingTop:'20rem'paddingBottom:'20rem'backgroundColor:'#4f74b3'> <Button type="dark" shape="ghost">dark</Button> <Button type="dark" shape="ghost" disabled>dark disabled</Button> </ButtonGroup> <PageIntro main="ghost:light" sub="幽灵模式 浅色"></PageIntro> <ButtonGroup style=stylesbtnLinepaddingTop:'20rem'paddingBottom:'20rem'backgroundColor:'#e3eaf7'> <Button type="light" shape="ghost">light</Button> <Button type="light" shape="ghost" disabled>light disabled</Button> </ButtonGroup> <PageIntro main="Button.Group rect" sub="Group用法"></PageIntro> <ButtonGroup style=stylesbtnWithMargin rect> <Button type="normal">Normal</Button> <Button type="third">Third</Button> <Button type="primary">Primary</Button> </ButtonGroup> </Page> ; }const styles= btnWithMargin: marginTop:'30rem' marginBottom:'50rem' marginLeft:'42rem' marginRight:'42rem' btnLine: marginTop:'30rem' marginBottom:'50rem' paddingLeft:'42rem' paddingRight:'42rem' ;
其他
- bug、建议联系 @翊晨
- 钉钉交流群