v4 initial commit
This commit is contained in:
Łukasz Holeczek
@@ -1,502 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress footer="Lorem ipsum dolor sit amet enim.">
|
||||
<div class="h4 m-0">89.9%</div>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/widgets"
|
||||
class="card-header-action position-absolute"
|
||||
style="right:5px; top:5px"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<CProgress
|
||||
color="gradient-success"
|
||||
:value="25"
|
||||
class="progress-xs my-3 mb-0"
|
||||
/>
|
||||
</CWidgetProgress>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="12.124"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="gradient-info"
|
||||
:value="25"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="$98.111,00"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="gradient-warning"
|
||||
:value="25"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="2 TB"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="gradient-danger"
|
||||
:value="25"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="89.9%"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="gradient-success"
|
||||
inverse :value="25"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="12.124"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="gradient-info"
|
||||
inverse
|
||||
:value="25"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="$98.111,00"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="gradient-warning"
|
||||
inverse
|
||||
:value="25"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="2 TB"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="gradient-danger"
|
||||
inverse
|
||||
:value="25"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-primary"
|
||||
>
|
||||
<CIcon name="cil-settings" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-info"
|
||||
>
|
||||
<CIcon name="cil-laptop" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-warning"
|
||||
>
|
||||
<CIcon name="cil-moon" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-danger"
|
||||
>
|
||||
<CIcon name="cil-bell" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-primary"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-settings" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-info"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-laptop" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-warning"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-moon" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-danger"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-bell" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-primary"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-settings" class="mx-5 " width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-info"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-laptop" class="mx-5 " width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-warning"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-moon" class="mx-5 " width="24"/>
|
||||
<template #footer>
|
||||
<CCardFooter class="px-3 py-2">
|
||||
<CLink
|
||||
class="font-weight-bold font-xs text-muted d-flex justify-content-between"
|
||||
href="https://coreui.io/"
|
||||
target="_blank"
|
||||
>
|
||||
View more
|
||||
<CIcon name="cil-arrow-right" width="16"/>
|
||||
</CLink>
|
||||
</CCardFooter>
|
||||
</template>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<!-- <CRow>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-primary"
|
||||
:icon-padding="false"
|
||||
link="#"
|
||||
>
|
||||
<CIcon name="cil-settings" class="mx-5 " width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-info"
|
||||
:icon-padding="false"
|
||||
link="#"
|
||||
>
|
||||
<CIcon name="cil-laptop" class="mx-5 " width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-warning"
|
||||
:icon-padding="false"
|
||||
link="#"
|
||||
>
|
||||
<CIcon name="cil-moon" class="mx-5" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
</CRow> -->
|
||||
<WidgetsBrand noCharts/>
|
||||
<WidgetsBrand/>
|
||||
<CCardGroup class="mb-4">
|
||||
<CWidgetProgressIcon
|
||||
header="87.500"
|
||||
text="Visitors"
|
||||
color="gradient-info"
|
||||
>
|
||||
<CIcon name="cil-people" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="385"
|
||||
text="New Clients"
|
||||
color="gradient-success"
|
||||
>
|
||||
<CIcon name="cil-userFollow" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="1238"
|
||||
text="Products sold"
|
||||
color="gradient-warning"
|
||||
>
|
||||
<CIcon name="cil-basket" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="28%"
|
||||
text="Returning Visitors"
|
||||
>
|
||||
<CIcon name="cil-chartPie" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="5:34:11"
|
||||
text="Avg. Time"
|
||||
color="gradient-danger"
|
||||
>
|
||||
<CIcon name="cil-speedometer" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCardGroup>
|
||||
<CCardGroup class="mb-4">
|
||||
<CWidgetProgressIcon
|
||||
header="87.500"
|
||||
text="Visitors"
|
||||
color="gradient-info"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-people" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="385"
|
||||
text="New Clients"
|
||||
color="gradient-success"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-userFollow" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="1238"
|
||||
text="Products sold"
|
||||
color="gradient-warning"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-basket" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="28%"
|
||||
text="Returning Visitors"
|
||||
color="gradient-primary"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-chartPie" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="5:34:11"
|
||||
text="Avg. Time"
|
||||
color="gradient-danger"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-speedometer" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCardGroup>
|
||||
<CRow>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="87.500"
|
||||
text="Visitors"
|
||||
color="gradient-info"
|
||||
>
|
||||
<CIcon name="cil-people" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="385"
|
||||
text="New Clients"
|
||||
color="gradient-success"
|
||||
>
|
||||
<CIcon name="cil-userFollow" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="1238"
|
||||
text="Products sold"
|
||||
color="gradient-warning"
|
||||
>
|
||||
<CIcon name="cil-basket" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="28%"
|
||||
text="Returning Visitors"
|
||||
color="gradient-primary"
|
||||
>
|
||||
<CIcon name="cil-chartPie" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="5:34:11"
|
||||
text="Avg. Time"
|
||||
color="gradient-danger"
|
||||
>
|
||||
<CIcon name="cil-speedometer" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="972"
|
||||
text="comments"
|
||||
color="gradient-info"
|
||||
>
|
||||
<CIcon name="cil-speech" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="87.500"
|
||||
text="Visitors"
|
||||
color="gradient-info"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-people" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="385"
|
||||
text="New Clients"
|
||||
color="gradient-success"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-userFollow" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="1238"
|
||||
text="Products sold"
|
||||
color="gradient-warning"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-basket" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="28%"
|
||||
text="Returning Visitors"
|
||||
color="gradient-primary"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-chartPie" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="5:34:11"
|
||||
text="Avg. Time"
|
||||
color="gradient-danger"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-speedometer" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="972"
|
||||
text="comments"
|
||||
color="gradient-info"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-speech" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<WidgetsDropdown/>
|
||||
<CRow>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple header="title" text="1,123">
|
||||
<CChartLineSimple style="height:40px" border-color="danger"/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple header="title" text="1,123">
|
||||
<CChartLineSimple style="height:40px" border-color="primary"/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple header="title" text="1,123">
|
||||
<CChartLineSimple style="height:40px" border-color="success"/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple header="title" text="1,123">
|
||||
<CChartBarSimple style="height:40px" background-color="danger"/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple header="title" text="1,123">
|
||||
<CChartBarSimple style="height:40px" background-color="primary"/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple header="title" text="1,123">
|
||||
<CChartBarSimple style="height:40px" background-color="success"/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WidgetsBrand from './WidgetsBrand'
|
||||
import WidgetsDropdown from './WidgetsDropdown'
|
||||
import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
|
||||
|
||||
export default {
|
||||
name: 'Widgets',
|
||||
components: {
|
||||
CChartLineSimple,
|
||||
CChartBarSimple,
|
||||
WidgetsBrand,
|
||||
WidgetsDropdown
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,178 +0,0 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<template v-if="!noCharts">
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="facebook"
|
||||
right-header="89k"
|
||||
right-footer="friends"
|
||||
left-header="459"
|
||||
left-footer="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-facebook"
|
||||
height="52"
|
||||
class="my-4"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[65, 59, 84, 84, 51, 55, 40]"
|
||||
label="Friends"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="twitter"
|
||||
right-header="973k"
|
||||
right-footer="followers"
|
||||
left-header="1.792"
|
||||
left-footer="tweets"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-twitter"
|
||||
height="52"
|
||||
class="my-4"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[1, 13, 9, 17, 34, 41, 38]"
|
||||
label="Followers"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="linkedin"
|
||||
right-header="500+"
|
||||
right-footer="contracts"
|
||||
left-header="292"
|
||||
left-footer="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-linkedin"
|
||||
height="52"
|
||||
class="my-4"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[78, 81, 80, 45, 34, 12, 40]"
|
||||
label="Contracts"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
right-header="12"
|
||||
right-footer="events"
|
||||
left-header="4"
|
||||
left-footer="meetings"
|
||||
color="warning"
|
||||
>
|
||||
<CIcon
|
||||
name="cil-calendar"
|
||||
height="52"
|
||||
class="my-4"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[35, 23, 56, 22, 97, 23, 64]"
|
||||
label="Followers"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
</template>
|
||||
<template v-else>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="facebook"
|
||||
right-header="89k"
|
||||
right-footer="friends"
|
||||
left-header="459"
|
||||
left-footer="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-facebook"
|
||||
height="56"
|
||||
class="my-4"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="twitter"
|
||||
right-header="973k"
|
||||
right-footer="followers"
|
||||
left-header="1.792"
|
||||
left-footer="tweets"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-twitter"
|
||||
height="56"
|
||||
class="my-4"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="linkedin"
|
||||
right-header="500+"
|
||||
right-footer="contracts"
|
||||
left-header="292"
|
||||
left-footer="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-linkedin"
|
||||
height="56"
|
||||
class="my-4"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
right-header="12"
|
||||
right-footer="events"
|
||||
left-header="4"
|
||||
left-footer="meetings"
|
||||
color="warning"
|
||||
>
|
||||
<CIcon
|
||||
name="cil-calendar"
|
||||
height="56"
|
||||
class="my-4"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLineSimple } from '../charts/index.js'
|
||||
|
||||
export default {
|
||||
name: 'WidgetsBrand',
|
||||
components: {
|
||||
CChartLineSimple
|
||||
},
|
||||
props: {
|
||||
noCharts: Boolean
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.c-chart-brand {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,138 +0,0 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown color="primary" header="9.823" text="Members online">
|
||||
<template #default>
|
||||
<CDropdown
|
||||
color="transparent p-0"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-settings"/>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartLineSimple
|
||||
pointed
|
||||
class="mt-3 mx-3"
|
||||
style="height:70px"
|
||||
:data-points="[65, 59, 84, 84, 51, 55, 40]"
|
||||
point-hover-background-color="primary"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown color="info" header="9.823" text="Members online">
|
||||
<template #default>
|
||||
<CDropdown
|
||||
color="transparent p-0"
|
||||
placement="bottom-end"
|
||||
:caret="false"
|
||||
>
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-location-pin"/>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartLineSimple
|
||||
pointed
|
||||
class="mt-3 mx-3"
|
||||
style="height:70px"
|
||||
:data-points="[1, 18, 9, 17, 34, 22, 11]"
|
||||
point-hover-background-color="info"
|
||||
:options="{ elements: { line: { tension: 0.00001 }}}"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
color="warning"
|
||||
header="9.823"
|
||||
text="Members online"
|
||||
>
|
||||
<template #default>
|
||||
<CDropdown
|
||||
color="transparent p-0"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-settings"/>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartLineSimple
|
||||
class="mt-3"
|
||||
style="height:70px"
|
||||
background-color="rgba(255,255,255,.2)"
|
||||
:data-points="[78, 81, 80, 45, 34, 12, 40]"
|
||||
:options="{ elements: { line: { borderWidth: 2.5 }}}"
|
||||
point-hover-background-color="warning"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
color="danger"
|
||||
header="9.823"
|
||||
text="Members online"
|
||||
>
|
||||
<template #default>
|
||||
<CDropdown
|
||||
color="transparent p-0"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-settings"/>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartBarSimple
|
||||
class="mt-3 mx-3"
|
||||
style="height:70px"
|
||||
background-color="rgb(250, 152, 152)"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
|
||||
|
||||
export default {
|
||||
name: 'WidgetsDropdown',
|
||||
components: { CChartLineSimple, CChartBarSimple }
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user