Brennan  Veum

Brennan Veum

1618524000

Vuetify — Star Ratings

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Ratings

The v-rating component lets us add a star rating input to our app.

#javascript

What is GEEK

Buddha Community

Vuetify — Star Ratings

How to Create Emoji Star Rating Widget using only HTML & CSS

In this blog you’ll learn how to create Emoji Star Rating Widget using only HTML & CSS.

To create emoji star rating widget using only HTML & CSS. First, you need to create two files one HTML File and another one is CSS File.

1: First, create an HTML file with the name of index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emoji Stars Rating | Codequs</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div class="wrapper">
    <input type="radio" name="rate" id="star-1">
    <input type="radio" name="rate" id="star-2">
    <input type="radio" name="rate" id="star-3">
    <input type="radio" name="rate" id="star-4">
    <input type="radio" name="rate" id="star-5">
    <div class="content">
      <div class="outer">
        <div class="emojis">
          <li class="slideImg"><img src="emojis/emoji-1.png" alt=""></li>
          <li><img src="emojis/emoji-2.png" alt=""></li>
          <li><img src="emojis/emoji-3.png" alt=""></li>
          <li><img src="emojis/emoji-4.png" alt=""></li>
          li><img src="emojis/emoji-5.png" alt=""></li>
        </div>
      </div>
      <div class="stars">
        <label for="star-1" class="star-1 fas fa-star"></label>
        <label for="star-2" class="star-2 fas fa-star"></label>
        <label for="star-3" class="star-3 fas fa-star"></label>
        <label for="star-4" class="star-4 fas fa-star"></label>
        <label for="star-5" class="star-5 fas fa-star"></label>
      </div>
    </div>
    <div class="footer">
      <span class="text"></span>
      <span class="numb"></span>
    </div>
  </div>
</body>
</html>

2: Second, create a CSS file with the name of style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(#FED151, #DE981F);
}
.wrapper{
  background: #f6f6f6;
  max-width: 360px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper .content{
  padding: 30px;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.wrapper .outer{
  height: 135px;
  width: 135px;
  overflow: hidden;
}
.outer .emojis{
  height: 500%;
  display: flex;
  flex-direction: column;
}
.outer .emojis li{
  height: 20%;
  width: 100%;
  list-style: none;
  transition: all 0.3s ease;
}
.outer li img{
  height: 100%;
  width: 100%;
}
#star-2:checked ~ .content .emojis .slideImg{
  margin-top: -135px;
}
#star-3:checked ~ .content .emojis .slideImg{
  margin-top: -270px;
}
#star-4:checked ~ .content .emojis .slideImg{
  margin-top: -405px;
}
#star-5:checked ~ .content .emojis .slideImg{
  margin-top: -540px;
}
.wrapper .stars{
  margin-top: 30px;
}
.stars label{
  font-size: 30px;
  margin: 0 3px;
  color: #ccc;
}
#star-1:hover ~ .content .stars .star-1,
#star-1:checked ~ .content .stars .star-1,
#star-2:hover ~ .content .stars .star-1,
#star-2:hover ~ .content .stars .star-2,
#star-2:checked ~ .content .stars .star-1,
#star-2:checked ~ .content .stars .star-2,
#star-3:hover ~ .content .stars .star-1,
#star-3:hover ~ .content .stars .star-2,
#star-3:hover ~ .content .stars .star-3,
#star-3:checked ~ .content .stars .star-1,
#star-3:checked ~ .content .stars .star-2,
#star-3:checked ~ .content .stars .star-3,
#star-4:hover ~ .content .stars .star-1,
#star-4:hover ~ .content .stars .star-2,
#star-4:hover ~ .content .stars .star-3,
#star-4:hover ~ .content .stars .star-4,
#star-4:checked ~ .content .stars .star-1,
#star-4:checked ~ .content .stars .star-2,
#star-4:checked ~ .content .stars .star-3,
#star-4:checked ~ .content .stars .star-4,
#star-5:hover ~ .content .stars .star-1,
#star-5:hover ~ .content .stars .star-2,
#star-5:hover ~ .content .stars .star-3,
#star-5:hover ~ .content .stars .star-4,
#star-5:hover ~ .content .stars .star-5,
#star-5:checked ~ .content .stars .star-1,
#star-5:checked ~ .content .stars .star-2,
#star-5:checked ~ .content .stars .star-3,
#star-5:checked ~ .content .stars .star-4,
#star-5:checked ~ .content .stars .star-5{
  color: #fd4;
}
.wrapper .footer{
  border-top: 1px solid #ccc;
  background: #f2f2f2;
  width: 100%;
  height: 55px;
  padding: 0 20px;
  border-radius: 0 0 10px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer span{
  font-size: 17px;
  font-weight: 400;
}
.footer .text::before{
  content: "Rate your experience";
}
.footer .numb::before{
  content: "0 out of 5";
}
#star-1:checked ~ .footer .text::before{
  content: "I just hate it";
}
#star-1:checked ~ .footer .numb::before{
  content: "1 out of 5";
}
#star-2:checked ~ .footer .text::before{
  content: "I don't like it";
}
#star-2:checked ~ .footer .numb::before{
  content: "2 out of 5";
}
#star-3:checked ~ .footer .text::before{
  content: "This is awesome";
}
#star-3:checked ~ .footer .numb::before{
  content: "3 out of 5";
}
#star-4:checked ~ .footer .text::before{
  content: "I just like it";
}
#star-4:checked ~ .footer .numb::before{
  content: "4 out of 5";
}
#star-5:checked ~ .footer .text::before{
  content: "I just love it";
}
#star-5:checked ~ .footer .numb::before{
  content: "5 out of 5";
}
input[type="radio"]{
  display: none;
}

Now you’ve successfully created a Pure CSS Emoji Star Rating Widget.

James Ellis

James Ellis

1578063902

Collection of 5 Vue Rating Components for Vue.js Application

The Rating component for Vue represents a widget that allows you to choose a rating. You can configure the Vue Rating items size, image and the number of displayed items. In this article, I will introduce you to 5 rating components that I have collected.

1. Star Rating Component for Vue 2.x

Need more than stars? Check out vue-rate-it with hundreds of different raters built in!

A simple, highly customisable star rating component for Vue 2.x.

Star Rating Component for Vue 2.x

Demo: https://jsfiddle.net/craig_h_411/992o7cq5/

Download: https://github.com/craigh411/vue-star-rating/archive/master.zip

2. VueStar

A like button with delightful star animation powered by Vue.js.

VueStar

Download: https://github.com/OYsun/VueStar/archive/master.zip

3. V-Rating

Rating component in Semantic-UI made with VueJS (< 1kB, blazing fast)

Simple ui rating component for Vue made with Semantic-UI.

This is on GitHub so let me know if I’ve b0rked it somewhere, give me a star :star: if you like it :beers:

V-Rating

Demo: https://codesandbox.io/s/qklrp5nwn4?fontsize=14

Download: https://github.com/vinayakkulkarni/v-rating/archive/master.zip

4. vue-dynamic-star-rating

A Highly Customizable, easy-to-use elegant stars rating component (similar to Google Play)

vue-dynamic-star-rating

Demo: https://codesandbox.io/s/9846q4oz4r

Download: https://github.com/JonathanDn/vue-stars-rating/archive/master.zip

5. Flexible VueJS

Flexible VueJS input control for ratings (stars, etc.)

Flexible VueJS

Demo: https://tallent.us/vue-stars/

Download: https://github.com/richardtallent/vue-stars/archive/master.zip

I hope you like them!

#vue #vue-rating #rating-component #star-rating

A Flutter Package to Rate Items in Stars

#Rate In Stars Rate In Stars allows you to rate items in your Flutter app.

Installation

  1. Add the latest version of package to your pubspec.yaml (and run 'dart pub get'):
dependencies:
    rate_in_stars: ^0.0.1
  1. Import the package and ise it in your Flutter app.
import 'package:rate_in_stars/rate_in_stars.dart';

Usage

The rating can be editable - dynamic, or non editable - static.

Example

There are a number of properties that you can modify:

  • rating
  • editable
  • iconSize
  • color
class RatingStarsWidget extends StatelessWidget {
  const RatingStarsWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RatingStars(
        editable: true,
        rating: 3.5,
        color: Colors.amber,
        iconSize: 32,
      ),
    );
  }
}

Next Steps

  • Accept different icon types

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add rate_in_stars

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  rate_in_stars: ^0.0.2

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:rate_in_stars/rate_in_stars.dart'; 

Download Details:

Author: SamiaTheDev

Source Code: https://github.com/SamiaTheDev/RateInStars

#flutter #star 

Using 'star-rating.js' for Star Rating with JavaScript Library

Description:

star-rating.js is a small JavaScript library to generate a customizable, progressively enhancement star rating control from a regular select box with numeric values.

How to use it:

1. Create a select box for your star rating system.

<select class="star-rating">
    <option value="">Select a rating</option>
    <option value="5">Excellent</option>
    <option value="4">Very Good</option>
    <option value="3">Average</option>
    <option value="2">Poor</option>
    <option value="1">Terrible</option>
</select>

2. Install & download the star-rating.js.

# Yarn
$ yarn add star-rating.js

# NPM
$ npm install star-rating.js --save

3. Load necessary JavaScript and CSS files in the document.

<link href="dist/star-rating.css" rel="stylesheet" />
<script src="dist/star-rating.min.js"></script>

4. Initialize the library on the select box and done.

var starRatingControl = new StarRating( '.star-rating' );

5. Set the maximum number of stars allowed to select. Default: 10.

var starRatingControl = new StarRating('.star-rating',{
    maxStars: 5
});

6. Determine whether or not to show the label next to the star rating control. Default: true.

var starRatingControl = new StarRating('.star-rating',{
    showText: false
});

7. Determine whether or not to clear the rating by clicking on the selected stars. Default: true.

var starRatingControl = new StarRating('.star-rating',{
    showText: false
});

8. More configuration options.

var starRatingControl = new StarRating('.star-rating',{
    classname: "gl-star-rating"
    initialText: "Select a Rating"
});

9. You can also pass the options object to the data-options in your select element.

<select class="star-rating" data-options='{"clearable":false, "showText":false}'>
  ...
</select>

10. Destroy & re-init the star rating control.

starRatingControl.destroy();
starRatingControl.rebuild();

11. Override the default CSS styles in the star-rating.scss.

$star-rating-defaults: (
  base-classname : 'gl-star-rating',
  base-display   : block,
  base-height    : 26px,
  font-size      : 0.8em,
  font-weight    : 600,
  parent         : '',
  star-empty     : url(../img/star-empty.svg),
  star-full      : url(../img/star-full.svg),
  star-half      : url(../img/star-half.svg),
  star-size      : 24px,
  text-background: #1a1a1a,
  text-color     : #fff,
);

Thank you for reading! Please share if you liked it!

#javascript #css #jQuery #Star Rating

Monty  Boehm

Monty Boehm

1662473885

5 Best React Star Rating Libraries

In this article, we take a look at the 5 Best React Star Rating Libraries

1 - React Star Ratings

Customizable react star ratings. SVG stars that show aggregate star ratings to the hundreths decimal point.

Install

npm install --save react-star-ratings

Heads up

I made a better version (in my opinion at least) of this repo right here: react-ratings-declarative

It is a lot more extendable and customizable.

Usage

import StarRatings from './react-star-ratings';

class Foo extends Component {
    changeRating( newRating, name ) {
      this.setState({
        rating: newRating
      });
    }

    render() {
      // rating = 2;
      return (
        <StarRatings
          rating={this.state.rating}
          starRatedColor="blue"
          changeRating={this.changeRating}
          numberOfStars={6}
          name='rating'
        />
      );
    }
}


class Bar extends Component {
  render() {
    // aggregateRating = 2.35;
    return (
      <StarRatings
        rating={2.403}
        starDimension="40px"
        starSpacing="15px"
      />
    );
  }
}

View Github

2 - React star rate

Lightweight, customizable star ratings component for React

Features

  • 🔩 Easily Customizable
  • 🕊 Lightweight - less than 4kb including styles
  • Accessible

Example

You can visit the example here:
View on CodeSandbox

Installation

With yarn

yarn add react-star-rate

With NPM

npm install react-star-rate

Getting Started

You can add React Stars Rating to your project using the <StarsRating /> component.

import { useState } from 'react';

import StarsRating from 'react-star-rate';

const App = () => {
  const [value, setValue] = useState(0);
  return (
    <div>
      <StarsRating
        value={value}
        onChange={value => {
          setValue(value);
        }}
      />
    </div>
  );
};

View Github

3 - React Rating

React Rating is a react rating component which supports custom symbols both with inline styles and glyphicons found in popular CSS Toolkits like Fontawesome or Bootstrap.

This React component was inspired by the jQuery plugin bootstrap-rating.

Installation

You can install react-rating component using the npm package manager:

npm install --save react-rating

Dependencies

The react-rating component peer depends on the React library.

You can install React using npm too:

npm install --save react

Upgrade Warning

If you are using a version of React Rating < v1.0 be aware that there are API changes between anything < v1.0 and v1.0 . See the Properties and Deprecated Properties and Callbacks sections below for a documentation of the current API and how it compares to the old.

Usage

Require the Rating Component

var Rating = require('react-rating');

Start using it

With raw javascript:

React.createElement(Rating)

Or with JSX:

<Rating />

View Github

4 - React-rater

Interative & customizable star rater

Star rater 

84562331-469ae280-ad86-11ea-9567-9d554b204138.gif

Install

npm install react-rater
import Rater from 'react-rater'
import 'react-rater/lib/react-rater.css'

// ...
render() {
  return (<Rater total={5} rating={2} />)
}

Note: If your react version is under 16.8.0 without hooks support, please keep using react-rater@5

API

<Rater total={} rating={} interactive={} onRate={} onRating={} />

All attributes are optional.

  • total: Number, default 5
  • rating: Number, default 0
  • interactive: Boolean, default true. Create a read-only rater by setting this attribute to false.
  • onRate: function({ rating }). Callback to retrieve rating value. Called after rated.
  • onRating: function({ rating }). Callback to retrieve rating value. Called during rating (mouse moving between stars).
  • onCancelRate: function({ rating }). Called when mouse moves out from rater.

From version 5.0.0, callback is split into onRate & onRating & onCancelRate. onRate is called when mouse click, while onRating is called when mouse moves between star components and onCancelRate is called when mouse leaves rater. Usually you only need onRate.

Read-only mode

Set interactive={false} to create a read-only rater.

In read-only mode, rating could contain a fractional part like 3.6. (Thanks to @devmtnaing)

Callback

onRate & onRating

(rating is passed with the React's SyntheticEvent)

{
  rating: Number
  ...syntheticEvent
}

Styling

The CSS way

$react-rater-link: #ccc !default; // color of star not rated
$react-rater-hover: #666 !default; // color of star on hover
$react-rater-active: #000 !default; // color of star rated

The JS way

<Rater /> will repeat its children until counts reach total. https://github.com/NdYAG/react-rater/blob/master/src/index.js#L69

In this way you can define your own 'star' component (src/star.js).

<Rater total={5}>
  <Heart />
</Rater>

and style it based on these props:

{
  isActive: PropTypes.bool,
  isActiveHalf: PropTypes.bool,
  willBeActive: PropTypes.bool,
  isDisabled: PropTypes.bool
}

View Github

5 - React-rating

Zero-dependency, highly customizable rating component for React.

Features

  • Use any SVG: No headaches, icon fonts or packages to install in order to use your favorite shapes.
  • Smart half-fill and advanced behavior customization
  • Dead simple per-active-item styling
  • Truly responsive and mobile-first
  • Fully accessible with keyboard navigation and custom/default labels
  • Simple and clean DOM structure
  • Works both on the server and the client
  • Lightweight with zero dependencies
  • Fully typed with IntelliSense infos and autocomplete

Installation

yarn add @smastrom/react-rating
# npm install --save @smastrom/react-rating

Basic usage

Import the CSS and the component

import { Rating } from '@smastrom/react-rating';

import '@smastrom/react-rating/style.css';

Remix

app/root.tsx

import styles from '@smastrom/react-rating/style.css';

export function links() {
  return [{ rel: 'stylesheet', href: styles }];
}

export default function App() {
  // ...

in any page/component:

import { Rating } from '@smastrom/react-rating';

export default function Index() {
  // ...

Next

pages/_app.js

import '@smastrom/react-rating/style.css';

function MyApp({ Component, pageProps }) {
  // ...

in any page/component:

import { Rating } from '@smastrom/react-rating';

export default function Home() {
  // ...

Gatsby

gatsby-browser.js - Create the file at the root of your project if it doesn't exist, and relaunch the dev server.

import '@smastrom/react-rating/style.css';

in any page/component:

import { Rating } from '@smastrom/react-rating';

const IndexPage = () => {
  // ...

Vite

main.jsx

import '@smastrom/react-rating/style.css';

in any component:

import { Rating } from '@smastrom/react-rating';

const App = () => {
  // ...

Create React App

index.js

import '@smastrom/react-rating/style.css';

in any component:

import { Rating } from '@smastrom/react-rating';

const App = () => {
  // ...

Give it a max-width and init the state

Since Rating will span across the entire container, define a maximum width via inline styles, css class or wrap it in a responsive container:

const App = () => {
  const [ratingValue, setRatingValue] = useState(3); // <-- Init with 0 for no initial value

  return (
    <Rating
      style={{ maxWidth: 250 }}
      value={ratingValue}
      onChange={(selectedValue) => setRatingValue(selectedValue)}
    />
  );
};

CSS Class

my-styles.css

.my-rating-class {
  max-width: 600px;
}

App.jsx

import 'my-styles.css';

const App = () => {
  const [ratingValue, setRatingValue] = useState(3);

  return (
    <Rating
      className="my-rating-class"
      value={ratingValue}
      onChange={(selectedValue) => setRatingValue(selectedValue)}
    />
  );
};

Responsive container

const App = () => {
  const [ratingValue, setRatingValue] = useState(3);

  return (
    <div style={{ maxWidth: 600, width: '100%' }}>
      <Rating
        value={ratingValue}
        onChange={(selectedValue) => setRatingValue(selectedValue)}
      />
    </div>
  );
};

View Github

#react #star #rating