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.
Customize Tag Input
We can customize our tag input in various ways.
We can limit the number of tags we can add and the number of characters each can have.
The maxlength prop limits the number of characters in a tag.
The maxtags prop limits the number of tags we can enter.
For example, we can write:
<template>
<section>
<div class="field">
<b-taginput v-model="tags" maxlength="10" placeholder="Add a tag"></b-taginput>
{{tags}}
</div>
</section>
</template>
<script>
export default {
data() {
return { tags: [] };
}
};
</script>
to limit the number of characters of each tag to 10 max.
And we can write:
<template>
<section>
<div class="field">
<b-taginput v-model="tags" maxtags="5" placeholder="Add a tag"></b-taginput>
{{tags}}
</div>
</section>
</template>
<script>
export default {
data() {
return { tags: [] };
}
};
</script>
to limit the max number of tags to 5.
We can change the outline color with the type prop on the b-field:
<template>
<section>
<b-field type="is-success">
<b-taginput v-model="tags" placeholder="Add a tag"></b-taginput>
{{tags}}
</b-field>
</section>
</template>
<script>
export default {
data() {
return { tags: [] };
}
};
</script>
Now the outline is green.
The type prop can be added to the b-taginput to change the background color of the tags:
<template>
<section>
<b-field>
<b-taginput type="is-dark" v-model="tags" placeholder="Add a tag"></b-taginput>
{{tags}}
</b-field>
</section>
</template>
<script>
export default {
data() {
return { tags: [] };
}
};
</script>
The size prop changes the size of the tag input:
<template>
<section>
<b-field>
<b-taginput size="is-large" v-model="tags" placeholder="Add a tag"></b-taginput>
{{tags}}
</b-field>
</section>
</template>
<script>
export default {
data() {
return { tags: [] };
}
};
</script>
The rounded prop makes the tag input round:
<template>
<section>
<b-field>
<b-taginput rounded v-model="tags" placeholder="Add a tag"></b-taginput>
{{tags}}
</b-field>
</section>
</template>
<script>
export default {
data() {
return { tags: [] };
}
};
</script>
The attched prop makes the tags rectangular:
<template>
<section>
<b-field>
<b-taginput attached v-model="tags" placeholder="Add a tag"></b-taginput>
{{tags}}
</b-field>
</section>
</template>
<script>
export default {
data() {
return { tags: [] };
}
};
</script>
We can add validation with the before-adding prop:
<template>
<section>
<b-field>
<b-taginput :before-adding="beforeAdding" v-model="tags" placeholder="Add a tag"></b-taginput>
{{tags}}
</b-field>
</section>
</template>
<script>
export default {
data() {
return { tags: [] };
},
methods: {
beforeAdding(tag) {
return tag.length === 3;
}
}
};
</script>
The beforeAdding method will be run before the tag is added.
The tag will only be added if it returns true .
tag has the entered value.
Conclusion
We can customize tag inputs the way we like with Buefy’s tag input.
