weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
254 lines (217 loc) • 7.93 kB
Markdown
# Checkbox
* category: UI
* chinese: 复选框组件
* type: UI component
---
<a href="http://nuke.taobao.org/" target="_blank"> Weex-Nuke UI </a>
## Usage
The Checkbox component is similar to the Switch component. There are only two
states of opening and closing, but have different using scenes.
`Switch` is usually used for single scattered configuration item settings, but
`Checkbox` is usually used for the selection of multiple data in a data source.
## API
| Parameters | Description | Type | Default |
| -------------- | -------------------------------------------- | ------------------- | ------------------ |
| size | SIZE | string | medium(or small) |
| checked | checked, or not | boolean | null |
| defaultChecked | default checked | boolean | false |
| disabled | disable, or not | boolean | false |
| onChange | the callback function when the state changes | function(checked,e) | null |
| type | checkbox type | string | normal(list,empty) |
| touchStyle | touch area style | object | {} |
### Checkbox.Group
| Parameters | Description | Type | Default |
| -------------- | -------------------------------------------- | ------------------- | ------- |
| dataSource | data source | array | [] |
| value | selected items | array | [] |
| onChange | the callback function when the state changes | function(checked,e) | null |
| style | the group style in whole container | Object | {} |
| reverse | reverse the show order of label and checkbox | bool | false |
| renderItem | custom render method for each item | function | () |
| groupItemStyle | each item's wrap style | object | {} |
### Usage in controlled or uncontrolled
All input and interaction class components have controlled usage and
uncontrolled usage.
* Controlled usage: component status is affected by external incoming props. The
external props changes, so that the components will change, such as:
```js
constructor() {
super();
this.state = {
checked: true
}
}
change = (value) => {
this.setState({
checked:!value
});
}
//...
render(){
return (<Checkbox checked={this.state.checked} onChange={this.change}/>)
}
```
* Uncontrolled usage: The component itself changes freely and changes what is
externally changed through the event, such as:
```js
change = (value) => {
console.log('switch change to: ',value);
}
//...
render(){
return (<Checkbox defaultChecked={true} onChange={this.change}/>)
}
```
## Demo Reference
<img src="https://img.alicdn.com/tfs/TB1OnHvX3MPMeJjy1XcXXXpppXa-1242-2208.png" width="240" />
Scan the qr code to preview( use apps like Taobao, Qianniu, Tmall... )
<img src="https://img.alicdn.com/tfs/TB1.XfvX3MPMeJjy1XbXXcwxVXa-280-280.png" width="160" />
## How to use
* install
```bash
// Switch to your rax project
npm i nuke-checbox --save
// following that demo, maybe you also need this...
// tnpm i nuke-view nuke-page nuke-text --save
```
* example
```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Checkbox from 'nuke-checkbox';
import Page from 'nuke-page';
const themeOrange = '#ff6600';
let App = class NukeDemoIndex extends Component {
constructor() {
super();
this.state = {
checked: false
};
}
onChange(value) {
console.log(value);
}
changeControl(value) {
this.setState({
checked: value
});
}
render() {
return (
<Page title="Checkbox">
<Page.Intro sub="普通样式" />
<View style={styles.demo_item}>
<View style={styles.group_item}>
<Checkbox
defaultChecked={true}
size="small"
onChange={this.onChange.bind(this)}
/>
<Text>苹果</Text>
</View>
<View style={styles.group_item}>
<Checkbox size="small" onChange={this.onChange.bind(this)} />
<Text>梨</Text>
</View>
</View>
<Page.Intro sub="空心样式" />
<View style={styles.demo_item}>
<View style={styles.group_item}>
<Checkbox
defaultChecked={true}
type="empty"
size="small"
onChange={this.onChange.bind(this)}
/>
<Text>苹果</Text>
</View>
<View style={styles.group_item}>
<Checkbox
size="small"
type="empty"
onChange={this.onChange.bind(this)}
/>
<Text>梨</Text>
</View>
</View>
<Page.Intro sub="list 样式" />
<View style={[styles.demo_item, { flexDirection: 'column' }]}>
<View style={styles.group_item}>
<Checkbox
defaultChecked={true}
type="list"
size="small"
onChange={this.onChange.bind(this)}
/>
<Text>浙江省杭州市余杭区</Text>
</View>
<View style={styles.group_item}>
<Checkbox
size="small"
type="list"
onChange={this.onChange.bind(this)}
/>
<Text>浙江省杭州市临安市</Text>
</View>
</View>
<Page.Intro main="自定义大小颜色" />
<View style={styles.demo_item}>
<Checkbox
style={{ width: '30rem', height: '30rem', fontSize: '20rem' }}
defaultChecked={true}
size="small"
checkedStyle={{ backgroundColor: themeOrange }}
unCheckedStyle={{ backgroundColor: themeOrange }}
onChange={this.onChange.bind(this)}
/>
<Checkbox
defaultChecked={true}
size="small"
type="empty"
checkedStyle={{ borderColor: themeOrange, color: themeOrange }}
unCheckedStyle={{ borderColor: themeOrange }}
onChange={this.onChange.bind(this)}
/>
<Checkbox
defaultChecked={true}
size="small"
type="list"
checkedStyle={{ color: themeOrange }}
onChange={this.onChange.bind(this)}
/>
</View>
</Page>
);
}
};
const styles = {
demo_item: {
width: 750,
marginTop: 30,
backgroundColor: '#ffffff',
flexDirection: 'row',
alignItem: 'center',
paddingLeft: 12
},
group_item: {
height: 104,
flexDirection: 'row',
borderBottomWidth: '2rem',
borderBottomStyle: 'solid',
borderBottomColor: '#F7F8FA',
alignItems: 'center'
}
};
render(<App />);
```
## The Other
* Chat with
<a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@ 翊晨
[yichen]</a> in Dingtalk desktop App
<a href='https://tms.dingtalk.com/markets/dingtalk/download'>Download</a>
* DingTalk Group
<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />