Vue Widgets Component API
Widgets API
Explore the API reference for the Vue Widgets component and discover how to effectively utilize its props for customization.
import { CWidgetStatsA } from '@coreui/vue-pro'
| 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> |
| Name |
|---|
| chart |
Location for chart component. |
| action |
Location for action component, ex. <CDropdown>. |
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> |
import { CWidgetStatsC } 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,
},
}) |
- |
| 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> |
| Name |
|---|
| icon |
Location for icon component. |
import { CWidgetStatsD } from '@coreui/vue-pro'
| 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. |
| Name |
|---|
| chart |
Location for chart component. |
| icon |
Location for icon component, ex. <CDropdown>. |
import { CWidgetStatsE } from '@coreui/vue-pro'
| 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> |
| Name |
|---|
| chart |
Location for chart component. |
import { CWidgetStatsF } from '@coreui/vue-pro'
| 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> |
| Name |
|---|
| icon |
Location for icon component. |