71 lines
1.7 KiB
Vue
71 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<div class="card"
|
||
|
|
:class="[
|
||
|
|
{'card-lift--hover': hover},
|
||
|
|
{'shadow': shadow},
|
||
|
|
{[`shadow-${shadowSize}`]: shadowSize},
|
||
|
|
{[`bg-gradient-${gradient}`]: gradient},
|
||
|
|
{[`bg-${type}`]: type}
|
||
|
|
]">
|
||
|
|
|
||
|
|
<slot name="image"></slot>
|
||
|
|
<div class="card-header" :class="headerClasses" v-if="$slots.header">
|
||
|
|
<slot name="header">
|
||
|
|
</slot>
|
||
|
|
</div>
|
||
|
|
<div class="card-body" :class="bodyClasses" v-if="!noBody">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<slot v-if="noBody"></slot>
|
||
|
|
|
||
|
|
<div class="card-footer" :class="footerClasses" v-if="$slots.footer">
|
||
|
|
<slot name="footer"></slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "card",
|
||
|
|
props: {
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
description: "Card type"
|
||
|
|
},
|
||
|
|
gradient: {
|
||
|
|
type: String,
|
||
|
|
description: "Card background gradient type (warning,danger etc)"
|
||
|
|
},
|
||
|
|
hover: {
|
||
|
|
type: Boolean,
|
||
|
|
description: "Whether card should move on hover"
|
||
|
|
},
|
||
|
|
shadow: {
|
||
|
|
type: Boolean,
|
||
|
|
description: "Whether card has shadow"
|
||
|
|
},
|
||
|
|
shadowSize: {
|
||
|
|
type: String,
|
||
|
|
description: "Card shadow size"
|
||
|
|
},
|
||
|
|
noBody: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
description: "Whether card should have wrapper body class"
|
||
|
|
},
|
||
|
|
bodyClasses: {
|
||
|
|
type: [String, Object, Array],
|
||
|
|
description: "Card body css classes"
|
||
|
|
},
|
||
|
|
headerClasses: {
|
||
|
|
type: [String, Object, Array],
|
||
|
|
description: "Card header css classes"
|
||
|
|
},
|
||
|
|
footerClasses: {
|
||
|
|
type: [String, Object, Array],
|
||
|
|
description: "Card footer css classes"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|