sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity
Files
70058e8c2912a83bef675c03c9507d5f275fc87f
manja_ui_dev/src/views/widgets/Widgets.vue
T
woothu 70058e8c29 refactor: update base views
2019-11-13 10:34:15 +01:00

506 lines
13 KiB
Vue
Raw Blame History

<template>
<div>
<CRow>
<CCol sm="6" lg="3">
<CWidgetProgress
header="89.9%"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
>
<CProgress
color="success"
:value="25"
class="progress-xs my-3 mb-0"
/>
<template #header>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action position-absolute"
style="right:10px; top:10px"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</template>
</CWidgetProgress>
</CCol>
<CCol sm="6" lg="3">
<CWidgetProgress
header="12.124"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
color="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="warning"
:value="25"
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetProgress
header="2 TB"
text="Lorem ipsum..."
footer="Lorem ipsum dolor sit amet enim."
color="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="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="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="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="danger"
inverse
:value="25"
/>
</CCol>
</CRow>
<CRow>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
text="Income"
color="primary"
>
<CIcon name="settings" width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
text="Income"
color="info"
>
<CIcon name="laptop" width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
text="Income"
color="warning"
>
<CIcon name="moon" width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
text="Income"
color="danger"
>
<CIcon name="bell" width="24"/>
</CWidgetIcon>
</CCol>
</CRow>
<CRow>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
text="Income"
color="primary"
:icon-padding="false"
>
<CIcon name="settings" width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
text="Income"
color="info"
:icon-padding="false"
>
<CIcon name="laptop" width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
text="Income"
color="warning"
:icon-padding="false"
>
<CIcon name="moon" width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="3">
<CWidgetIcon
header="$1.999,50"
text="Income"
color="danger"
:icon-padding="false"
>
<CIcon name="bell" width="24"/>
</CWidgetIcon>
</CCol>
</CRow>
<CRow>
<CCol col="12" sm="6" lg="4">
<CWidgetIcon
header="$1.999,50"
text="Income"
color="primary"
:icon-padding="false"
>
<CIcon name="settings" class="mx-5 " width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="4">
<CWidgetIcon
header="$1.999,50"
text="Income"
color="info"
:icon-padding="false"
>
<CIcon name="laptop" class="mx-5 " width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="4">
<CWidgetIcon
header="$1.999,50"
text="Income"
color="warning"
:icon-padding="false"
>
<CIcon name="moon" class="mx-5 " width="24"/>
<template #footer>
<CCardFooter class="card-footer px-3 py-2">
<CLink
class="font-weight-bold font-xs btn-block text-muted"
href="https://coreui.io/"
>
View more
<CIcon name="arrowRight" class="float-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="primary"
:icon-padding="false"
link="#"
>
<CIcon name="settings" class="mx-5 " width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="4">
<CWidgetIcon
header="$1.999,50"
text="Income"
color="info"
:icon-padding="false"
link="#"
>
<CIcon name="laptop" class="mx-5 " width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="4">
<CWidgetIcon
header="$1.999,50"
text="Income"
color="warning"
:icon-padding="false"
link="#"
>
<CIcon name="moon" class="mx-5" width="24"/>
</CWidgetIcon>
</CCol>
</CRow> -->
<WidgetsBrand noCharts/>
<WidgetsBrand/>
<CCardGroup class="mb-4">
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="info"
>
<CIcon name="people" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="385"
text="New Clients"
color="success"
>
<CIcon name="userFollow" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="warning"
>
<CIcon name="basket" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
>
<CIcon name="chartPie" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="danger"
>
<CIcon name="speedometer" height="36"/>
</CWidgetProgressIcon>
</CCardGroup>
<CCardGroup class="mb-4">
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="info"
inverse
>
<CIcon name="people" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="385"
text="New Clients"
color="success"
inverse
>
<CIcon name="userFollow" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="warning"
inverse
>
<CIcon name="basket" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
color="primary"
inverse
>
<CIcon name="chartPie" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="danger"
inverse
>
<CIcon name="speedometer" height="36"/>
</CWidgetProgressIcon>
</CCardGroup>
<CRow>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="info"
>
<CIcon name="people" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="385"
text="New Clients"
color="success"
>
<CIcon name="userFollow" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="warning"
>
<CIcon name="basket" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
color="primary"
>
<CIcon name="chartPie" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="danger"
>
<CIcon name="speedometer" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="972"
text="comments"
color="info"
>
<CIcon name="speech" height="36"/>
</CWidgetProgressIcon>
</CCol>
</CRow>
<CRow>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="info"
inverse
>
<CIcon name="people" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="385"
text="New Clients"
color="success"
inverse
>
<CIcon name="userFollow" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="warning"
inverse
>
<CIcon name="basket" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
color="primary"
inverse
>
<CIcon name="chartPie" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="danger"
inverse
>
<CIcon name="speedometer" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
<CWidgetProgressIcon
header="972"
text="comments"
color="info"
inverse
>
<CIcon name="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>
Reference in New Issue View Git Blame Copy Permalink