xidedix
257 lines
14 KiB
Vue
257 lines
14 KiB
Vue
<template>
|
|
<div class="animated fadeIn">
|
|
<b-row>
|
|
<b-col sm="6" md="4">
|
|
<b-card header="Card title">
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card show-footer>
|
|
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.
|
|
<div slot="footer">Card footer</div>
|
|
</b-card>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card header="<i class='fa fa-check'></i> Card with icon">
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card>
|
|
<div slot="header">
|
|
Card with switch
|
|
<label class="switch switch-sm switch-text switch-info float-right mb-0">
|
|
<input type="checkbox" class="switch-input">
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card>
|
|
<div slot="header">
|
|
Card with label
|
|
<b-badge variant="success" class="float-right">Success</b-badge>
|
|
</div>
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card>
|
|
<div slot="header">
|
|
Card with label
|
|
<b-badge pill variant="danger" class="float-right">42</b-badge>
|
|
</div>
|
|
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>
|
|
</b-col>
|
|
</b-row><!--/.row-->
|
|
<b-row>
|
|
<b-col sm="6" md="4">
|
|
<b-card header="Card outline primary" border-variant="primary">
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card header="Card outline secondary" border-variant="secondary">
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card header="Card outline success" border-variant="success">
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card header="Card outline info" border-variant="info">
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card header="Card outline warning" border-variant="warning">
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card header="Card outline danger" border-variant="danger">
|
|
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>
|
|
</b-col>
|
|
</b-row><!--/.row-->
|
|
|
|
<b-row>
|
|
<b-col sm="6" md="4">
|
|
<b-card class="card-accent-primary" header="Card with primary accent">
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card class="card-accent-secondary" header="Card with secondary accent">
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card class="card-accent-success" header="Card with success accent">
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card class="card-accent-info" header="Card with info accent">
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card class="card-accent-warning" header="Card with warning accent">
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card class="card-accent-danger" header="Card with danger accent">
|
|
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>
|
|
</b-col>
|
|
</b-row><!--/.row-->
|
|
<b-row>
|
|
<b-col sm="6" md="4">
|
|
<b-card class="bg-primary text-center">
|
|
<blockquote class="card-blockquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer>Someone famous in
|
|
<cite title="Source Title">Source Title</cite>
|
|
</footer>
|
|
</blockquote>
|
|
</b-card>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card class="bg-success text-center">
|
|
<blockquote class="card-blockquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer>Someone famous in
|
|
<cite title="Source Title">Source Title</cite>
|
|
</footer>
|
|
</blockquote>
|
|
</b-card>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card class="bg-info text-center">
|
|
<blockquote class="card-blockquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer>Someone famous in
|
|
<cite title="Source Title">Source Title</cite>
|
|
</footer>
|
|
</blockquote>
|
|
</b-card>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card class="bg-warning text-center">
|
|
<blockquote class="card-blockquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer>Someone famous in
|
|
<cite title="Source Title">Source Title</cite>
|
|
</footer>
|
|
</blockquote>
|
|
</b-card>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card class="bg-danger text-center">
|
|
<blockquote class="card-blockquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer>Someone famous in
|
|
<cite title="Source Title">Source Title</cite>
|
|
</footer>
|
|
</blockquote>
|
|
</b-card>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card class="bg-secondary text-center">
|
|
<blockquote class="card-blockquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer>Someone famous in
|
|
<cite title="Source Title">Source Title</cite>
|
|
</footer>
|
|
</blockquote>
|
|
</b-card>
|
|
</b-col>
|
|
</b-row><!--/.row-->
|
|
<b-row>
|
|
<b-col sm="6" md="4">
|
|
<b-card header="Card title" class="bg-primary">
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card header="Card title" class="bg-success">
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card header="Card title" class="bg-info">
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card header="Card title" class="bg-warning">
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<b-card header="Card title" class="bg-danger">
|
|
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>
|
|
</b-col>
|
|
<b-col sm="6" md="4">
|
|
<transition name="fade">
|
|
<b-card class="bg-secondary" no-body v-if="show">
|
|
<div slot="header">
|
|
Card with header actions
|
|
<div class="card-header-actions">
|
|
<b-link href="#" class="card-header-action btn-setting">
|
|
<i class="icon-settings"></i>
|
|
</b-link>
|
|
<b-link class="card-header-action btn-minimize" v-b-toggle.collapse1>
|
|
<i class="icon-arrow-up"></i>
|
|
</b-link>
|
|
<b-link href="#" class="card-header-action btn-close" v-on:click="show = !show">
|
|
<i class="icon-close"></i>
|
|
</b-link>
|
|
</div>
|
|
</div>
|
|
<b-collapse id="collapse1" visible>
|
|
<b-card-body>
|
|
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-row><!--/.row-->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'cards',
|
|
data: function () {
|
|
return {
|
|
show: true
|
|
}
|
|
}
|
|
}
|
|
</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>
|