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.
Time Picker
Buefy has a time picker component.
We can add the b-timepicker component to use it.
For example, we can write;
<template>
<section>
<b-field>
<b-timepicker
rounded
placeholder="Click to select..."
enable-seconds
hour-format="12"
locale="en"
></b-timepicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
The component takes a few props.
rounded makes the input box have round corners.
placeholder has the placeholder.
enable-seconds has a dropdown to pick the seconds.
hour-format sets the hour format.
locale sets the locale.
We can make the time picker editable with the editable prop:
<template>
<section>
<b-field>
<b-timepicker
rounded
placeholder="Click to select..."
enable-seconds
hour-format="12"
locale="en"
editable
></b-timepicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
The range of allowed values can be set with the min-time and max-time props:
<template>
<section>
<b-field>
<b-timepicker placeholder="Click to select..." :min-time="minTime" :max-time="maxTime"></b-timepicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
const min = new Date();
min.setHours(0);
min.setMinutes(0);
const max = new Date();
max.setHours(2);
max.setMinutes(0);
return {
minTime: min,
maxTime: max
};
}
};
</script>
The footer can be changed by populating the default slot:
<template>
<section>
<b-field>
<b-timepicker v-model="time" placeholder="Click to select...">
<button class="button is-primary" @click="time = new Date()">
<span>Now</span>
</button>
<button class="button is-danger" @click="time = null">
<span>Clear</span>
</button>
</b-timepicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
time: new Date()
};
}
};
</script>
We added 2 buttons into the default slot and they’ll be displayed below the time picker.
Also, we can make it inline with the inline prop:
<template>
<section>
<b-field>
<b-timepicker v-model="time" inline></b-timepicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
time: new Date()
};
}
};
</script>
The increments of the dropdown can be set with the incrementMinutes and incrementHours props:
<template>
<section>
<b-field>
<b-timepicker v-model="time" :incrementMinutes="5" :incrementHours="2"></b-timepicker>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
time: new Date()
};
}
};
</script>
File Upload Input
The b-upload component is the file upload input.
For example, we can write:
<template>
<b-field class="file is-primary" :class="{'has-name': !!file}">
<b-upload v-model="file">
<span class="file-cta">
<span>Click to upload</span>
</span>
<span class="file-name" v-if="file">{{ file.name }}</span>
</b-upload>
</b-field>
</template>
<script>
export default {
data() {
return {
file: null
};
}
};
</script>
to add it.
The file-cta class makes the input display as a button.
v-model binds the selected file to the file state.
We can make the file input appears as a drop zone with the drag-drop prop:
<template>
<b-field class="file is-primary" :class="{'has-name': !!file}">
<b-upload v-model="file" drag-drop>
<section class="section">
<div class="content has-text-centered">
<p>Drop your files here or click to upload</p>
</div>
</section>
</b-upload>
</b-field>
</template>
<script>
export default {
data() {
return {
file: null
};
}
};
</script>
The expanded prop makes the button longer:
<template>
<b-field class="file">
<b-upload v-model="file" expanded>
<a class="button is-primary is-fullwidth">
<span>{{ file && file.name || "Click to upload"}}</span>
</a>
</b-upload>
</b-field>
</template>
<script>
export default {
data() {
return {
file: null
};
}
};
</script>
Conclusion
We can add a time picker and file upload input with Buefy.
