Statistics Card - Soft UI
PROOur Vue Statistics Cards are used for showing relevant metrics to the users See below our examples that you can use with Vue Soft UI Dashboard PRO.
Mini Statistics Card
Use this example to create a simple statistics card.
Today's Money
$53,000
Props Information
Name | Type | Default | Description |
---|---|---|---|
directionReverse | boolean | false | Used to set the of the MiniStatisticsCard component to RTL. |
title | ['String', 'Object'] | ['text', 'color'] | title as an Object allows to set the title text and color . |
value* | ['String', 'Number', 'Object'] | ['text', 'color'] | value as an Object allows to set the value text and the value's color . |
percentage | ['String', 'Object'] | ['value', 'color'] | percentage as an Object allows to set the percentage value and percentage's color . |
icon | ['String', 'Object'] | ['component', 'background'] | icon as an Object allows to set the icon component and icon background color. |
classContent | String | classContent is used to apply custom classes around the content of the MiniStatisticsCard . |
Complex Statistics Card
PRO
Use this example to create a complex statistics card.
Props Information
Name | Type | Default | Description |
---|---|---|---|
icon* | ['String', 'Object'] | ['component', 'background'] | icon as an Object allows to set the icon component and icon background color. |
count | Object | ['number', 'label'] | count allows to set the count's number and the count's label . |
percentage | ['String', 'Object'] | ['label', 'color'] | percentage as an Object allows to set the percentage label and percentage's color . |
backgroundColor | String | backgroundColor is used to apply custom background color to ComplexStatisticsCard component. |