ui
ui copied to clipboard
Toast location
Is your feature request related to a problem? Please describe.
I am frustrated when the toast slides out from bottom right of the screen. the first time I interreacted with the example I had to look around the screen to see where it was.
Describe the solution you'd like
Normally all the toasts that I have experience with are ones the slide out from the top-right of the screen. I love the toast component but I would love the flexibility to decide which corner of the page it is placed.
Describe alternatives you've considered
Several third party libraries and I haven't found a good clean solution like yours.
Actually it's mentioned in the documentation but could be improved:
You can do this in your app.config.ts
:
export default defineAppConfig({
ui: {
notifications: {
wrapper: 'fixed top-0 right-0 flex flex-col justify-end w-full z-[55] sm:w-60',
}
},
});
See a demo on https://stackblitz.com/edit/nuxtlabs-ui-sequhm?file=app.config.ts,app.vue
I will open a PR to simplify it to not use the wrapper but notifications.position
@Atinux You are right Sebastien. I completely missed that. I was so excited by all the components that I wanted to implement them in my project clean out all the other third party libraries that I was using. thank you for pointing that out. This module is amazing. thank you guys