weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
172 lines (140 loc) • 8.92 kB
Markdown
# Button
- category: UI
- chinese: 按钮
- type: UI组件
---
<a href="http://nuke.alibaba-inc.com/" target="_blank"> Nuke UI </a>
 
## 设计思路
Button 由 View + Text 封装完成，实现了大小、强调程度等 API 控制。
对于 onPress 事件解决了 native 端事件不能冒泡的问题，抹平了三端差异。
Button 自带一套 UI 色彩，你可以添加 style 属性，覆盖默认值。
## API
### Button
| 属性 | 说明 | 类型 | 默认值 |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ------ |
| type | 按钮的强调程度类型，可选：`normal(普通)`<br /> `primary`(重要) <br /> `secondary`(次要)<br /> (`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 参考
<img src="https://img.alicdn.com/tfs/TB1ffxWSFXXXXX0XVXXXXXXXXXX-1242-2208.png" width="240" />
扫码预览(手淘、千牛、天猫等)
<img src="https://img.alicdn.com/tfs/TB1f.8QSFXXXXanXVXXXXXXXXXX-280-280.png" width="160" />
## 使用方法
- 安装
```bash
// 切换到你的 rax 项目中
tnpm i nuke-button --save
// 参考如下 demo 您可能还需要安装
// tnpm i nuke-view nuke-page --save
```
- 调用示例
```js
/** @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、建议联系 <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨</a>
- 钉钉交流群
<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />