columns updated
This commit is contained in:
woothu
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<b-col md="3" sm="6">
|
||||
<div class="brand-card">
|
||||
<div :class="'bg-' + type" class="brand-card-header bg-facebook">
|
||||
<i class="fa" :class="'fa-'+ type"></i>
|
||||
<div class="chart-wrapper">
|
||||
<social-box-chart-example :data="dataPoints" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-card-body">
|
||||
<div>
|
||||
<div class="text-value">{{rightHeader}}</div>
|
||||
<div class="text-uppercase text-muted small">{{rightFooter}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-value">{{leftHeader}}</div>
|
||||
<div class="text-uppercase text-muted small">{{leftFooter}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SocialBoxChartExample from './../dashboard/SocialBoxChartExample'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'SocialMediaWidget',
|
||||
components: {
|
||||
SocialBoxChartExample
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'facebook'
|
||||
},
|
||||
dataPoints: {
|
||||
type: Array,
|
||||
default: [65, 59, 84, 84, 51, 55, 40]
|
||||
},
|
||||
rightHeader: {
|
||||
type: String,
|
||||
default: '89k'
|
||||
},
|
||||
rightFooter: {
|
||||
type: String,
|
||||
default: 'friends'
|
||||
},
|
||||
leftHeader: {
|
||||
type: String,
|
||||
default: '459'
|
||||
},
|
||||
leftFooter: {
|
||||
type: String,
|
||||
default: 'feeds'
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,13 +1,11 @@
|
||||
<template>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card :class="styleClasses">
|
||||
<div class="h4 m-0">{{header}}</div>
|
||||
<div>{{text}}</div>
|
||||
<b-progress height={} :variant="variant" :value="value"
|
||||
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
|
||||
<small class="text-muted">{{footer}}</small>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-card :class="styleClasses">
|
||||
<div class="h4 m-0">{{header}}</div>
|
||||
<div>{{text}}</div>
|
||||
<b-progress height={} :variant="variant" :value="value"
|
||||
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
|
||||
<small class="text-muted">{{footer}}</small>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
<template>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<b-card :no-body="true" footer-class="px-3 py-2">
|
||||
<b-card-body class="p-3 clearfix">
|
||||
<i :class="iconClasses" class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-primary mb-0 mt-2">{{header}}</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
|
||||
</b-card-body>
|
||||
<div slot="footer" v-if="showLink">
|
||||
<b-link class="font-weight-bold font-xs btn-block text-muted" :href="link">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-card :no-body="true" footer-class="px-3 py-2">
|
||||
<b-card-body class="p-3 clearfix">
|
||||
<i :class="iconClasses" class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-primary mb-0 mt-2">{{header}}</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
|
||||
</b-card-body>
|
||||
<div slot="footer" v-if="showLink">
|
||||
<b-link class="font-weight-bold font-xs btn-block text-muted" :href="link">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
|
||||
</div>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
<template>
|
||||
<b-col cols="12" sm="6" lg="3">
|
||||
<b-card :no-body="true">
|
||||
<b-card-body class="p-0 clearfix">
|
||||
<i :class="iconClasses" class="p-4 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-primary mb-0 pt-3">{{header}}</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-card :no-body="true">
|
||||
<b-card-body class="p-0 clearfix">
|
||||
<i :class="iconClasses" class="p-4 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-primary mb-0 pt-3">{{header}}</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,50 +1,57 @@
|
||||
<template>
|
||||
<b-card :class="styleClasses">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i :class="iconClasses"></i>
|
||||
<div class="brand-card">
|
||||
<div :class="'bg-' + type" class="brand-card-header bg-facebook">
|
||||
<i class="fa" :class="'fa-'+ type"></i>
|
||||
<div class="chart-wrapper">
|
||||
<social-box-chart-example :data="dataPoints" />
|
||||
</div>
|
||||
<div class="h4 mb-0">{{header}}</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">{{text}}</small>
|
||||
<b-progress height={} :variant="variant" :value="value"
|
||||
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
|
||||
</b-card>
|
||||
</div>
|
||||
<div class="brand-card-body">
|
||||
<div>
|
||||
<div class="text-value">{{rightHeader}}</div>
|
||||
<div class="text-uppercase text-muted small">{{rightFooter}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-value">{{leftHeader}}</div>
|
||||
<div class="text-uppercase text-muted small">{{leftFooter}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SocialBoxChartExample from './../dashboard/SocialBoxChartExample'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'Widget04',
|
||||
data () {
|
||||
return{
|
||||
backgroundColor: '',
|
||||
styleClasses: '',
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if(this.variant.includes('background')){
|
||||
this.backgroundColor = this.variant.replace('background-','');
|
||||
this.styleClasses = 'text-white bg-' + this.backgroundColor
|
||||
}
|
||||
components: {
|
||||
SocialBoxChartExample
|
||||
},
|
||||
props: {
|
||||
iconClasses: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'icon-people'
|
||||
default: 'facebook'
|
||||
},
|
||||
header: {
|
||||
dataPoints: {
|
||||
type: Array,
|
||||
default: [65, 59, 84, 84, 51, 55, 40]
|
||||
},
|
||||
rightHeader: {
|
||||
type: String,
|
||||
default: 'Lorem ipsum...'
|
||||
default: '89k'
|
||||
},
|
||||
text: {
|
||||
rightFooter: {
|
||||
type: String,
|
||||
default: 'Lorem ipsum...'
|
||||
default: 'friends'
|
||||
},
|
||||
variant: {
|
||||
leftHeader: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: '459'
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 25
|
||||
leftFooter: {
|
||||
type: String,
|
||||
default: 'feeds'
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<b-card :class="styleClasses">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i :class="iconClasses"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">{{header}}</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">{{text}}</small>
|
||||
<b-progress height={} :variant="variant" :value="value"
|
||||
:class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Widget05',
|
||||
data () {
|
||||
return{
|
||||
backgroundColor: '',
|
||||
styleClasses: '',
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if(this.variant.includes('background')){
|
||||
this.backgroundColor = this.variant.replace('background-','');
|
||||
this.styleClasses = 'text-white bg-' + this.backgroundColor
|
||||
}
|
||||
},
|
||||
props: {
|
||||
iconClasses: {
|
||||
type: String,
|
||||
default: 'icon-people'
|
||||
},
|
||||
header: {
|
||||
type: String,
|
||||
default: 'Lorem ipsum...'
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'Lorem ipsum...'
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 25
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user