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

Max

Icon Pack

Icon

Value

Custom Text

Size

Locale

Texts Template

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-model`	Binding value	Number	—	`0`
`max`	Max rating score	Number	—	`5`
`icon`	to specify the icon	String	—	`star`
`icon-pack`	Icon pack to use	String	`mdi`, `fa`, `fas`, `far`, `fab`, `fad`, `fal`	`mdi`
`size`	Include `show-text`, `show-score` and `custom-text`, optional	String	`is-small`, `is-medium`, `is-large`	—
`rtl`	Change text direction `show-text`, `show-score` and `custom-text` to left	Boolean	—	`false`
`spaced`	Added spacing for icons	Boolean	—	`false`
`disabled`	Read only, if `true` Support decimal value	Boolean	—	`false`
`show-score`	Display value	Boolean	—	`false`
`show-text`	Display texts template. `show-score` and `show-text` cannot be true at the same time	Boolean	—	`false`
`custom-text`	Display custom text like a total points or total reviews, and this only for `show-score`	String	—	—
`texts`	Texts template only for `show-text`, like on e-commerce	Array	—	—
`locale`	Accept a string with a BCP 47 language tag, or an array of such strings. See Unicode BCP 47 locale identifier	String, Array of String	—	`undefined`: default to browser locale.

Name	Description	Parameters
`change`	Triggers when rate value is changed	`value: Boolean`

# Variables

You can use these variables to customize this component.

Name	Description	Default
`$rate-color`	The rate color	`$grey-lighter`
`$rate-color-active`	The rate for color when active	`darken($warning, 5%)`
`$rate-spaced`	The rate spaced of between only icon	`0.25rem`
`$rate-text-spaced`	The rate spaced of between text and icon	`0.35rem`

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

Improve this page on GitHub