Ctrl+K

add_style() 向页面添加样式定义

add_style() 向页面添加样式定义#

此函数可用于将 CSS、SCSS 或 SASS 样式定义添加到 HTML 页面的头部。

  • content：样式内容（字符串或文件路径）

  • indented：内容是否缩进（SASS）或不缩进（SCSS/CSS）（默认：False）

from nicegui import ui

ui.add_style('''
    .red {
        color: red;
    }
''')
ui.label('This is red with CSS.').classes('red')

# ui.run()

add_style() 使用 SCSS 定义样式#

您也可以使用 SCSS 来定义样式。

from nicegui import ui

ui.add_style('''
    .green {
        background-color: lightgreen;
        .blue {
            color: blue;
        }
    }
''')
with ui.element().classes('green'):
    ui.label('This is blue on green with SCSS.').classes('blue')

# ui.run()

add_style() 使用 SASS#

您也可以通过将 indented 参数设置为 True 来使用缩进的 SASS 语法。

from nicegui import ui

ui.add_style('''
    .yellow
        background-color: yellow
        .purple
            color: purple
''', indented=True)
with ui.element().classes('yellow'):
    ui.label('This is purple on yellow with SASS.').classes('purple')

# ui.run()
目录