[Vuejs]-How to hide only part of bootstrap sidebar?

by

0👍

Use the v-model instead of the directive & attach a class to it: then you can use CSS animation to overwrite default CSS values:

new Vue({
  el: "#app",
  data() {
    return {
      sidebar: false,
    }
  },
  methods: {
    toggleSidebar() {
      this.sidebar = !this.sidebar
    }
  }
})
.b-sidebar-outer.closed #sidebar-backdrop {
  display: block !important;
  transform: translateX(-270px);
  animation-name: sidebarAnim;
  animation-duration: 0.4s;
  animation-direction: reverse;
}

.b-sidebar-outer:not( .closed) #sidebar-backdrop {
  transform: translateX(0);
  animation-name: sidebarAnim;
  animation-duration: 0.4s;
}

@keyframes sidebarAnim {
  0% {
    transform: translateX(-270px);
    animation-timing-function: ease-in-out
  }
  100% {
    transform: translateX(0px);
    animation-timing-function: ease-in-out
  }
}
<!-- Add this to <head> -->

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="app">
  <b-container>
    <b-row>
      <b-col>
        <b-button @click="toggleSidebar">TOGGLE SIDEBAR</b-button>
      </b-col>
      <b-sidebar id="sidebar-backdrop" v-model="sidebar" title="Sidebar with backdrop" backdrop-variant :class="{ closed: !sidebar }" backdrop shadow>
        asdfsadf
      </b-sidebar>
    </b-row>
  </b-container>
</div>

Leave a comment