expansion() 扩展元素

expansion() 扩展元素#

基于 Quasar 的 QExpansionItem 组件，提供了一个可展开的容器。

  • text：标题文字

  • caption：可选的副标题（或子标签）文字

  • icon：可选的图标（默认：None）

  • group：可选的组名，用于在组内协调打开/关闭状态，也称为“手风琴模式”

  • value：创建时是否应展开扩展（默认：False）

  • on_value_change：值改变时要执行的回调函数

from nicegui import ui

with ui.expansion('Expand!', icon='work').classes('w-full'):
    ui.label('inside the expansion')

# ui.run()

expansion() 带有自定义表头的扩展#

除了设置纯文本标题，您还可以通过将 UI 元素添加到 "header" 插槽中来填充扩展表头。

from nicegui import ui

with ui.expansion() as expansion:
    with expansion.add_slot('header'):
        ui.image('https://nicegui.io/logo.png').classes('w-16')
    ui.label('What a nice GUI!')

# ui.run()

expansion() 带有自定义副标题的扩展#

可以在标题下方添加副标题或子标签。

from nicegui import ui

with ui.expansion('Expand!', caption='Expansion Caption').classes('w-full'):
    ui.label('inside the expansion')

# ui.run()

expansion() 带有分组的扩展#

可以定义一个扩展组，以启用协调的打开/关闭状态，也称为“手风琴模式”。

from nicegui import ui

with ui.expansion(text='Expand One!', group='group'):
    ui.label('inside expansion one')
with ui.expansion(text='Expand Two!', group='group'):
    ui.label('inside expansion two')
with ui.expansion(text='Expand Three!', group='group'):
    ui.label('inside expansion three')

# ui.run()
目录