114 lines
2.0 KiB
Vue
114 lines
2.0 KiB
Vue
|
<template>
|
||
|
<base-material-card
|
||
|
:icon="icon"
|
||
|
class="v-card--material-stats"
|
||
|
v-bind="$attrs"
|
||
|
v-on="$listeners"
|
||
|
>
|
||
|
<template v-slot:after-heading>
|
||
|
<div class="ml-auto text-right">
|
||
|
<div
|
||
|
class="body-3 grey--text font-weight-light"
|
||
|
v-text="title"
|
||
|
/>
|
||
|
|
||
|
<h3 class="display-2 font-weight-light text--primary">
|
||
|
{{ value }} <small>{{ smallValue }}</small>
|
||
|
</h3>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<v-col
|
||
|
cols="12"
|
||
|
class="px-0"
|
||
|
>
|
||
|
<v-divider />
|
||
|
</v-col>
|
||
|
|
||
|
<v-icon
|
||
|
:color="subIconColor"
|
||
|
size="16"
|
||
|
class="ml-2 mr-1"
|
||
|
>
|
||
|
{{ subIcon }}
|
||
|
</v-icon>
|
||
|
|
||
|
<span
|
||
|
:class="subTextColor"
|
||
|
class="caption grey--text font-weight-light"
|
||
|
v-text="subText"
|
||
|
/>
|
||
|
</base-material-card>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import Card from './Card'
|
||
|
|
||
|
export default {
|
||
|
name: 'MaterialStatsCard',
|
||
|
|
||
|
inheritAttrs: false,
|
||
|
|
||
|
props: {
|
||
|
...Card.props,
|
||
|
icon: {
|
||
|
type: String,
|
||
|
required: true,
|
||
|
},
|
||
|
subIcon: {
|
||
|
type: String,
|
||
|
default: undefined,
|
||
|
},
|
||
|
subIconColor: {
|
||
|
type: String,
|
||
|
default: undefined,
|
||
|
},
|
||
|
subTextColor: {
|
||
|
type: String,
|
||
|
default: undefined,
|
||
|
},
|
||
|
subText: {
|
||
|
type: String,
|
||
|
default: undefined,
|
||
|
},
|
||
|
title: {
|
||
|
type: String,
|
||
|
default: undefined,
|
||
|
},
|
||
|
value: {
|
||
|
type: String,
|
||
|
default: undefined,
|
||
|
},
|
||
|
smallValue: {
|
||
|
type: String,
|
||
|
default: undefined,
|
||
|
},
|
||
|
},
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style lang="sass">
|
||
|
.v-card--material-stats
|
||
|
display: flex
|
||
|
flex-wrap: wrap
|
||
|
position: relative
|
||
|
|
||
|
> div:first-child
|
||
|
justify-content: space-between
|
||
|
|
||
|
.v-card
|
||
|
border-radius: 4px
|
||
|
flex: 0 1 auto
|
||
|
|
||
|
.v-card__text
|
||
|
display: inline-block
|
||
|
flex: 1 0 calc(100% - 120px)
|
||
|
position: absolute
|
||
|
top: 0
|
||
|
right: 0
|
||
|
width: 100%
|
||
|
|
||
|
.v-card__actions
|
||
|
flex: 1 0 100%
|
||
|
</style>
|