Open StarDustEins opened 1 week ago
Thanks for reporting this issue, @StarDustEins!
Minimum reproducible example:
with ui.stepper().props('vertical animated') as stepper:
with ui.step('A'):
with ui.stepper_navigation():
ui.button('Next', on_click=stepper.next)
with ui.step('B'):
with ui.stepper_navigation():
ui.button('Next', on_click=stepper.next)
ui.button('Back', on_click=stepper.previous)
with ui.step('C'):
with ui.stepper_navigation():
ui.button('Back', on_click=stepper.previous)
So far I failed to reproduce it with plain Quasar/Vue:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:400|Material+Icons" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/quasar@2.17.0/dist/quasar.prod.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="q-app">
<q-stepper ref="stepper" :model-value="step" @update:model-value="onStepChange" vertical animated>
<q-step :name="1" title="Step 1">
<q-stepper-navigation>
<q-btn @click="next" label="Next"></q-btn>
</q-stepper-navigation>
</q-step>
<q-step :name="2" title="Step 2">
<q-stepper-navigation>
<q-btn @click="next" label="Next"></q-btn>
<q-btn @click="previous" label="Previous"></q-btn>
</q-stepper-navigation>
</q-step>
<q-step :name="3" title="Step 3">
<q-stepper-navigation>
<q-btn @click="previous" label="Previous"></q-btn>
</q-stepper-navigation>
</q-step>
</q-stepper>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.17.0/dist/quasar.umd.prod.js"></script>
<script>
const app = Vue.createApp({
setup() {
const step = Vue.ref(1);
const stepper = Vue.ref(null);
return {
step,
stepper,
onStepChange: (newStep) => (step.value = newStep),
next: () => stepper.value.next(),
previous: () => stepper.value.previous(),
};
},
});
app.use(Quasar);
app.mount("#q-app");
</script>
</body>
</html>
This animates as expected. But what's the difference to a NiceGUI app? Does anyone have an idea?
I have no idea about Vue and js
@falkoschindler I suspect the reason for the issue is that the stepper rebuilds all its child elements every time it updates
Description
Vertical stepper's animation seems not good, in Quasor's official demo it works smoothly. I use the latest version of Nicegui 2.3.0
https://github.com/user-attachments/assets/7600407d-e6a0-4cd2-bdf6-8218c39a1dc3