Simplify vertical ui.toggle() for vertical menus

[whoamiafterall]

I was looking for a way to have a vertical menu recently without using ui.tabs(), so i figured i could use a toggle.

However there is no documentation neither on nicegui's nor on quasar's side on how to do this vertically (e.g. in a sidebar, or a dropdown). I even asked AI and it told me to use some custom css :D

Anyhow - i literally just had to set:

ui.toggle().classes('wrap column')

It took me like 20min including some browser inspecting to figure that out, so i thought you may be willing to just add a keyword argument to switch that up, like this:

ui.toggle(vertical=True)

I think having this would probably be nice for quite some of the ui elements, not just this one.

However, i respect if you think that this is out of scope.
Adding it to the docs would be nice(gui) then anyway.
If you feel like adding this sidebar-menu approach to the examples, here's my code:
Infra-United/inventurgui@6dcace2#diff-31fb021d8d7b5ccfa01bbb378f72b509f21b27d95523ed2a1914a5688a46cb0b

Thanks for your great work so far!

[falkoschindler]

Thanks for sharing this idea, @whoamiafterall!

Here is an example of your proposed solution ("wrap" doesn't seem to be necessary):

ui.toggle(['Amazon', 'Bing', 'Google'])
ui.toggle(['Amazon', 'Bing', 'Google']).classes('column')

But if you look closely, the result isn't 100% correct. The left corners of the selected "Amazon" button are rounded - as they should for horizontal toggle buttons.

Therefore I think the implementation would be quite a bit more complicated and might fail in combination with props like "outline", "rounded", "dense" etc.

[whoamiafterall]

Oh, thanks for noticing. I did not notice because i also had set .props('square').

I quickly wrote a little demo to check with and without square and with square they all seem to work - unless those that contradict square and you're right that it breaks when using outline:

from nicegui import ui

options:list = ['Amazon', 'Bing', 'Google']

with ui.row():
    ui.toggle(options).classes('column').props('square')
    ui.toggle(options).classes('column').props('dense')
    ui.toggle(options).classes('column').props('flat')
    ui.toggle(options).classes('column').props('rounded')
    ui.toggle(options).classes('column').props('outline')
    ui.toggle(options).classes('column').props('push')
    ui.toggle(options).classes('column').props('glossy')
    ui.toggle(options).classes('column').props('ripple')
    ui.toggle(options).classes('column').props('unelevated')

with ui.row():
    ui.toggle(options).classes('column').props('square')
    ui.toggle(options).classes('column').props('dense square')
    ui.toggle(options).classes('column').props('flat square')
    ui.toggle(options).classes('column').props('rounded square')
    ui.toggle(options).classes('column').props('outline square')
    ui.toggle(options).classes('column').props('push square')
    ui.toggle(options).classes('column').props('glossy square')
    ui.toggle(options).classes('column').props('ripple square')
    ui.toggle(options).classes('column').props('unelevated square')

ui.run()

So i'd leave it up to you on how to proceed with this. I think desperate people can also find it here in the discussions.

[evnchn]

Yeah it doesn't work totally style-wise. But for basic functionality it's passable IMO

There is an open issue at quasarframework/quasar#7766 but discussion is stale...