打星

@aligov/components-star

打星

API

参数 说明 类型 默认值
className class String ''
style 样式 Object null
bgColor 星星的背景颜色 String #EBECF0
showHalf 是否显示一半 Boolean false
ceil 进度超出部分是否显示（比如showHalf为false，ceil为true，number为5，那么进度2.5时显示三个星，否则两颗星） Boolean true
distance 星星之间的间隔 Number 8
total 总值 Number 5
value 当前值 Number 0

DEMO 列表

Simple Usage

本 Demo 演示一行文字的用法。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Star from '@aligov/components-star';

class App extends Component {
  render() {
    return (
      <div>
        <div style={{marginBottom: '10px'}}>
          <Star type='star' value={1} />
        </div>

        <div style={{marginBottom: '10px'}}>
          <Star type='star' value={2.5} ceil={false} />
        </div>

        <div style={{marginBottom: '10px'}}>
          <Star type='star' value={2.5} showHalf />
        </div>

        <div style={{marginBottom: '10px'}}>
          <Star type='star' value={2.5} />
        </div>

        <div style={{marginBottom: '10px'}}>
          <Star type='star' value={2.5} round />
        </div>
      </div>
    );
  }
}

ReactDOM.render((
  <App/>
), mountNode);