QPageScroller #2816
Replies: 3 comments 4 replies
-
Hi @wasabismile, Like other Quasar element without a native NiceGUI element, you can use the generic for i in range(100):
ui.label(f'Label {i}')
with ui.element('q-page-scroller'):
ui.button(icon='arrow_upward') But I'll convert this discussion into a feature request, because a |
Beta Was this translation helpful? Give feedback.
-
Thanks,I've tested your code, and it works very well! @falkoschindler with ui.scroll_area().classes('bg-blue-100'):
ui.label('CONTENT')
[ui.label(f'Line {i}') for i in range(200)]
with ui.element('q-page-scroller'):
ui.button(icon='arrow_upward').props('round') Please forgive me,I'm not a professional programmer. Maybe,my question is not professional enough |
Beta Was this translation helpful? Give feedback.
-
@falkoschindler Thank you for your reply. Based on your suggestion, I tried using "QFab" to achieve the similar functionality, which enables scrolling back to the top and bottom. the following is my code: from nicegui import ui
with ui.scroll_area() as scroll_area:
ui.label('CONTENT')
[ui.label(f'Line {i}') for i in range(2000)]
with ui.element("q-fab") as upbtn:
ui.element('q-fab-action').classes("bg-yellow").on("click",lambda: scroll_area.scroll_to(percent=0))
ui.element('q-fab-action').classes("bg-blue").on("click",lambda: scroll_area.scroll_to(percent=1))
upbtn.classes("fixed bottom-5 left-5 bg-accent text-white")
ui.button(icon='arrow_upward', on_click=lambda: scroll_area.scroll_to(percent=0)).props('round').classes("fixed top-5 right-5")
ui.run() |
Beta Was this translation helpful? Give feedback.
-
Question
When the page scrolls to a certain position, the "Back to Top" button appears. Clicking the button will bring the page back to the top
Beta Was this translation helpful? Give feedback.
All reactions