0.15 Notify with HTML

Nicholas

I’m wondering if there is a way to render HTML inside of the new Notify container?

In 0.14 we were able to wrap HTML inside of the Alert but from what I have seen, this is not possible in 0.15?

snowdrop

Same here. @Nicholas this might be off topic but how did you achieve using Notify inside Vue files? I tried this this.$q.notify according to the docs but it’s not working. Using import { Notify } from 'quasar' fixed it.

Akaryatrh

@snowdrop said in 0.15 Notify with HTML:

Using import { Notify } from ‘quasar’ fixed it.

Registering the plug-in inside quasar.conf.js is not sufficient? (moreover it’s the default configuration)

framework: {
  components: [...],
  directives: [...],
  plugins: [
    'Notify'
  ]
}

jeffatpf

Setting an HTML message within Notify and Dialog is a missed feature - lost with the removal of Alert in 0.15 and it’s HTML support. It would be great to get it back.

Nicholas

@jeffatef Yes! I can’t tell you how much I miss these features!

MusicForMellons

@akaryatrh No this.$q.notify does not work in vue file also not when set properly in quasar.config.js with

    framework: {
      components: [
      ],
      directives: [
      ],
      plugins: [ 'Notify' ],

    },

Any idea why?

MusicForMellons

I also used to set background color of toasts with rgba notation, but this does not work anymore with notify…

mds1

I also miss the ability to add HTML to an alert. Are there any plans to add HTML support to the new Notify component?

mds1

This post is deleted!

snowdrop

@akaryatrh Yes, setting the Notify plugin inside the quasar.conf.js is not sufficient. I need to declare import { Notify } from 'quasar' in my vue file to make it work.

Akaryatrh

If not already done, you guys should open issues on https://github.com/quasarframework/quasar/issues

MusicForMellons

Ok, just did.

rstoenescu

Installation. Required. http://quasar-framework.org/components/notify.html#Installation
Usage: http://quasar-framework.org/components/notify.html#Basic-Usage

Now, I see following complaints:

Not supporting HTML markup. Yes, because Quasar needs to make your app be protected from Javascript injection.
You probably want HTML markup because you need multiple lines. First, according to Material Guidelines, the notification needs to be short. As short as possible. It’s not a full-blown alert message. Having a notification popping up and covering half of the screen defeats its purpose (and it’s also bad UI). Use a Dialog for these cases. Notifications are a “soft” way to inform user something has happened. Add a button to it for “More Info” if you have to. Or use the details prop, but be short with it.
"I added Notify to quasar.conf.js, but I still need to import it from Quasar". This applies to the usage outside of Vue files. And you need to import it where you use it in this case. How else would you reference the Notify object??? You may ask yourself: but why do I also need to add it to quasar.conf then? You need to understand that Notify is a Quasar Plugin, so it needs to do some initialisation before it can be used. This is why you need it in quasar.conf.js.
this.$q.notify does not work in a Vue file. I still need to import it from Quasar??". Where are you using this.$q.notify? Inside the Vue component definition, or outside of the export default {...}. Notice the usage of this!! It has meaning inside of the Vue component definition or in your vue template, not outside of it. If you need it before export default {...} then yes, you need the “outside of a Vue file” usage, because your scope is not the Vue component scope…

MusicForMellons

Thanks for explanation. Must have messed up something (don’t know what exactly)…, since now it works.

I used to use rgba notation for the background (and have opacity feature this way), it seems not possible to set color using rgba notation with notify, correct (and why not…)?

benoitranque

Notify only supports colors from the quasar color palette

MusicForMellons

I noticed, and I miss rgba dearly.

jeffatpf

I used the HTML property within Alert to bold the important part of the message, ala “Do you really want to delete <b>whatever</b>?”

Nicholas

@rstoenescu thanks for the feedback. But dialog doesn’t support HTML either anymore.
And as mentioned above, I need to use HTML in alerts for emphasis.

rstoenescu

You can always add colors to the palette. http://quasar-framework.org/components/color-palette.html#Adding-Your-Own-Colors

mds1

To echo @jeffatef and @Nicholas, I also used the HTML property for emphasis on certain parts of the message. Although I also found it useful for adding hyperlinks within the notification text (I could add a button for this, but I believe a link would provide a better UI in my case). I understand the concerns about Javascript injection, but are there currently any alternative ways to implement these two capabilities into a notification?

No More Posting New Topics!

0.15 Notify with HTML