Demo VueJS component VueSlideoutPanel

View on github https://github.com/lyollix/vue-slideout-panel

Demo 1 /Simple 1-section/
<vue-slideout-panel v-model="d1.v" @close="d1.v=false">
     {{lorem}}
</vue-slideout-panel>
Demo 2 /Simple 2-sections/
<vue-slideout-panel v-model="d2.v" :count=2 @close="d2.v=false">
     {{lorem}}
     <div slot="extra">{{lorem}}</div>
</vue-slideout-panel>
Demo 3 /Customizing/
d3.styles: [
  {},
  {
    backgroundColor: '#ffc29c',
    paddingTop: '2rem',
    paddingBottom: '1rem'
  },
  {},
  {
    color: '#555',
    textDecoration: 'none',
    top: '8px',
    right: '1rem'
  }
],

<vue-slideout-panel v-model="d3.v"
     closeHtml='<i class="ti-close" aria-hidden="true"></i>'
     :widths="['30%']"
     :styles="d3.styles"
     @close="d3.v=false">
     {{lorem}}
</vue-slideout-panel>
Demo 4 /Customizing/
<vue-slideout-panel v-model="d4.v"
     :count=2
     :showExtra=true
     :widths="['col-8', '60%']"
     :styles="[{padding:0},{padding:'1rem 1rem 4rem'},{same:true}]"
     :classes="['','bg-success','same']"
     closeHtml="<button class='btn btn-success'>Закрыть</button>"
     closeAllHtml='<button class="btn btn-success"><i class="ti-share-alt" aria-hidden="true"></i></button>'
     extraHtml="<button class='btn btn-success'><i class='ti-control-forward' aria-hidden='true'></i></button>"
     @close="d4.v=false">
     {{lorem}}
     <div slot="extra">{{lorem}}</div>
</vue-slideout-panel>
Demo 5 /Customizing/
<vue-slideout-panel v-model="d5.v"
     :count=2
     :widths="['col-8', '40%']"
     :styles="[{padding:0},{padding:'1rem 1rem 4rem'},{same:true}]"
     :classes="['','bg-warning','bg-warning']"
     closeHtml="<button class='btn btn-warning'>Закрыть</button>"
     closeAllHtml="<button class='btn btn-warning'><i class='ti-share-alt' aria-hidden='true'></i></button>"
     extraHtml="<button class='btn btn-warning'><i class='ti-control-forward' aria-hidden='true'></i></button>"
     @close="d5.v=false">
     {{lorem}}
     <div slot="extra">{{lorem}}</div>
</vue-slideout-panel>
Demo 6 (+Demo 7) /Nested blocks/
<vue-slideout-panel v-model="d6.v"
     :count=2
     :widths="['70%','70%']"
     @close="d6.v=false">

     <div>
       <input type="checkbox" id="chbx" v-model="d7.v">
       <label for="chbx">Demo 7</label>
     </div>

     {{lorem}}

     <vue-slideout-panel v-model="d7.v"
          :widths="['40%']"
          @close="d7.v=false">
          {{lorem}}
     </vue-slideout-panel>

     <div slot="extra">{{lorem}}</div>

</vue-slideout-panel>