Rate

A quick rating operation on something

With MDI
With Font Awesome
<template>
    <section>
        <b-rate custom-text="With MDI"></b-rate>
        <b-rate icon-pack="fas" @change="success" custom-text="With Font Awesome"></b-rate>
    </section>
</template>
<script>
    export default {
        methods: {
            success() {
                this.$buefy.toast.open({
                    message: 'Thanks for you Rate!',
                    type: 'is-success'
                })
            }
        }
    }
</script>

# Custom Rate

Very bad Bad Good Very good Awesome
5 / 5 
<template>
    <section>
        <b-field grouped group-multiline>
            <b-field label="Max">
                <b-numberinput v-model="maxs" min="1" controls-position="compact">
                </b-numberinput>
            </b-field>
            <b-field label="Icon Pack">
                <b-input v-model="packs" placeholder="e.g. mdi, fa or other">
                </b-input>
            </b-field>
            <b-field label="Icon">
                <b-input v-model="icons">
                </b-input>
            </b-field>
        </b-field>
        <b-field grouped group-multiline>
            <b-field label="Value">
                <b-numberinput v-model="rate" min="0" :max="maxs" 
                    :step="isDisabled ? '.1' : '1'" controls-position="compact">
                </b-numberinput>
            </b-field>
            <b-field label="Custom Text">
                <b-input v-model="custom" placeholder="e.g. Points or Total reviews" :disabled="text">
                </b-input>
            </b-field>
            <b-field label="Size">
               <b-select v-model="sizes">
                    <option value="">default</option>
                    <option value="is-small">is-small</option>
                    <option value="is-medium">is-medium</option>
                    <option value="is-large">is-large</option>
                </b-select>
            </b-field>
        </b-field>
        <div class="block">
            <b-switch v-model="isRtl">Rtl</b-switch>
            <b-switch v-model="score" :disabled="text">Show Score</b-switch>
            <b-switch v-model="text" :disabled="score">Show Text</b-switch>
            <b-switch v-model="isDisabled">Read Only (Support Decimal)</b-switch>
            <b-switch v-model="isSpaced">Spaced</b-switch>
        </div>
        <b-field label="Texts Template">
            <b-taginput
                v-model="texts"
                :maxtags="maxs"
                :disabled="score">
            </b-taginput>
        </b-field>
        <hr>
        <b-rate 
            v-model="rate"
            :icon-pack="packs"
            :icon="icons" 
            :max="maxs" 
            :size="sizes"
            :show-score="score"
            :custom-text="custom"
            :show-text="text"
            :texts="texts"
            :rtl="isRtl"
            :spaced="isSpaced"
            :disabled="isDisabled">
        </b-rate>
    </section>
</template>
<script>
    export default {
        data() {
            return {
                rate: 4.6,
                maxs: 5,
                sizes: '',
                packs: 'mdi',
                icons: 'star',
                score: false,
                custom: '',
                text: false,
                texts: ['Very bad', 'Bad', 'Good', 'Very good', 'Awesome'],
                isRtl:false,
                isSpaced: false,
                isDisabled: true
            }
        }
    }
</script>

# API

Rate

Name
Description
Type
Values
Default
v-modelBinding value Number —0
maxMax rating score Number —5
iconto specify the icon String —star
icon-packIcon pack to use String mdi, fa, fas, far, fab, fad, falmdi
sizeInclude show-text, show-score and custom-text, optional String is-small, is-medium, is-large—
rtlChange text direction show-text, show-score and custom-text to left Boolean —false
spacedAdded spacing for icons Boolean —false
disabledRead only, if true Support decimal value Boolean —false
show-scoreDisplay value Boolean —false
show-textDisplay texts template. show-score and show-text cannot be true at the same time Boolean —false
custom-textDisplay custom text like a total points or total reviews, and this only for show-score String ——
textsTexts template only for show-text, like on e-commerce Array ——

# Variables

You can use these variables to customize this component.

Name
Description
Default
$rate-colorThe rate color$grey-lighter
$rate-color-activeThe rate for color when activedarken($warning, 5%)
$rate-spacedThe rate spaced of between only icon0.25rem
$rate-text-spacedThe rate spaced of between text and icon0.35rem

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub