ui icon indicating copy to clipboard operation
ui copied to clipboard

Toast location

Open CareTiger opened this issue 1 year ago • 1 comments

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.

CareTiger avatar May 18 '23 00:05 CareTiger

Actually it's mentioned in the documentation but could be improved: CleanShot 2023-05-18 at 11 41 35@2x

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 avatar May 18 '23 09:05 atinux

@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

CareTiger avatar May 19 '23 08:05 CareTiger