Explore the API reference for the Vue Widgets component and discover how to effectively utilize its props for customization.
On this page
CWidgetStatsA
jsx
import { CWidgetStatsA } from '@coreui/vue-pro'
Props
Property
Default
Type
color
-
string
-
title
-
string
Title for your component. If you want to pass non-string value please use dedicated slot <template #title>...</template>
value
0
number, string
Value for your component. If you want to pass non-string or non-number value please use dedicated slot <template #value>...</template>
Slots
Name
chart
Location for chart component.
action
Location for action component, ex. <CDropdown>.
CWidgetStatsB
jsx
import { CWidgetStatsB } from '@coreui/vue-pro'
Property
Default
Type
color
-
Color
Sets the color context of the component to one of CoreUI’s themed colors
inverse
-
boolean
Colors have been inverted from their default dark shade.
progress
-
shape({
/**
* Sets the color context of the progress bar to one of CoreUI’s themed colors
*
* @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
*/
color: Color,
/**
* The percent to progress the ProgressBar (out of 100).
*/
value: {
type: Number,
default: 0,
},
})
-
text
-
string
Helper text for your component. If you want to pass non-string value please use dedicated slot <template #text>...</template>
title
-
string
Title for your component. If you want to pass non-string value please use dedicated slot <template #title>...</template>
value
0
number, string
Value for your component. If you want to pass non-string or non-number value please use dedicated slot <template #value>...</template>
CWidgetStatsC
jsx
import { CWidgetStatsC } from '@coreui/vue-pro'
Props
Property
Default
Type
color
-
Color
Sets the color context of the component to one of CoreUI’s themed colors.
inverse
-
boolean
Colors have been inverted from their default dark shade.
progress
-
shape({
/**
* Sets the color context of the progress bar to one of CoreUI’s themed colors
*
* @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
*/
color: Color,
/**
* The percent to progress the ProgressBar (out of 100).
*/
value: {
type: Number,
default: 0,
},
})
-
title
-
string
Title for your component. If you want to pass non-string value please use dedicated slot <template #title>...</template>
value
0
number, string
Value for your component. If you want to pass non-string or non-number value please use dedicated slot <template #value>...</template>
Slots
Name
icon
Location for icon component.
CWidgetStatsD
jsx
import { CWidgetStatsD } from '@coreui/vue-pro'
Props
Property
Default
Type
color
-
Color
Sets the color context of the component to one of CoreUI’s themed colors.
values
() => []
Value[]
Values and titles for your component.
Slots
Name
chart
Location for chart component.
icon
Location for icon component, ex. <CDropdown>.
CWidgetStatsE
jsx
import { CWidgetStatsE } from '@coreui/vue-pro'
Props
Property
Default
Type
title
-
string
Title for your component. If you want to pass non-string value please use dedicated slot <template #title>...</template>
value
0
number, string
Value for your component. If you want to pass non-string or non-number value please use dedicated slot <template #value>...</template>
Slots
Name
chart
Location for chart component.
CWidgetStatsF
jsx
import { CWidgetStatsF } from '@coreui/vue-pro'
Props
Property
Default
Type
color
-
Color
Sets the color context of the component to one of CoreUI’s themed colors.
padding
true
boolean
Set padding of your component.
title
-
string
Title for your component. If you want to pass non-string value please use dedicated slot <template #title>...</template>
text
-
string
Helper text for your component. If you want to pass non-string value please use dedicated slot <template #text>...</template>
value
0
number, string
Value for your component. If you want to pass non-string or non-number value please use dedicated slot <template #value>...</template>