mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
<template>
|
|
<b-card
|
|
no-body
|
|
:class="[
|
|
{ 'card-lift--hover': hover },
|
|
{ shadow: shadow },
|
|
{ [`shadow-${shadowSize}`]: shadowSize },
|
|
{ [`bg-gradient-${gradient}`]: gradient },
|
|
{ [`bg-${type}`]: type },
|
|
]"
|
|
>
|
|
<slot name="image"></slot>
|
|
<b-card-header :class="headerClasses" v-if="$slots.header">
|
|
<slot name="header"></slot>
|
|
</b-card-header>
|
|
<b-card-body :class="bodyClasses" v-if="!noBody">
|
|
<slot></slot>
|
|
</b-card-body>
|
|
|
|
<slot v-if="noBody"></slot>
|
|
|
|
<b-card-footer :class="footerClasses" v-if="$slots.footer">
|
|
<slot name="footer"></slot>
|
|
</b-card-footer>
|
|
</b-card>
|
|
</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>
|
|
<style></style>
|