Skip to content

Latest commit

 

History

History
165 lines (132 loc) · 4.58 KB

README.md

File metadata and controls

165 lines (132 loc) · 4.58 KB

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).

demo

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 }