splitter() 分隔器

splitter() 分隔器#

ui.splitter 元素将屏幕空间分割为可调整大小的部分，允许在应用程序中实现灵活和响应式布局。

基于 Quasar 的 Splitter 组件：Splitter

它提供三个可定制的插槽，before、after 和 separator，可用于在分隔器内嵌入其他元素。

  • horizontal：是否水平分割而不是垂直分割

  • limits：两个数字，表示两个面板的最小和最大分割尺寸

  • value：第一个面板（或使用 reverse 时的第二个）的大小

  • reverse：是否将模型大小应用于第二个面板而不是第一个 -on_change：当用户释放分隔器时调用的回调函数

from nicegui import ui

with ui.splitter() as splitter:
    with splitter.before:
        ui.label('This is some content on the left hand side.').classes('mr-2')
    with splitter.after:
        ui.label('This is some content on the right hand side.').classes('ml-2')

# ui.run()

splitter() 高级用法#

此演示展示了所有插槽和参数，包括一个工具提示、一个自定义分隔符和一个回调函数。

from nicegui import ui

with ui.splitter(horizontal=False, reverse=False, value=60,
                 on_change=lambda e: ui.notify(e.value)) as splitter:
    ui.tooltip('This is the default slot.').classes('bg-green')
    with splitter.before:
        ui.label('This is the left hand side.').classes('mr-2')
    with splitter.after:
        ui.label('This is the right hand side.').classes('ml-2')
    with splitter.separator:
        ui.icon('lightbulb').classes('text-green')

ui.number('Split value', format='%.1f').bind_value(splitter)

# ui.run()

splitter() 图片乐趣#

此演示展示了如何使用分隔器并排显示图像。

from nicegui import ui

with ui.splitter().classes('w-72 h-48') \
        .props('before-class=overflow-hidden after-class=overflow-hidden') as splitter:
    with splitter.before:
        ui.image('https://cdn.quasar.dev/img/parallax1.jpg').classes('w-72 absolute-top-left')
    with splitter.after:
        ui.image('https://cdn.quasar.dev/img/parallax1-bw.jpg').classes('w-72 absolute-top-right')

# ui.run()
目录