# 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 />);
```