sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

feat: Bootstrap Vue components changed to Coreui-Vue components

Browse Source
This commit is contained in:
woothu
2019-02-18 17:27:13 +01:00
parent 6433e8ac1e
commit 2057ba6b5c
47 changed files with 7751 additions and 8387 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Widgets.vue
+276 -280
View File
@@ -1,234 +1,234 @@
<template>
<div class="animated fadeIn">
<b-row>
<b-col sm="6" lg="3">
<c-widget01 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"/>
</c-widget01>
</b-col>
<b-col sm="6" lg="3">
<c-widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
<CRow>
<CCol sm="6" lg="3">
<CWidget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
<CProgress variant="success" :value="25" class="progress-xs my-3 mb-0"/>
</CWidget01>
</CCol>
<CCol sm="6" lg="3">
<CWidget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="info" :value="25"/>
</b-col>
<b-col sm="6" lg="3">
<c-widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
</CCol>
<CCol sm="6" lg="3">
<CWidget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="warning" :value="25"/>
</b-col>
<b-col sm="6" lg="3">
<c-widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
</CCol>
<CCol sm="6" lg="3">
<CWidget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="danger" :value="25"/>
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col sm="6" lg="3">
<c-widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
</CCol>
</CRow><!--/.row-->
<CRow>
<CCol sm="6" lg="3">
<CWidget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="success" inverse :value="25"/>
</b-col>
<b-col sm="6" lg="3">
<c-widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
</CCol>
<CCol sm="6" lg="3">
<CWidget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="info" inverse :value="25"/>
</b-col>
<b-col sm="6" lg="3">
<c-widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
</CCol>
<CCol sm="6" lg="3">
<CWidget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="warning" inverse :value="25"/>
</b-col>
<b-col sm="6" lg="3">
<c-widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
</CCol>
<CCol sm="6" lg="3">
<CWidget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="danger" inverse :value="25"/>
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col cols="12" sm="6" lg="3">
<c-widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<c-widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<c-widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<c-widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/>
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col cols="12" sm="6" lg="3">
<c-widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" link="#"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<c-widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" link="#"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<c-widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" link="#"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<c-widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" link="#"/>
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col cols="12" sm="6" lg="3">
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
</b-col>
<b-col cols="12" sm="6" lg="3">
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/>
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col cols="12" sm="6" lg="4">
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
</b-col>
<b-col cols="12" sm="6" lg="4">
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
</b-col>
<b-col cols="12" sm="6" lg="4">
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
</b-col>
</CCol>
</CRow><!--/.row-->
<CRow>
<CCol cols="12" sm="6" lg="3">
<CWidget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/>
</CCol>
<CCol cols="12" sm="6" lg="3">
<CWidget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/>
</CCol>
<CCol cols="12" sm="6" lg="3">
<CWidget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/>
</CCol>
<CCol cols="12" sm="6" lg="3">
<CWidget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/>
</CCol>
</CRow><!--/.row-->
<CRow>
<CCol cols="12" sm="6" lg="3">
<CWidget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" link="#"/>
</CCol>
<CCol cols="12" sm="6" lg="3">
<CWidget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" link="#"/>
</CCol>
<CCol cols="12" sm="6" lg="3">
<CWidget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" link="#"/>
</CCol>
<CCol cols="12" sm="6" lg="3">
<CWidget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" link="#"/>
</CCol>
</CRow><!--/.row-->
<CRow>
<CCol cols="12" sm="6" lg="3">
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/>
</CCol>
<CCol cols="12" sm="6" lg="3">
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/>
</CCol>
<CCol cols="12" sm="6" lg="3">
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
</CCol>
<CCol cols="12" sm="6" lg="3">
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/>
</CCol>
</CRow><!--/.row-->
<CRow>
<CCol cols="12" sm="6" lg="4">
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
</CCol>
<CCol cols="12" sm="6" lg="4">
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
</CCol>
<CCol cols="12" sm="6" lg="4">
<CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
</CCol>
</b-row><!--/.row-->
<b-row>
<b-col md="3" sm="6">
<c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
</b-col>
<b-col md="3" sm="6">
<c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
</b-col>
<b-col md="3" sm="6">
<c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
</b-col>
<b-col md="3" sm="6" class="codeContainer">
<c-widget04 variant='warning' rightHeader='0:57' rightFooter='time' leftHeader='17' leftFooter='percentage'>
</CRow><!--/.row-->
<CRow>
<CCol md="3" sm="6">
<CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
</CCol>
<CCol md="3" sm="6">
<CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
</CCol>
<CCol md="3" sm="6">
<CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
</CCol>
<CCol md="3" sm="6" class="codeContainer">
<CWidget04 variant='warning' rightHeader='0:57' rightFooter='time' leftHeader='17' leftFooter='percentage'>
<i slot="icon" class="fa fa-battery-1"></i>
</c-widget04>
</b-col>
</b-row><!--/.row-->
<b-row>
<b-col md="3" sm="6">
<c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
<c-simple-line-chart chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
</CWidget04>
</CCol>
</CRow><!--/.row-->
<CRow>
<CCol md="3" sm="6">
<CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
<CSimpleLineChart chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:100px' color='rgba(255,255,255,.1)'/>
</c-widget04>
</b-col>
<b-col md="3" sm="6">
<c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
<c-simple-line-chart chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
</CWidget04>
</CCol>
<CCol md="3" sm="6">
<CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
<CSimpleLineChart chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:100px' color='rgba(255,255,255,.1)'/>
</c-widget04>
</b-col>
<b-col md="3" sm="6">
<c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
<c-simple-line-chart chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
</CWidget04>
</CCol>
<CCol md="3" sm="6">
<CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
<CSimpleLineChart chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:100px' color='rgba(255,255,255,.1)'/>
</c-widget04>
</b-col>
<b-col md="3" sm="6">
<c-widget04 variant='google-plus'
</CWidget04>
</CCol>
<CCol md="3" sm="6">
<CWidget04 variant='google-plus'
rightHeader='894'
rightFooter='followers'
leftHeader='92' leftFooter='circles'>
<c-simple-line-chart chartId="google-plus"
<CSimpleLineChart chartId="google-plus"
:data='[35, 23, 56, 22, 97, 23, 64]'
label='Followers'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:100px'
color='rgba(255,255,255,.1)'/>
</c-widget04>
</b-col>
</b-row><!--/.row-->
<b-card-group class="mb-4">
<c-widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
<c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
<c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
<c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
<c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
</b-card-group>
<b-card-group class="mb-4">
<c-widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/>
<c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
<c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
<c-widget05 iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/>
<c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
</b-card-group>
<b-row>
<b-col sm="6" md="2">
<c-widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
</b-col>
<b-col sm="6" md="2">
<c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
</b-col>
<b-col sm="6" md="2">
<c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
</b-col>
<b-col sm="6" md="2">
<c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
</b-col>
<b-col sm="6" md="2">
<c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" >
</CWidget04>
</CCol>
</CRow><!--/.row-->
<CCardGroup class="mb-4">
<CWidget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
<CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
<CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
<CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
<CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
</CCardGroup>
<CCardGroup class="mb-4">
<CWidget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/>
<CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
<CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
<CWidget05 iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/>
<CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
</CCardGroup>
<CRow>
<CCol sm="6" md="2">
<CWidget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
</CCol>
<CCol sm="6" md="2">
<CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
</CCol>
<CCol sm="6" md="2">
<CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
</CCol>
<CCol sm="6" md="2">
<CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
</CCol>
<CCol sm="6" md="2">
<CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" >
<CProgress variant="danger" :value="25" class="progress-xs my-3 mb-0"/>
</c-widget05>
</b-col>
<b-col sm="6" md="2">
<c-widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
</b-col>
</b-row>
<b-row>
<b-col sm="6" md="2">
<c-widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info" inverse/>
</b-col>
<b-col sm="6" md="2">
<c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
</b-col>
<b-col sm="6" md="2">
<c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
</b-col>
<b-col sm="6" md="2">
<c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="primary" inverse/>
</b-col>
<b-col sm="6" md="2">
<c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
</b-col>
<b-col sm="6" md="2">
<c-widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/>
</b-col>
</b-row>
<b-row>
<b-col sm="6" lg="3">
<c-widget06 header="9.823" text="Members online">
</CWidget05>
</CCol>
<CCol sm="6" md="2">
<CWidget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
</CCol>
</CRow>
<CRow>
<CCol sm="6" md="2">
<CWidget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info" inverse/>
</CCol>
<CCol sm="6" md="2">
<CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
</CCol>
<CCol sm="6" md="2">
<CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
</CCol>
<CCol sm="6" md="2">
<CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="primary" inverse/>
</CCol>
<CCol sm="6" md="2">
<CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
</CCol>
<CCol sm="6" md="2">
<CWidget05 iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/>
</CCol>
</CRow>
<CRow>
<CCol sm="6" lg="3">
<CWidget06 header="9.823" text="Members online">
<template slot='dropdown'>
<b-dropdown class="float-right" variant="transparent p-0" right>
<CDropdownclass="float-right" variant="transparent p-0" right>
<template slot="button-content">
<i class="icon-settings"></i>
</template>
<b-dropdown-item>Action</b-dropdown-item>
<b-dropdown-item>Another action</b-dropdown-item>
<b-dropdown-item>Something else here...</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
<c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
<CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:70px' label='Members' pointHoverColor='primary'/>
</c-widget06>
</b-col>
<b-col sm="6" lg="3">
<c-widget06 variant="info" header="9.823" text="Members online">
<b-dropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
</CWidget06>
</CCol>
<CCol sm="6" lg="3">
<CWidget06 variant="info" header="9.823" text="Members online">
<CDropdownslot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
<i slot="button-content"
class="icon-location-pin"
></i>
<b-dropdown-item>Action</b-dropdown-item>
<b-dropdown-item>Another action</b-dropdown-item>
<b-dropdown-item>Something else here...</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
<CSimplePointedChart class="px-3"
:data="[1, 18, 9, 17, 34, 22, 11]"
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
@@ -237,124 +237,120 @@
:options="{elements: {line: {tension: 0.00001}}}"
pointHoverColor="info"
/>
</c-widget06>
</b-col>
<b-col sm="6" lg="3">
<c-widget06 variant="warning" header="9.823" text="Members online">
</CWidget06>
</CCol>
<CCol sm="6" lg="3">
<CWidget06 variant="warning" header="9.823" text="Members online">
<template slot='dropdown'>
<b-dropdown class="float-right" variant="transparent p-0" right>
<CDropdownclass="float-right" variant="transparent p-0" right>
<template slot="button-content">
<i class="icon-settings"></i>
</template>
<b-dropdown-item>Action</b-dropdown-item>
<b-dropdown-item>Another action</b-dropdown-item>
<b-dropdown-item>Something else here...</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
<c-simple-line-chart chartId="c-widget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
<CSimpleLineChart chartId="CWidget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
:options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
</c-widget06>
</b-col>
<b-col sm="6" lg="3">
<c-widget06 variant="danger" header="9.823" text="Members online">
</CWidget06>
</CCol>
<CCol sm="6" lg="3">
<CWidget06 variant="danger" header="9.823" text="Members online">
<template slot="dropdown">
<b-dropdown class="float-right" variant="transparent p-0" right>
<CDropdownclass="float-right" variant="transparent p-0" right>
<template slot="button-content">
<i class="icon-settings"></i>
</template>
<b-dropdown-item>Action</b-dropdown-item>
<b-dropdown-item>Another action</b-dropdown-item>
<b-dropdown-item>Something else here...</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template>
<c-simple-bar-chart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
<CSimpleBarChart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Members' color='rgb(250, 152, 152)' style='height:70px' />
</c-widget06>
</b-col>
</b-row>
<b-row>
<b-col sm="6" lg="3">
<c-widget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<c-simple-line-chart style="height:40px" chartId="c-widget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</CWidget06>
</CCol>
</CRow>
<CRow>
<CCol sm="6" lg="3">
<CWidget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<CSimpleLineChart style="height:40px" chartId="CWidget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CSimpleBarChart style="height:40px"
:data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
label="Sales"
/>
</c-widget07>
</b-col>
<b-col sm="6" lg="3">
<c-widget07 variant='success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<c-simple-line-chart style="height:40px" chartId="c-widget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<c-simple-bar-chart style="height:40px" chartId="c-widget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</c-widget07>
</b-col>
<b-col sm="6" lg="3">
<c-widget07 variant='danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<c-simple-line-chart style="height:40px" chartId="c-widget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<c-simple-bar-chart style="height:40px" chartId="c-widget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</c-widget07>
</b-col>
<b-col sm="6" lg="3">
<c-widget07 variant='warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<c-simple-line-chart style="height:40px" chartId="c-widget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<c-simple-bar-chart style="height:40px" chartId="c-widget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</c-widget07>
</b-col>
</b-row>
<b-row>
<b-col sm="4" lg="2">
<c-widget08 header='title' text='1,123'>
<c-simple-line-chart style="height:40px" chartId="c-widget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
</CWidget07>
</CCol>
<CCol sm="6" lg="3">
<CWidget07 variant='success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<CSimpleLineChart style="height:40px" chartId="CWidget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CSimpleBarChart style="height:40px" chartId="CWidget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</CWidget07>
</CCol>
<CCol sm="6" lg="3">
<CWidget07 variant='danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<CSimpleLineChart style="height:40px" chartId="CWidget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CSimpleBarChart style="height:40px" chartId="CWidget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</CWidget07>
</CCol>
<CCol sm="6" lg="3">
<CWidget07 variant='warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<CSimpleLineChart style="height:40px" chartId="CWidget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CSimpleBarChart style="height:40px" chartId="CWidget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</CWidget07>
</CCol>
</CRow>
<CRow>
<CCol sm="4" lg="2">
<CWidget08 header='title' text='1,123'>
<CSimpleLineChart style="height:40px" chartId="CWidget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' borderColor='danger'/>
</c-widget08>
</b-col>
<b-col sm="4" lg="2">
<c-widget08 header='title' text='1,123'>
<c-simple-line-chart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
</CWidget08>
</CCol>
<CCol sm="4" lg="2">
<CWidget08 header='title' text='1,123'>
<CSimpleLineChart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' borderColor='primary'/>
</c-widget08>
</b-col>
<b-col sm="4" lg="2">
<c-widget08 header='title' text='1,123'>
</CWidget08>
</CCol>
<CCol sm="4" lg="2">
<CWidget08 header='title' text='1,123'>
<CSimpleLineChart style="height:40px"
:data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
label="Sales"
borderColor="success"
/>
</c-widget08>
</b-col>
<b-col sm="4" lg="2">
<c-widget08 header='title' text='1,123'>
<c-simple-bar-chart style="height:40px" chartId="c-widget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
</CWidget08>
</CCol>
<CCol sm="4" lg="2">
<CWidget08 header='title' text='1,123'>
<CSimpleBarChart style="height:40px" chartId="CWidget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='danger'/>
</c-widget08>
</b-col>
<b-col sm="4" lg="2">
<c-widget08 header='title' text='1,123'>
<c-simple-bar-chart style="height:40px" chartId="c-widget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
</CWidget08>
</CCol>
<CCol sm="4" lg="2">
<CWidget08 header='title' text='1,123'>
<CSimpleBarChart style="height:40px" chartId="CWidget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='primary'/>
</c-widget08>
</b-col>
<b-col sm="4" lg="2">
<c-widget08 header='title' text='1,123'>
<c-simple-bar-chart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
</CWidget08>
</CCol>
<CCol sm="4" lg="2">
<CWidget08 header='title' text='1,123'>
<CSimpleBarChart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='success'/>
</c-widget08>
</b-col>
</b-row>
</CWidget08>
</CCol>
</CRow>
</div>
</template>
<script>
// import CWidget06 from './CWidget06'
export default {
name: 'Widgets',
// components: {
// CWidget06
// }
}
</script>