Buefy — Checkbox and Time Picker

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.

Checkbox Sizes

We can change the size of a check with the size prop:

<template>
  <section>
    <div class="field">
      <b-checkbox size="is-small">Small</b-checkbox>
    </div>
    <div class="field">
      <b-checkbox>Default</b-checkbox>
    </div>
    <div class="field">
      <b-checkbox size="is-medium">Medium</b-checkbox>
    </div>
    <div class="field">
      <b-checkbox size="is-large">Large</b-checkbox>
    </div>
  </section>
</template>

Checkbox Types

The type prop lets us change the color of the checkbox.

For example, we can write:

<template>
  <section>
    <div class="field">
      <b-checkbox type="is-info">Checkbox</b-checkbox>
    </div>
  </section>
</template>

to make it blue when it’s checked.

Other values include:

• is-success
• is-danger
• is-warning

Checkbox Button

We can make checkboxes display as buttons.

For example, we can write:

<template>
  <section>
    <b-field>
      <b-checkbox-button v-model="checkboxGroup" native-value="foo" type="is-danger">
        <span>foo</span>
      </b-checkbox-button>

      <b-checkbox-button v-model="checkboxGroup" native-value="bar" type="is-success">
        <span>bar</span>
      </b-checkbox-button>

      <b-checkbox-button v-model="checkboxGroup" native-value="baz">baz</b-checkbox-button>

      <b-checkbox-button v-model="checkboxGroup" native-value="disabled" disabled>Disabled</b-checkbox-button>
    </b-field>
    <p class="content">
      <b>Selection:</b>
      {{ checkboxGroup }}
    </p>
  </section>
</template>

<script>
export default {
  data() {
    return {
      checkboxGroup: []
    };
  }
};
</script>

We have the native-value prop that has the checked value of the checkbox button.

The b-checkbox-button is the checkbox button component.

Time Picker

Buefy comes with a time picker control to let us set the time.

For example, we can use it by writing:

<template>
  <section>
    <b-field label="Select time">
      <b-clockpicker rounded placeholder="Select time" hour-format="12"></b-clockpicker>
    </b-field>
  </section>
</template>

<script>
export default {};
</script>

We set th hour-format to a string with the format.

It can be '12' or '24' .

Non-Read-Only

We can make the input box editable with the editable prop:

<template>
  <section>
    <b-field label="Select time">
      <b-clockpicker editable placeholder="Select time" hour-format="12"></b-clockpicker>
    </b-field>
  </section>
</template>

<script>
export default {};
</script>

Range

The time range that can selected can be limited with the min-time and max-time props:

<template>
  <section>
    <b-field label="Select time">
      <b-clockpicker
        editable
        placeholder="Select time"
        hour-format="12"
        :min-time="minTime"
        :max-time="maxTime"
      ></b-clockpicker>
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    const min = new Date();
    min.setHours(0);
    min.setMinutes(0);
    const max = new Date();
    max.setHours(3);
    max.setMinutes(0);
    return {
      minTime: min,
      maxTime: max,
      isAmPm: false
    };
  }
};
</script>

We set the time min and max times with the Date instances.

The date part will be ignored.

Footer

Also, we can add a footer to show what we want.

For example, we can write:

<template>
  <section>
    <b-field label="Select time">
      <b-clockpicker v-model="time" placeholder="Select time" hour-format="12">
        <button class="button is-primary" @click="time = new Date()">
          <span>Now</span>
        </button>

        <button class="button is-danger" @click="time = undefined">
          <span>Clear</span>
        </button>
      </b-clockpicker>
    </b-field>
  </section>
</template>

<script>
export default {
  data() {
    return {
      time: undefined
    };
  }
};
</script>

We have the v-model directive to bind to the time state.

And we place the buttons in the default slot to make them show below the clock picker.

We set the time to various values with them.

Conclusion

We can change checkboxes to display what we want.

Also, we can add a time picker with Buefy.