如何自定义NiceGUI卡片标签：设置标题与后缀单位并调整对齐

问题背景 #

想要让NiceGUI的卡片组件呈现类似Azure仪表盘的样式，当前代码实现如下：

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')

但输出不符合预期，需要实现值左中对齐且单位（如'ms'）紧跟在值之后的效果。

解决方案与代码示例 #

方案1：使用横向布局容器控制对齐 #

通过ui.row容器包裹值和单位标签，确保单位紧跟值，同时调整容器样式让整体在卡片内居中，值本身左对齐：

with ui.card().classes('w-36 flex flex-col justify-center items-center p-4'):
    # 标题保持居中加粗，调整字号和间距优化布局
    ui.label(f'{header}').classes('text-sm font-bold text-center mb-2')
    # 横向容器：内部元素左对齐，容器在卡片内居中
    with ui.row().classes('justify-start w-full max-w-[80%]'):
        # 值标签：大字号，左对齐
        ui.label(f'{value}').classes('text-2xl font-normal')
        # 单位标签：稍小字号，紧跟值，垂直对齐到底部
        ui.label(f'{unit}').classes('text-lg font-normal ml-1 self-end')

方案2：使用HTML拼接实现精细控制 #

如果需要更灵活的样式控制，可以用ui.html直接拼接值和单位，配合容器样式实现需求：

with ui.card().classes('w-36 flex flex-col justify-center items-center p-4'):
    ui.label(f'{header}').classes('text-sm font-bold text-center mb-2')
    # 容器设置文本左对齐，同时限制宽度确保在卡片内居中
    with ui.element('div').classes('text-left w-[80%]'):
        ui.html(f'<span class="text-2xl font-normal">{value}</span><span class="text-lg font-normal ml-1">{unit}</span>')

关键调整点 #

• 修正原代码中text=2xl的拼写错误，改为text-2xl；
• 通过容器的justify-start和宽度限制，实现值左对齐但整体在卡片内居中；
• 给单位标签添加间距和垂直对齐样式，让排版更贴近Azure仪表盘的视觉效果；
• 调整标题的字号和间距，优化整体布局的紧凑感。

内容的提问来源于stack exchange，提问作者Anirban Nag 'tintinmj'