|
| Vertical Segmented Buttons |
| Iniciado por Volker Gericke, 03,ene. 2026 19:39 - 3 respuestas |
| |
| | | |
|
| |
| Publicado el 03,enero 2026 - 19:39 |
Hello and my best wishes to you for 2026.
Is there a way to arrange segmented buttons vertically instead of horizontally? I really like using these controls to display filter options, but being limited to a horizontal arrangement often forces me to use other controls instead.
Kind greetings,
Volker |
| |
| |
| | | |
|
| | |
| |
Miembro registrado
2 mensajes |
|
| Publicado el 09,enero 2026 - 09:17 |
Happy New Year, Volker! It’s great to start 2026 with a design challenge. Best wishes to you as well.
To answer your question: Yes, it is absolutely possible to arrange segmented buttons vertically, though the method depends on whether you are working in a design tool (like Figma) or a development framework (like Flutter, Swift, or React).
Standard UI libraries often default to horizontal layouts to save vertical screen real estate, but "Vertical Segmented Buttons" are a common pattern for sidebars or filter drawers.
How to Implement Vertical Segmented Buttons
1. In Design (Figma/Adobe XD)
If you are designing the interface, you can simply change the layout direction:
Auto Layout (Figma): Select your segmented button component and change the direction from Horizontal (→) to Vertical (↓).
Styling Tip: Ensure the corner radius only applies to the very top and very bottom edges of the stack to maintain that "unified" button group look.
2. In Development (CSS/Web)
If you are building for the web using Flexbox, you can override the default row behavior:
.segmented-container {
display: flex;
flex-direction: column; /* This stacks them vertically */
width: 200px;
}
.segmented-button {
border: 1px solid #ccc;
margin-bottom: -1px; /* Prevents double borders between buttons */
}
3. In UI Frameworks
Material Design 3: While the default is horizontal, the specification allows for vertical layouts in compact spaces. You would typically use a Column or Box layout to wrap individual OutlinedButton components that are styled to touch.
SwiftUI: You can use a Picker with a SegmentedPickerStyle(), but it is notoriously difficult to rotate vertically. Developers often create a custom Toggle Group using a VStack to achieve this look. |
| |
| |
| | | |
|
| | |
| |
| Publicado el 09,enero 2026 - 19:35 |
Thank you very much, Willisthiel074EN,
but I was actually interested in the options that Windev provides.
I tried vertical segmented buttons in Figma. When I import them into Windev, I get individual buttons.
I will write to PC Soft to suggest that they might consider this as one of the "900 new features" in Windev 2027.
Kind regards,
Volker |
| |
| |
| | | |
|
| | |
| |
Miembro registrado
94 mensajes |
|
| Publicado el 22,enero 2026 - 17:51 |
AI Response
--
Ben Dell
Riebens Computers Pty Ltd
Southern Africa PcSoft Distributor
www.windevsa.co.za
PcSoft Sales, Support and Training |
| |
| |
| | | |
|
| | | | |
| | |
|