Comments (4)
Interesting news, @kyloe!
So as far as I understand, they suggest to traverse the tabs once they are mounted. We could wrap the Quasar tab components in order to add such code to the
mounted
hook. But I managed to achieve something similar by adding code toTabPanel.__init__
:class TabPanel(DisableableElement): def __init__(self, name: Union[Tab, str]) -> None: # ... assert isinstance(context.slot.parent, TabPanels) panels: TabPanels = context.slot.parent current_tab = panels._props['model-value'] panels.run_method('goTo', self._props['name']) panels.run_method('goTo', current_tab)But this causes a visible animation when loading the page. The same happens on the linked codepen https://codepen.io/metalsadman/pen/OJyoYPB.
Is there a better way to do it? And what's the matter with the mentioned
@before-transition
event?
If the property 'animated' is removed when the tabs are instantiated - then the creation process is a lot less unpleasant
with ui.tab_panels(ui_tabs, value=tabs['names'][0]).props(remove='animated') as ui_panels:
I'm still looking for a more elegant solution ...
from nicegui.
I've done some searching in Quasar and Vue disciussions and have found these topics, quasarframework/quasar#16329 and quasarframework/quasar#15912.
Reading them suggests that rather than being a bug in NiceGUI it's actually a problem with Quasar. Ive looked at the solutions but they involve adding js in the Quasar environemnt - and I'm a bit new to NiceGUI, so struggling to see how NiceGUI can push these code fragments into the Quasar rendering of the nicegui app.
If anyone has a pointer - I will happily pursue the matter :)
from nicegui.
Interesting news, @kyloe!
So as far as I understand, they suggest to traverse the tabs once they are mounted. We could wrap the Quasar tab components in order to add such code to the mounted
hook. But I managed to achieve something similar by adding code to TabPanel.__init__
:
class TabPanel(DisableableElement):
def __init__(self, name: Union[Tab, str]) -> None:
# ...
assert isinstance(context.slot.parent, TabPanels)
panels: TabPanels = context.slot.parent
current_tab = panels._props['model-value']
panels.run_method('goTo', self._props['name'])
panels.run_method('goTo', current_tab)
But this causes a visible animation when loading the page. The same happens on the linked codepen https://codepen.io/metalsadman/pen/OJyoYPB.
Is there a better way to do it?
And what's the matter with the mentioned @before-transition
event?
from nicegui.
I tried to capture the before-transition event - but it didn't appear to be firing (this is most likely my lack of familiarity with the various layers (ng/quasar/vue) and how they interact, I was probably doing something incorrectly).
My test code to see if the event was firing ...
from nicegui import Client, app, ui, events, Tailwind
import time
columns = [
{'headerName':"Item", 'field': 'item', 'editable': False, 'sortable': False},
{'headerName':"Value",'field': 'value', 'editable': True,'cellDataType':'text'},
]
rows_A = [{"item":"Item A","value":"FOO"},{"item":"Item B","value":"AAA"}]
rows_B = [{"item":"Item A","value":"FOO"},{"item":"Item B","value":"BBB"}]
@ui.page('/')
def main_page() -> None:
grid_A = None
grid_B = None
async def get_data():
msg_A = await grid_A.get_client_data()
print(msg_A)
msg_B = await grid_B.get_client_data()
print(msg_B)
with ui.tabs() as tabs:
tab_A = ui.tab("A")
tab_B = ui.tab("B")
def mounted():
print("Mounted")
with ui.tab_panels(tabs,value=tab_A).on('before-transition',mounted) as panels:
with ui.tab_panel(tab_A) as panel_A:
with ui.element('div').props('ng-if'):
grid_A = ui.aggrid({
'columnDefs': columns,
'rowData': rows_A,
'domLayout': 'autoHeight',
'stopEditingWhenCellsLoseFocus': True
}).style('width: 300px')
with ui.tab_panel(tab_B) as panel_B:
with ui.element('div').props('ng-if'):
grid_B = ui.aggrid({
'columnDefs': columns,
'rowData': rows_B,
'domLayout': 'autoHeight',
'stopEditingWhenCellsLoseFocus': True
}).style('width: 300px')
ui.button("Get data").on('click', lambda: (get_data()))
ui.run(storage_secret='THISISABIGSECRET')
from nicegui.
Related Issues (20)
- `run_method` and `getElement` return inconsistent types of elements HOT 1
- Using `copy.deepcopy` on storage causes data loss. HOT 4
- Problem for passing parameter to handler function for dynamic added `ul.html` , `ui.botton`, maybe others. HOT 2
- KeyError in `ui.log` after client disconnected HOT 4
- pyinstaller and cpu_bound issue HOT 6
- Leaflet: map flickers between centers after flyTo HOT 8
- Change to MS-Windows style windows is not possible? HOT 2
- 2-way bindings backward direction does not work anymore HOT 1
- Not able to clear input anymore HOT 1
- Accessibility issue with hidden connection warning HOT 3
- Autocomplete for `ui.input` not working on mobile HOT 1
- Need Assistance Calling the Search Filter Function Inside the Search Template in NiceGUI Table
- NiceGUI uses 100% of a CPU core when running inside a container HOT 1
- [Pycharm Problem] Raise asyncio error when reload HOT 1
- local_file_picker Example error in version 1.4.25: HOT 5
- custom vue.js component not updated after modification HOT 3
- non-existing on_pointer parameter in InteractiveImage HOT 1
- `ui.chip` textcolor stays black on dark background HOT 2
- Bump plotly.js to 2.32.0 version supporting zindex HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nicegui.