Access to Menu and button

[akashramtohul4]

Hello Friends ,

I want to build a scaffolding page with menu and button , I dont know if the team scaffolding is the right word to use. I will try to explain it in diagram .Am looking for advice about how to build it and the right components to use. I dont have any code to show right now

below is the diagram about how it should look :

1.User represent the page toggle and just below we have a button toggle Create and Save

I can collapse and open the page toggle and if I select a button on the page toggle should also be selected

Can someone please advice how I can implement this

Thanks

[pikil]

q-toggle inside q-expansion-item should do the trick I believe :)

https://quasar.dev/vue-components/expansion-item#controlling-expansion-state
https://quasar.dev/vue-components/button

[akashramtohul4]

Yes its an array of object just like MenuList but still am not able to display it side by side

[pikil]

Not sure, what you mean by side-by-side.
The toggles inside are side-by-side in your codepen already and all the item-extensions are stacked as per your initial screenshot

[akashramtohul4]

what i mean is like this

[pikil]

That's exactly what I see in the codepen you sent :)

Anyhow, you can try to wrap them into the grid row if you want them inline:
https://quasar.dev/layout/grid/row

[akashramtohul4]

thanks @pikil you have been a great help :)

[hawkeye64]

Is this what you want? https://codepen.io/Hawkeye64/pen/abwgbjW?editors=1011

[akashramtohul4]

@hawkeye64 no its sorry i mean horizontal an how do i indicate that the expansion has been selected. is it possible to add a toggle beside the expansion header ?

[hawkeye64]

You can do whatever you want, after all, it's just JavaScript. Here's another try at what "I think" you are asking for. It could be a bit more eloquent: https://codepen.io/Hawkeye64/pen/abwgbjW?editors=1011