weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
250 lines (239 loc) • 6.22 kB
Markdown
# Badge 徽章 DEMO
- order: 0
- title_en: Badge usage
---
```js
<NukePlayGround>
// Add badge to an icon
<Badge style={{ position: 'absolute', top: 14, left: 110 }}>
<Icon type="comments" />
</Badge>
// Add badge to texts
<View style={styles.item}>
<Text style={styles.text}>List Item</Text>
<Badge count={9} max={10} />
</View>
// Cusomize badge
<View style={styles.item}>
<Text style={styles.text}>List Item</Text>
<Badge style={{ position: 'absolute', top: 4, left: 110 }} count="hot" />
</View>
</NukePlayGround>
```
---
```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Touchable from 'nuke-touchable';
import Badge from 'nuke-badge';
import ListView from 'nuke-list-view';
import Icon from 'nuke-icon';
import Page from 'nuke-page';
const App = class NukeDemoIndex extends Component {
constructor() {
super();
this.state = {
arr1: [
{ key: 'a0', text: 'Some Categories' },
{ key: 'a1', text: 'Some Categories', arrow: true },
{ key: 'a2', text: 'Some Categories', arrow: true, sub: 'Select' }
]
};
}
linkTo(item, e) {
console.log(e);
}
renderItem(length, item, index) {
const wrapStyle = index === length - 1 ? [styles.cellItem, styles.cellItemLast] : styles.cellItem;
return (
<View style={wrapStyle}>
<Badge style={styles.badgeStyle}>
<Icon type="comments" />
</Badge>
<Touchable
style={[styles.cellInner, index === length - 1 ? styles.cellInnerLast : {}]}
onPress={this.linkTo.bind(this, item)}>
<Text style={styles.itemTextList}>{item.text}</Text>
{item.arrow ? <Icon name="arrowRight" style={styles.arrow} /> : null}
</Touchable>
</View>
);
}
render() {
return (
<Page title="Badge">
<Page.Intro main="Badge-dot" sub="normal" />
<View style={styles.containerWithMargin}>
<View style={styles.item}>
<Text style={styles.text}>List Item</Text>
<Badge style={{ position: 'absolute', top: 14, left: 110 }}>
<Icon type="comments" />
</Badge>
</View>
</View>
<Page.Intro sub="list" />
<ListView
renderRow={this.renderItem.bind(this, this.state.arr1.length)}
dataSource={this.state.arr1}
style={styles.list1}
/>
<Page.Intro main="Badge-number" sub="normal" />
<View style={styles.containerWithMargin}>
<View style={styles.item}>
<Text style={styles.text}>List Item</Text>
<Badge style={{ position: 'absolute', top: 4, left: 110 }} count={9} max={10} />
</View>
<View style={styles.item}>
<Text style={styles.text}>List Item</Text>
<Badge type="unread" style={{ position: 'absolute', top: 4, left: 110 }} count={722} max={222} />
</View>
</View>
<Page.Intro main="Badge-color" sub="自定义颜色" />
<View style={styles.containerWithMargin}>
<View style={styles.item}>
<Text style={styles.text}>List Item</Text>
<Badge
style={{
position: 'absolute',
top: 4,
left: 110,
color: '#ff6600'
}}>
<Icon type="comments" />
</Badge>
</View>
<View style={styles.item}>
<Text style={styles.text}>List Item</Text>
<Badge
type="unread"
style={{
backgroundColor: '#ff6600',
position: 'absolute',
top: 4,
left: 110
}}
count={722}
max={222}
/>
</View>
<View style={styles.item}>
<Text style={styles.text}>Cart</Text>
<Badge
type="unread"
style={{
backgroundColor: '#ff6600',
position: 'absolute',
top: 4,
left: 110
}}
count={0}
max={222}
always={true}
/>
</View>
</View>
<Page.Intro main="Badge-text" sub="自定义文字" />
<View style={styles.containerWithMargin}>
<View style={styles.item}>
<Text style={styles.text}>List Item</Text>
<Badge
style={{
position: 'absolute',
top: 4,
left: 110,
backgroundColor: '#ff6600'
}}
count="hot"
/>
</View>
</View>
</Page>
);
}
};
const styles = {
containerWithMargin: {
flexDirection: 'row',
marginTop: 20,
marginBottom: 40,
marginLeft: 42,
marginRight: 42
},
item: {
width: 260
},
text: {
fontSize: 32
},
list1: {
height: 104 * 3 + 2,
marginTop: 35
},
cellItem: {
backgroundColor: '#ffffff',
[`backgroundColor:active`]: '#f2f3f7',
height: 104,
paddingLeft: 50
},
cellInner: {
flex: 1,
borderBottomWidth: 2,
borderBottomStyle: 'solid',
borderBottomColor: '#e6e7eb',
alignItems: 'center',
flexDirection: 'row'
},
cellInnerLast: {
borderBottomWidth: 0
},
cellItemLast: {
borderBottomWidth: 2,
borderBottomStyle: 'solid',
borderBottomColor: '#e6e7eb'
},
badgeStyle: {
position: 'absolute',
top: 38,
left: 20
},
itemTextList: {
fontSize: 32,
color: '#5F646E'
},
arrow: {
color: '#c7c7cc',
position: 'absolute',
top: 40,
right: 24
},
wrapper: {
padding: 20
},
st: {
marginTop: 30,
marginBottom: 30,
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 20,
backgroundColor: '#dddddd'
},
stText: {
fontSize: 36
},
btn: {
marginRight: 20
},
btnblock: {
marginBottom: 20
},
badgeBlock: {
backgroundColor: '#eeeeee',
width: 48,
height: 48,
borderRadius: 4
}
};
render(<App />);
```