sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

feat(Cards): add transition/collapse to card-header-action

Browse Source
This commit is contained in:
xidedix
2018-05-23 18:43:27 +02:00
parent 636a845860
commit 81839ee3f6
1 changed files with 41 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/Cards.vue
+41 -17
View File
@@ -203,23 +203,29 @@
</b-card> </b-card>
</b-col> </b-col>
<b-col sm="6" md="4"> <b-col sm="6" md="4">
<b-card class="bg-secondary"> <transition name="fade">
<div slot="header"> <b-card class="bg-secondary" no-body v-if="show">
Card with header actions <div slot="header">
<div class="card-header-actions"> Card with header actions
<b-link href="#" class="card-header-action btn-setting"> <div class="card-header-actions">
<i class="icon-settings"></i> <b-link href="#" class="card-header-action btn-setting">
</b-link> <i class="icon-settings"></i>
<b-link class="card-header-action btn-minimize" v-b-toggle.collapse1> </b-link>
<i class="icon-arrow-up"></i> <b-link class="card-header-action btn-minimize" v-b-toggle.collapse1>
</b-link> <i class="icon-arrow-up"></i>
<b-link href="#" class="card-header-action btn-close"> </b-link>
<i class="icon-close"></i> <b-link href="#" class="card-header-action btn-close" v-on:click="show = !show">
</b-link> <i class="icon-close"></i>
</b-link>
</div>
</div> </div>
</div> <b-collapse id="collapse1" visible>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <b-card-body>
</b-card> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</b-card-body>
</b-collapse>
</b-card>
</transition>
</b-col> </b-col>
</b-row><!--/.row--> </b-row><!--/.row-->
</div> </div>
@@ -227,6 +233,24 @@
<script> <script>
export default { export default {
name: 'cards' name: 'cards',
data: function () {
return {
show: true
}
}
} }
</script> </script>
<style scoped>
.fade-enter-active {
transition: all .3s ease;
}
.fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.fade-enter, .fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
</style>