quark-ui-rate v0.8.0
Introduction
Give rate to something.
It's a cross-framework component enpowered by quarkc.
Installation
npm i quark-ui-rate
Use whatever package manager you like.
Usage
Since it's cross-framework, you can use it in popular javascript frameworks like Vue
, React
, Angular
and jQuery
.
Rate component is fully controlled, it only reacts to passed-down attribute changes.
First import it in your main JS entry:
import "quark-ui-rate";
Vue
First create an attribute(vue2)in your .vue SFC script:
export default {
data() {
return {
// create attribute to bind
rateValue: 4.7,
};
},
methods: {
handleInput(event) {
this.rateValue = event.detail;
},
handleChange(event) {
console.log("value changed", event.detail);
},
},
};
or writable ref(vue3):
import { ref } from "vue";
const rateValue = ref(4.7);
const handleInput = (event) => {
// set ref's value
rateValue.value = event.detail;
};
const handleChange = (event) => {
console.log("value changed", event.detail);
};
Then in your .vue SFC template, bind it to value attribute:
<quark-ui-rate
size="1.5rem"
:value="rateValue"
space="0.5rem"
color="#ddd"
active-color="linear-gradient(to right, #a8f, #8af)"
@input="handleInput"
@change="handleChange"
></quark-ui-rate>
fix console warning
By default, Vue will try to resolve any non-native HTML tag as a registered Vue component before falling back to rendering it as custom element. This will cause Vue to emit a "failed to resolve component" warning during development. Your should tell Vue to ignore element with name "quark-ui-rate" or just ignore any element prefixed with "quark-". Please refer to Vue's official document for resolution and detailed explanation.
React
in your function component:
import { useState } from "react";
export default function App() {
const [value, setValue] = useState(4.7);
const handleInput = (event) => {
setValue(event.detail);
};
const handleChange = (event) => {
console.log("value changed", event.detail);
};
return (
<div>
<quark-ui-rate
size="1.5rem"
value={value}
space="0.5rem"
color="#ddd"
activeColor="linear-gradient(to right, #a8f, #8af)"
onInput={handleInput}
onChange={handleChange}
></quark-ui-rate>
</div>
);
}
Vanilla JS
document.addEventListener("DOMContentLoaded", () => {
const rate = document.getElementById("rate");
rate.addEventListener("input", (event) => {
rate.setAttribute("value", event.detail);
});
rate.addEventListener("change", (event) => {
console.log("value changed", event.detail);
});
});
Then use it as a normal web component in your .html files:
<quark-ui-rate
id="rate"
size="1.5rem"
value="4.7"
space="0.5rem"
color="#ddd"
activeColor="linear-gradient(to right, #a8f, #8af)"
></quark-ui-rate>
Examples above show a 4.7 stars rating out of 5 (top rating stars' count can be customized by the component property count, which is default to 5
).
API
Attributes
Attribute | Description | Type | Default |
---|---|---|---|
value | current rating | number | 0 |
count | icon count | number | 5 |
size | icon size, unit default to 'px' | number | string | 20px |
space | space between icons | number | string | 4px |
icon | icon's url | string | |
color | default color of icon | string | #F0F3F5 |
activeColor | active color of icon | string | |
allowHalf | is half select allowed | boolean | false |
readonly | is readonly | boolean | false |
disabled | is disabled | boolean | false |
Events
Event | Description | Parameters |
---|---|---|
input | called when new rating value given | { detail: number } |
change | called when rating value changed | { detail: number } |
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago