BootstrapVue — Button Groups and Toolbars, and Calendar

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to add button groups and toolbars to group buttons.

We also look at how to use the calendar to let users select dates.

Button Group

Button groups let us group a series of buttons together.

To add a button group, we can use the b-button-group component.

For instance, we can write:

<template>
  <div id="app">
    <b-button-group>
      <b-button>Button 1</b-button>
      <b-button>Button 2</b-button>
    </b-button-group>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have the b-button-group component with b-button components inside.

Vertical Groups

We can make the group vertical by adding the vertical prop:

<template>
  <div id="app">
    <b-button-group vertical>
      <b-button>Button 1</b-button>
      <b-button>Button 2</b-button>
    </b-button-group>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Then we make the buttons arranged vertically.

Dropdown Menu

We can add dropdown menus inside our button group.

For instance, we can write:

<template>
  <div id="app">
    <b-button-group>
      <b-button>Button 1</b-button>
      <b-dropdown right text="Menu">
        <b-dropdown-item>foo</b-dropdown-item>
        <b-dropdown-divider></b-dropdown-divider>
        <b-dropdown-item>bar</b-dropdown-item>
      </b-dropdown>
    </b-button-group>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have a dropdown menu on the right of the button with the b-dropdown component.

We have b-dropdown-itemn and b-dropdown-divider components inside.

Button Toolbar

A button toolbar is similar to a button group.

It groups multiple buttons together.

Also, we can use it to group multiple button groups together.

We use the b-button-toolbar component to create a button toolbar.

For instance, we can write:

<template>
  <div id="app">
    <b-button-toolbar>
      <b-button-group class="mx-1">
        <b-button>apple</b-button>
        <b-button>orange</b-button>
      </b-button-group>
      <b-button-group class="mx-1">
        <b-button>banana</b-button>
        <b-button>grape</b-button>
      </b-button-group>
    </b-button-toolbar>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

The mx-1 class make the groups spaced apart.

We apply to the button groups to add a margin between them.

We can also add a dropdown menu inside a button toolbar as we do with button groups.

For instance, we can write:

<template>
  <div id="app">
    <b-button-toolbar>
      <b-button-group class="mx-1">
        <b-button>apple</b-button>
        <b-button>orange</b-button>
      </b-button-group>

      <b-dropdown class="mx-1" right text="menu">
        <b-dropdown-item>foo</b-dropdown-item>
        <b-dropdown-item>bar</b-dropdown-item>
      </b-dropdown>

      <b-button-group class="mx-1">
        <b-button>banana</b-button>
        <b-button>grape</b-button>
      </b-button-group>
    </b-button-toolbar>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have the same classes to keep them apart.

The text prop sets the text for the dropdown button.

b-dropdown-item have the dropdown items.

Calendar

BootstrapVue has the b-calendar component to create a calendar.

For instance, we can write:

<template>
  <div id="app">
    <b-calendar v-model="date" @context="onContext" locale="en-US"></b-calendar>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      date: new Date()
    };
  },
  methods: {
    onContext(e) {
      console.log(e);
    }
  }
};
</script>

We have the onContext method to get the selected date value when the calendar is clicked.

date is the model, which we bind to the calendar with v-model .

Disabled and Readonly State

We can disable the calendar with the disabled prop.

Likewise, we can add the readonly prop to make it read-only.

The difference between them is that disabled removes all interactivity, but readonly will disable selecting a date, but keep the component interactive.

So if we have:

<b-calendar disabled locale="en-US"></b-calendar>

then we disable the whole calendar.

If we have

<b-calendar readonly locale="en-US"></b-calendar>

Then we can navigate through the calendar but can’t select anything.

Date Constraints

We can limit the date range that can be selected with the min and max props.

For instance, we can write:

<template>
  <div id="app">
    <b-calendar v-model="date" :min="min" :max="max" locale="en-US"></b-calendar>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      date: new Date(),
      min: new Date(2020, 0, 1),
      max: new Date(2020, 11, 31)
    };
  }
};
</script>

Then we can only select dates that are in the year 2020.

Conclusion

We can use the calendar component to let users select dates.

The selectable date range can be limited.

Also, we can group buttons with button groups and button toolbars.