-
Notifications
You must be signed in to change notification settings - Fork 504
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Automatic Breakpoint for UButtonGroup
and UTabs
Orientation
#1805
Comments
I think this falls out of the scope of Nuxt UI. However, I can suggest using Vueuse's |
Not related to your request but the code you're using would produce a hydration mismatch if you're using SSR. I'd suggest passing tailwind breakpoints to ButtonGroup's <!-- orientation="vertical" has `flex-col` by default -->
<UButtonGroup :ui={ wrapper: { vertical: 'sm:flex-row' }} orientation="vertical">
...
</UButtonGroup> |
@MuhammadM1998 It's important to note that simply changing But I agree that handling this only with Tailwind class beakpoints and not javascript would be better |
I didn't try it before but I think you're right you probably will have to tweak other classes too. I don't think they would be many but It's a hassle indeed |
There are actually ... many. 😂
|
And here I thought it would be simple. Maybe a mismatch isn't a bad idea 😂 |
The class management for the button group has been rewritten for version 3 (https://github.com/benjamincanac/ui3/blob/dev/src/theme/button-group.ts), and it might be simpler to add it in this version. Additionally, we need orientation management to correct the button group design on the mobile version of the site scripts.nuxt.com (https://github.com/nuxt/scripts/blob/main/docs/pages/index.vue#L229). |
UButtonGroup
and UTabs
Orientation
This issue is stale because it has been open for 30 days with no activity. |
Description
I would like to propose a feature that allows the UButtonGroup component to automatically switch its orientation between horizontal and vertical based on a responsive breakpoint. This feature would enhance the flexibility and usability of the component, particularly for responsive design.
Current Workaround:
Currently, I am using the following code to achieve this behavior:
Additional context
No response
The text was updated successfully, but these errors were encountered: