Buefy is a UI framework that’s based on Bulma.
In this article, we’ll look at how to use Buefy in our Vue app.
Radio Button
We can add radio buttons to let users select options from a set.
For example, we can write:
<template>
<section>
<div class="block">
<b-radio v-model="fruit" name="fruit" native-value="apple">apple</b-radio>
<b-radio v-model="fruit" name="fruit" native-value="orange">orange</b-radio>
<b-radio v-model="fruit" name="fruit" native-value="grape">grape</b-radio>
</div>
<p>{{fruit}}</p>
</section>
</template>
<script>
export default {
data() {
return {
fruit: ""
};
}
};
</script>
to add the b-radio components to add the radio buttons.
name and v-model should be the same so we can only select one of them.
native-value has the value we set as the model value.
v-model binds the selected value to the model.
Sizes
We can change the size with the size prop:
<template>
<section>
<div class="block">
<b-radio size="is-large" v-model="fruit" name="fruit" native-value="apple">apple</b-radio>
<b-radio size="is-large" v-model="fruit" name="fruit" native-value="orange">orange</b-radio>
<b-radio size="is-large" v-model="fruit" name="fruit" native-value="grape">grape</b-radio>
</div>
<p>{{fruit}}</p>
</section>
</template>
<script>
export default {
data() {
return {
fruit: ""
};
}
};
</script>
is-large made them large.
Type
We can change the styles with the type prop:
<template>
<section>
<div class="block">
<b-radio type="is-success" v-model="fruit" name="fruit" native-value="apple">apple</b-radio>
<b-radio type="is-success" v-model="fruit" name="fruit" native-value="orange">orange</b-radio>
<b-radio type="is-success" v-model="fruit" name="fruit" native-value="grape">grape</b-radio>
</div>
<p>{{fruit}}</p>
</section>
</template>
<script>
export default {
data() {
return {
fruit: ""
};
}
};
</script>
is-success make the radio buttons green.
Radio Button
We can style the radio buttons as buttons.
For example, we can write:
<template>
<section>
<b-field>
<b-radio-button v-model="radioButton" native-value="foo" type="is-danger">
<span>foo</span>
</b-radio-button>
<b-radio-button v-model="radioButton" native-value="bar" type="is-success">
<span>bar</span>
</b-radio-button>
<b-radio-button v-model="radioButton" native-value="baz">baz</b-radio-button>
<b-radio-button v-model="radioButton" native-value="disabled" disabled>disabled</b-radio-button>
</b-field>
<p>{{fruit}}</p>
</section>
</template>
<script>
export default {
data() {
return {
radioButton: ""
};
}
};
</script>
The type sets the styles.
b-radio-button render as buttons, but we can only choose one of them between the choices.
Rating Component
We can add a star rating input with the b-rate component.
For example, we can write:
<template>
<section>
<b-rate custom-text="rating" icon-pack="fa" icon="star"></b-rate>
</section>
</template>
<script>
export default {};
</script>
We set the icon-pack and icon to see the start icon.
It emits the change event:
<template>
<section>
<b-rate custom-text="rating" @change="success" icon-pack="fa" icon="star"></b-rate>
</section>
</template>
<script>
export default {
methods: {
success() {
this.$buefy.toast.open({
message: "success",
type: "is-success"
});
}
}
};
</script>
We can bind the selected value with v-model :
<template>
<section>
<b-rate custom-text="rating" v-model="rating" icon-pack="fa" icon="star"></b-rate>
</section>
</template>
<script>
export default {
data() {
return {
rating: 0
};
}
};
</script>
Conclusion
We can add a star rating and radio buttons with Buefy.
