QStatistic
Install
Uninstall
Examples:
Example1
123456
Example2
987654
Example3
123
Example4
123 / 456 
                
                    
<QStatistic label="Example1" bordered textAlign="center">
    123456
</QStatistic>

                
            
                
                    
<QStatistic label="Example2" dark>
    <q-icon name="star" />
    987654
</QStatistic>

                
            
                
                    
<QStatistic label="Example3" bordered>
    123
</QStatistic>

                
            
                
                    
<QStatistic label="Example4" textAlign="right">
    <q-icon name="font_download" />
    123 / 456
</QStatistic>
Examples:
Example5
987654
Example6
beautiful colours 
                
                    
<QStatistic label="Example5" bordered boldLabel>
    <div class="row justify-between items-center" style="width: 100%;">
        <q-icon name="star" />
        987654
    </div>
</QStatistic>

                
            
                
                    
<QStatistic label="Example6" bordered textAlign="center" :style="{ backgroundImage: gradualColor }">
    beautiful colours
</QStatistic>

gradualColor: linear-gradient(to bottom right, #ec4786, #b955a4)
Example7
987654
Example8
987654 
                
                    
<QStatistic label="Example7" bordered boldLabel>
    <div class="text-italic text-h6 row items-center" style="width: 100%;">
        <q-icon name="star" size="sm" />
        987654
    </div>
</QStatistic>

                
            
                
                    
<QStatistic label="Example8" bordered boldLabel :labelStyle="{ color: 'red' }">
    <div class="text-italic text-h6 row items-center" style="width: 100%;">
        <q-icon name="star" size="sm" />
        <q-space></q-space>
        987654
    </div>
</QStatistic>