A star-score library for web app.
- Create star-score component via SVG.
- Support for custom icons.
- Not relying on any third-party libraries.
- Support typescript.
# pnpm
$ pnpm add starscore
# yarn
$ yarn add starscore
# npm
$ npm i starscore
- Imports style.
import 'starscore/lib/style.css'
- Create a star-score instance.
<div id="starscore-container"></div>
import { createStarscore } from 'starscore'
const starscoreInstance = createStarscore({
container: '#starscore-container'
})
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 |
You can use it to change the score value after After instantiation.
starscoreInstance.setValue(5) // set 5 score
You can use this to obtain the current score value.
starscoreInstance.getValue()
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 the star-score instance.
starscoreInstance.destory()