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>
        <div class="block">
            <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 label="Locale">
                    <b-select v-model="locale" :disabled="!score">
                        <option :value="undefined"></option>
                        <option value="de-DE">de-DE</option>
                        <option value="en-CA">en-CA</option>
                        <option value="en-GB">en-GB</option>
                        <option value="en-US">en-US</option>
                        <option value="es-ES">es-ES</option>
                        <option value="es-MX">es-MX</option>
                        <option value="fr-CA">fr-CA</option>
                        <option value="fr-FR">fr-FR</option>
                        <option value="it-IT">it-IT</option>
                        <option value="ja-JP">ja-JP</option>
                        <option value="pt-BR">pt-BR</option>
                        <option value="ru-RU">ru-RU</option>
                        <option value="zn-CN">zn-CN</option>
                    </b-select>
                </b-field>
            </b-field>
        </div>
        <b-field grouped group-multiline>
            <div class="control">
                <b-switch v-model="isRtl">Rtl</b-switch>
            </div>
            <div class="control">
                <b-switch v-model="score" :disabled="text">Show Score</b-switch>
            </div>
            <div class="control">
                <b-switch v-model="text" :disabled="score">Show Text</b-switch>
            </div>
            <div class="control">
                <b-switch v-model="isDisabled">Read Only (Support Decimal)</b-switch>
            </div>
            <div class="control">
                <b-switch v-model="isSpaced">Spaced</b-switch>
            </div>
        </b-field>
        <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"
            :locale="locale"
            :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,
                locale: undefined // Browser locale
            }
        }
    }
</script>

# API

Rate

Name
Description
Type
Values
Default
v-modelBinding valueNumber0
maxMax rating scoreNumber5
iconto specify the iconStringstar
icon-packIcon pack to useStringmdi, fa, fas, far, fab, fad, falmdi
sizeInclude show-text, show-score and custom-text, optionalStringis-small, is-medium, is-large
rtlChange text direction show-text, show-score and custom-text to leftBooleanfalse
spacedAdded spacing for iconsBooleanfalse
disabledRead only, if true Support decimal valueBooleanfalse
show-scoreDisplay valueBooleanfalse
show-textDisplay texts template. show-score and show-text cannot be true at the same timeBooleanfalse
custom-textDisplay custom text like a total points or total reviews, and this only for show-scoreString
textsTexts template only for show-text, like on e-commerceArray
localeAccept a string with a BCP 47 language tag, or an array of such strings. See Unicode BCP 47 locale identifierString, Array of Stringundefined: default to browser locale.

# 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