Skip to content

Commit 81839ee

Browse files
committed
feat(Cards): add transition/collapse to card-header-action
1 parent 636a845 commit 81839ee

File tree

1 file changed

+41
-17
lines changed

1 file changed

+41
-17
lines changed

src/views/base/Cards.vue

Lines changed: 41 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -203,30 +203,54 @@
203203
</b-card>
204204
</b-col>
205205
<b-col sm="6" md="4">
206-
<b-card class="bg-secondary">
207-
<div slot="header">
208-
Card with header actions
209-
<div class="card-header-actions">
210-
<b-link href="#" class="card-header-action btn-setting">
211-
<i class="icon-settings"></i>
212-
</b-link>
213-
<b-link class="card-header-action btn-minimize" v-b-toggle.collapse1>
214-
<i class="icon-arrow-up"></i>
215-
</b-link>
216-
<b-link href="#" class="card-header-action btn-close">
217-
<i class="icon-close"></i>
218-
</b-link>
206+
<transition name="fade">
207+
<b-card class="bg-secondary" no-body v-if="show">
208+
<div slot="header">
209+
Card with header actions
210+
<div class="card-header-actions">
211+
<b-link href="#" class="card-header-action btn-setting">
212+
<i class="icon-settings"></i>
213+
</b-link>
214+
<b-link class="card-header-action btn-minimize" v-b-toggle.collapse1>
215+
<i class="icon-arrow-up"></i>
216+
</b-link>
217+
<b-link href="#" class="card-header-action btn-close" v-on:click="show = !show">
218+
<i class="icon-close"></i>
219+
</b-link>
220+
</div>
219221
</div>
220-
</div>
221-
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.
222-
</b-card>
222+
<b-collapse id="collapse1" visible>
223+
<b-card-body>
224+
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.
225+
</b-card-body>
226+
</b-collapse>
227+
</b-card>
228+
</transition>
223229
</b-col>
224230
</b-row><!--/.row-->
225231
</div>
226232
</template>
227233

228234
<script>
229235
export default {
230-
name: 'cards'
236+
name: 'cards',
237+
data: function () {
238+
return {
239+
show: true
240+
}
241+
}
231242
}
232243
</script>
244+
245+
<style scoped>
246+
.fade-enter-active {
247+
transition: all .3s ease;
248+
}
249+
.fade-leave-active {
250+
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
251+
}
252+
.fade-enter, .fade-leave-to {
253+
transform: translateX(10px);
254+
opacity: 0;
255+
}
256+
</style>

0 commit comments

Comments
 (0)