Demo VueJS component VueSlideoutPanel
View on github https://github.com/lyollix/vue-slideout-panel
<vue-slideout-panel v-model="d1.v" @close="d1.v=false">
{{lorem}}
</vue-slideout-panel>
<vue-slideout-panel v-model="d2.v" :count=2 @close="d2.v=false">
{{lorem}}
<div slot="extra">{{lorem}}</div>
</vue-slideout-panel>
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>
<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>
<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>
<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>