Docs Menu

Stats

Stats have the following properties:

Property Required? Type Options Description
bg no string
  • null (default)
  • transparent
  • warning
  • success
  • info
  • notice
 Background color of the Stats
columns no int
  • 4 (default)
  • 2
  • 3
  • 5
  • 6
 Number of columns for the Stats component.
spacing no string|mixed Required. Value of the input attribute by default.

Basic Examples
Basic Stats example. 

            
 1<x-fcui-stats>
 2 
 3    <x-slot:panels>
 4 
 5        <x-fcui-stat-block stat="249" label="Customers" />
 6 
 7        <x-fcui-stat-block stat="$5,810" label="Revenue This Week" />
 8 
 9        <x-fcui-stat-block stat="30" label="Downloads" />
10 
11        <x-fcui-stat-block stat="2,890" label="Views" />
12 
13    </x-slot:panels>
14 
15</x-fcui-stats>
Customers
249
Revenue This Week
$5,810
Downloads
30
Views
2,890

Advanced Example
Stats example with a transparent background and spacing between each Stat Block. 

            
 1<x-fcui-stats bg="transparent" spacing="4">
 2 
 3    <x-slot:panels>
 4 
 5        <x-fcui-stat-block stat="249" label="Customers" type="info" />
 6 
 7        <x-fcui-stat-block stat="$5,810" label="Revenue This Week" type="warning" />
 8 
 9        <x-fcui-stat-block stat="30" label="Downloads" type="notice" />
10 
11        <x-fcui-stat-block stat="2,890" label="Views" />
12 
13    </x-slot:panels>
14 
15</x-fcui-stats>
Customers
249
Revenue This Week
$5,810
Downloads
30
Views
2,890