2019-08-13 17:34:35 +01:00

38 lines
692 B
Vue

<template>
<component
:is="tag"
:style="styles"
>
<slot />
</component>
</template>
<script>
export default {
name: 'DsGridItem',
props: {
columnSpan: {
type: [String, Number],
default: 1,
},
rowSpan: {
type: Number,
default: 10,
},
tag: {
type: String,
default: 'div',
},
},
computed: {
styles() {
return {
gridRowEnd: `span ${this.rowSpan}`,
gridColumnStart: this.columnSpan === 'fullWidth' ? 1 : 'auto',
gridColumnEnd: this.columnSpan === 'fullWidth' ? -1 : `span ${this.columnSpan}`,
}
}
},
}
</script>