Ctrl+K

NiceGUI 样式设计

NiceGUI 样式设计#

NiceGUI 使用 Quasar 框架 1.0 版本，因此具有其全部设计能力。每个 NiceGUI 元素都提供了 props 方法，其内容会传递给 Quasar 组件：请查看 Quasar 文档以获取所有样式属性。带有前导 : 的属性可以包含在客户端求值的 JavaScript 表达式。您还可以使用 classes 方法应用 Tailwind CSS 实用类。

如果您确实需要应用 CSS，您可以使用 style 方法。这里的分隔符是 ; 而不是空格。

这三个函数还提供了 remove 和 replace 参数，以防在特定样式中不需要预定义的外观。

from nicegui import ui

ui.radio(['x', 'y', 'z'], value='x').props('inline color=green')
ui.button(icon='touch_app').props('outline round').classes('shadow-lg')
ui.label('Stylish!').style('color: #6E93D6; font-size: 200%; font-weight: 300')

# ui.run()

尝试样式化 NiceGUI 元素！#

尝试一下 Tailwind CSS 类、Quasar 属性和 CSS 样式如何影响 NiceGUI 元素。

从可用的元素中选择一个，并开始对其进行样式设计！

from nicegui import ui

element = ui.button('element')
element.classes('

')

element.props('

')

element.style('

')

ui.run()
目录