1.6.0 • Published 4 months ago
starscore v1.6.0
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 starscoreUsage
- 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'
})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 scoregetValue
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()