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.
Number Input
We can add a number input with the b-numberipnut component.
For example, we can write:
<template>
<div>
<b-field>
<b-numberinput v-model="number"></b-numberinput>
</b-field>
</div>
</template>
<script>
export default {
data() {
return {
number: 0
};
}
};
</script>
to add it.
The disabled prop disables it.
rounded prop makes the input box rounded.
loading adds a loading indicator.
The type and message props styles the number input:
<template>
<div>
<b-field type="is-success" message="Rate is valid">
<b-numberinput v-model="number"></b-numberinput>
</b-field>
</div>
</template>
<script>
export default {
data() {
return {
number: 0
};
}
};
</script>
type has the style name and message has the message.
Min and Max
The min and max props restrict the values that we can set:
<template>
<div>
<b-field>
<b-numberinput v-model="number" min="0" max="10"></b-numberinput>
</b-field>
</div>
</template>
<script>
export default {
data() {
return {
number: 0
};
}
};
</script>
The buttons will be grayed out when we hit the limits.
Steps
The increment quantity can be changed with the step prop:
<template>
<div>
<b-field>
<b-numberinput v-model="number" step="5"></b-numberinput>
</b-field>
</div>
</template>
<script>
export default {
data() {
return {
number: 0
};
}
};
</script>
Sizes
The size can be changed with the size prop:
<template>
<div>
<b-field>
<b-numberinput v-model="number" size="is-large"></b-numberinput>
</b-field>
</div>
</template>
<script>
export default {
data() {
return {
number: 0
};
}
};
</script>
We make it large with the size prop set to 'is-large' .
We can customize it in various ways.
For example, we can write:
<template>
<div>
<b-field label="Compact and rounded">
<b-numberinput controls-position="compact" controls-rounded></b-numberinput>
</b-field>
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
to make the buttons rounded.
We can put it into a group with the grouped prop:
<template>
<div>
<b-field label="Grouped">
<b-field grouped>
<p class="control">
<button class="button">Button</button>
</p>
<b-numberinput/>
</b-field>
</b-field>
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
Conclusion
We can add a number input with the Buefyb-numberinput component.
