[Vuejs]-Vuejs : Set the vertical prop of tabs dynamically according to screen size

by

3👍

✅

You can add an event listener on the resize event and then have a computed property to say if it should be set to vertical or not.

I think the misunderstanding may of been in reading the documentation, you can pass a boolean to it, but setting it on the element/component like vertical will act as if you’ve done :vertical="true"

new Vue({
  el: "#app",
  computed: {
    vertical() {
      if (this.size > 992)
        return true
      return false
    }
  },
  data() {
    return {
      size: 0
    }
  },
  mounted() {
    var that = this
    window.onresize = function() {
      that.size = window.innerWidth
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.15.0/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap-vue@2.15.0/dist/bootstrap-vue.css">
<div id="app">
  <b-tabs pills card :vertical="vertical">
    <b-tab title="Tab 1" active>
      <b-card-text>Tab contents 1</b-card-text>
    </b-tab>
    <b-tab title="Tab 2">
      <b-card-text>Tab contents 2</b-card-text>
    </b-tab>
    <b-tab title="Tab 3">
      <b-card-text>Tab contents 3</b-card-text>
    </b-tab>
  </b-tabs>
</div>

You’ll most likely want to kill the event listener when the component isn’t being used anymore, but this should be enough of an example to get you going

👤George

Leave a comment