shinemo-badge v0.0.9

徽标数 / Badge

使用

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import Badge from '@xm/Badge'

class App extends Component {
  constructor (props) {
    super(props)

    this.state = {
      count: 1,
      dot: true
    }

    this.increase = this.increase.bind(this)
    this.decline = this.decline.bind(this)
    this.toggleDot = this.toggleDot.bind(this)
  }

  increase () {
    const count = this.state.count + 1

    this.setState({count})
  }

  decline () {
    const count = this.state.count - 1

    this.setState({count})
  }

  toggleDot () {
    const dot = !this.state.dot

    this.setState({dot})
  }

  render () {
    const {count, dot} = this.state

    return (
      <div>
        <div>
          <Badge count={count} max={9}>
            不显示0，最大显示9
          </Badge>
        </div>
        <div>
          <Badge count={count} showZero>
            显示0
          </Badge>
        </div>
        <div>
          <Badge dot={dot}>
            红点
          </Badge>
        </div>
        <button onClick={this.increase} style={{marginTop: '50px'}}>increase</button>
        <button onClick={this.decline} style={{marginTop: '50px'}}>decline</button>
        <button onClick={this.toggleDot} style={{marginTop: '50px'}}>toggleDot</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.body)