-
Notifications
You must be signed in to change notification settings - Fork 462
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
Can I pass a tailwind color to UNotifications
with toast.add()
?
#440
Comments
Yes you can! However, we have an issue with the smart safelisting that doesn't detect when the You can read more here: #375 I was thinking of safelisting all the colors for the notification component only. |
That sounds good, what about an additional app.config that could be a globally agreed-upon and satisfactory convention like: ui: {
primary: 'orange',
gray: 'slate',
success: 'bg-emerald-500 dark:bg-emerald-400', // greenish
error: 'bg-rose-500 dark:bg-rose-400 ', // reddish
warning: ' ', //yellowish
info: ' ' // blueish ,
MyCustom: ' ', // a shade of primary
} what do you think about such an approach? |
@benjamincanac In a situation where I'm using const submitForm = async () => {
console.log('Submitting...')
const result = await v$.value.$validate();
if (result) {
submitting.value = true
toast.add({
id: 'update_downloaded',
title: 'Noice!',
description: 'It will be ',
timeout: 5000,
icon: 'i-heroicons-check-circle',
ui: {
"progress": {
"base": 'absolute bottom-0 end-0 start-0 h-1',
"background": 'bg-emerald-500 dark:bg-emerald-400',
},
"icon": {
color: 'text-emerald-500 dark:text-emerald-400'
}
}
})
setTimeout(() => {
submitting.value = false
}, 1000)
setTimeout(() => {
usePinia().state.value.interface.isSlideOverOpen = false
}, 1000)
} else {
toast.add({
id: 'update_downloaded',
title: 'Something is not right!',
description: 'Double check your inputs ',
timeout: 5000,
icon: 'i-heroicons-exclamation-triangle',
ui: {
"progress": {
"base": 'absolute bottom-0 end-0 start-0 h-1',
"background": 'bg-rose-500 dark:bg-rose-400',
},
"icon": {
color: 'text-rose-500 dark:text-rose-400'
}
}
})
}
}; If there is a way to combine the app.config customization for colors to use corresponding icons, such as : success-icon: 'i-heroicons-check-circle', this might help condense the code a lot and keep app-wide consistency. |
Sure thing, we could add a |
Hello,
I am trying to find the best way to pass color to the notification component which sits in
app.vue
, but thetoast.add()
is in a different component, and if this only works if timeout is applied, is there a config change that allows me to globally use it like so:I tried safe listing colors as mentioned here , it worked with
red
, on the icon, but not on the progress animation as it did not show at all , but did not work withgreen
orblue
.My goal is to be able to use toasts with different colors in different occasions, if I use color in the toast.add() it will not show the colored timeout animation,
The text was updated successfully, but these errors were encountered: