JasonKroll / vue-bs-drawer

Vue 2 Drawer and sidebar component using Bootstrap 4 classes
7 stars 3 forks source link

Bootstrap-vue? #2

Open justmark opened 6 years ago

justmark commented 6 years ago

Hi,

I found your component whilst searching for information about this functionality in Bootstrap-Vue, and I note in your instructions that you recommend doing this directly through BV. It isn't obvious to me how this would be accomplished with BV - can you point me in the right direction? (please don't spend any time on this - just mentioning a component in BV would be sufficient.)

I really like what you put together though - works great.

JasonKroll commented 6 years ago

Hi By using Bootstrap-Vue I simply meant it's the best way to include Bootstrap 4 in your project.

If you were to change the first example in the Readme to all BV components you would get something like this (untested):

<template>
  <b-container fluid class="bv-example-row">
      <b-row>
        <bs-drawer v-on:bs-drawer-opened="closeRight"
          ref="leftDrawer"
          side="left"
          :showDrawer="false"
          :showToggleBtn="true"
          btnTop="195px"
          bg="transparent"
          sidebar="md"
          class="col-10 col-sm-3 col-md-3 col-lg-2 bs-drawer__animate">
          <!-- Add some nav elements here-->
        </bs-drawer>

        <b-col cols="12" md="9" lg="10" offset-md="3" offset-lg="2" class="px-4">
          <!-- Main View here -->
          <router-view></router-view>
        </b-col>
        <div class="px-4 col-12 col-md-9 col-lg-10 offset-md-3 offset-lg-2">

        </div>

        <!-- Add another drawer on the other side if needed -->
        <bs-drawer
          ref="rightDrawer"
          side="right"
          :showDrawer="false"
          :btnTop="0"
          class="col-9 col-sm-8 col-md-4 col-lg-4 col-xl-2 bs-drawer__animate">
          <!-- Add some nav elements here-->
        </bs-drawer>
      </b-row>
  </b-container>
</template>

I hope this helps?

Please let me know if I misunderstood your questions. Cheers!