Star Rating system

Questions
1

Hi, is there a star rating system in F7 V5?

In jquery I used:

and I was looking for something similar…

Thanks

2

i made my own rate system, f7+ vuejs.
maybe you can use it as base.
code:

<template lang='pug'>
.ss-show-rate-container
  .stars-container(v-if='!canRate')
    .gold(v-for='(stars, i) in goldStars(rate)')
      .fas.fa-star
    .gray(v-for='(stars, i) in grayStars(rate)')
      .fas.fa-star
  .stars-container(v-if='canRate')
    .gold(v-for='(stars, i) in rateGold', @click='setRateGray(stars)')
      .fas.fa-star
    .gray(v-for='(stars, i) in rateGray' @click='setRateGold(stars)')
      .fas.fa-star
    span(v-if='showAmount') Votos: {{amount}}
</template>

<script>
export default {
  name: 'StarRate',
  data () {
    return {
    }
  },
  props: {
    rate: {
      type: Number,
      required: true
    },
    rateGold: {
      type: Number,
      required: false
    },
    rateGray: {
      type: Number,
      required: false
    },
    amount: {
      type: Number,
      required: true,
      default: 0
    },
    showAmount: {
      type: Boolean,
      required: false,
      default: true
    },
    canRate: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  mounted () {
    this.$nextTick(() => {
    })
  },
  methods: {
    setRateGold (cant) {
      if ((this.rateGold + cant) <= 5) {
        this.rateGold = this.rateGold + cant
      }
      this.rateGray = 5 - this.rateGold
      this.$emit('rate', this.rateGold)
    },
    setRateGray (cant) {
      this.rateGold = cant
      this.rateGray = 5 - cant
      this.$emit('rate', this.rateGold)
    },
    goldStars (cant) {
      return parseInt(cant)
    },
    grayStars (cant) {
      return parseInt(5 - parseInt(cant))
    }
  }
}
</script>
<style lang="scss" scoped>
.ss-show-rate-container {
  .stars-container{
    height: 40px;
    text-align: center;
  }

  .stars-container .gray, .stars-container .gold {
    font-size: 10px;
    text-align: center;
    float: none;
    display: inline;
    margin: 5px 0;
  }

  .gold {
    color: #F39C12;
    float: left;
  }
  .gray {
    color: gray;
    float: left;
  }
  span {
    font-size: 15px;
    // font-size: 12px;
  }
}
</style>
3

Thank you. Unfortunately no experience with Vue… I might end up finding something in vanilla JS and adapt to F7 :slight_smile:

4

You can adapt the code to template7.