Skip to content

Latest commit

 

History

History

app-extension

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 

Quasar App Extension qstatistic

QStatistic allows you to display data statistically.

npm npm

npm npm

Install

quasar ext add @junvary/qstatistic

Quasar CLI will retrieve it from NPM and install the extension.

Uninstall

quasar ext remove @junvary/qstatistic

Example

<div class="row q-gutter-md">
    <div class="row q-gutter-x-md">
        <QStatistic class="col" label="Example1" bordered textAlign="center">
            123456
        </QStatistic>
        <QStatistic class="col" label="Example2" dark>
            <q-icon name="star" />
            987654
        </QStatistic>
        <QStatistic class="col" label="Example3" bordered>
            123
        </QStatistic>
        <QStatistic class="col" label="Example4" textAlign="right">
            <q-icon name="font_download" />
            123 / 456
        </QStatistic>
    </div>
    <div class="row q-gutter-x-md">
        <QStatistic class="col" label="Example5" bordered boldLabel>
            <div class="row justify-between items-center" style="width: 100%;">
                <q-icon name="star" />
                987654
            </div>
        </QStatistic>
        <QStatistic class="col" label="Example6" bordered textAlign="center" :style="{ backgroundImage: gradualColor }">
            beautiful colours
        </QStatistic>
        <QStatistic class="col" 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 class="col" 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>
    </div>
</div>

20231111155534.png

License

MIT