Skip to content

vcjs-dev/starscore

Repository files navigation


Starscore

A star-score library for web app.

Features

  • Create star-score component via SVG.
  • Support for custom icons.
  • Not relying on any third-party libraries.
  • Support typescript.

Installation

# pnpm
$ pnpm add starscore

# yarn
$ yarn add starscore

# npm
$ npm i starscore

Usage

  1. Imports style.
import 'starscore/lib/style.css'
  1. Create a star-score instance.
<div id="starscore-container"></div>
import { createStarscore } from 'starscore'

const starscoreInstance = createStarscore({
  container: '#starscore-container'
})

Options

Prop Type Default Value Description
container string,HTMLElement '' Specify the container of star-score.
initialValue number 0 Set a initialization score.
size number, string 20px Icon size.
gutter string, number 4px Icon gutter.
color string #ee0a24 Selected color.
voidColor string #c8c9cc Void color.
disabledColor string #c8c9cc Disabled color.
type string 'star' Specify this to use a built-in icon. You can use star or heart.
icon string - Specify this to change SVG string of the selected icon.
voidIcon string - Specify this to change SVG string of the void icon.
clearable boolean false Whether to allow clear when click again.
readonly boolean false Whether to be readonly.
disabled boolean false Whether to disable score.
allowHalf boolean false Whether to allow half star.
showDescription boolean false Whether to show current score description.
descriptionColor string #909399 Specify this to change the color of current score description.
descriptionFontSize string, number 13px Specify this to change the font-size of current score description.
scoreDetails Function () => '' Specify this to custom the desctiption content of current score. currentScore: number is the only parameter.
onChange Function - Event triggered when the current score changes. (currentScore: number) => void

APIs

Methods of instance

setValue

You can use it to change the score value after After instantiation.

starscoreInstance.setValue(5) // set 5 score

getValue

You can use this to obtain the current score value.

starscoreInstance.getValue()

setOptions

You can use it to change the options after After instantiation.

starscoreInstance.setOptions({
  disabled: true // disable the star-score
}, true)

The second parameter specifies whether to re-render, defaults is false.

destory

Destory the star-score instance.

starscoreInstance.destory()