python-3.xnicegui

How to make NiceGUI card labels customised with Header and Units as suffix

I want my NiceGUI label to look like this -

azure-dashboard-image

So I did something like this -

with ui.card().classes('w-36 flex flex-col justify-center items-center'):
    ui.label(f'{header}').classes('text-cs font-bold text-center')
    ui.label(f'{value} {unit}').classes('text=2xl font-normal text-center')

So my code output looks something like this

nicegui-output

How to make the value left-center aligned and the unit('ms') to be suffixed to the value?

Solution

  • Here is a possible solution using the class "justify-center" to vertically center the card's children and "absolute top-4 left-4" to absolutely position the first label:

    with ui.card().props('flat bordered square').classes('w-40 h-40 bg-gray-100 justify-center'):
    ui.label('Avg. Response Time').classes('font-semibold uppercase text-xs text-gray-500 absolute top-4 left-4')
    with ui.row(align_items='end').classes('gap-0 text-gray-800'):
        ui.label('330').classes('text-5xl font-light')
        ui.label('ms')

    Screenshot