vuetify3-dialog icon indicating copy to clipboard operation
vuetify3-dialog copied to clipboard

How to use HTML text

Open baedorf opened this issue 9 months ago • 6 comments

It's great to have a library able to open vuetify dialogs in js scripts. I wonder if it is possible and how to render HTML.

baedorf avatar May 06 '24 09:05 baedorf

Hello, I don't really understand what you're want exactly, can you provide an example of what you would want ?

ThomasLeconte avatar May 07 '24 12:05 ThomasLeconte

I'd like to use html formated text

Do you really want to set next state of tailoring?<br/>After setting to next state neither requirements can be changed nor tailoring be deleted!<br/><br/>In case you need to downstate call your administrator

usinig vuei18n in

confirmDialog({
        title: "Warning",
        text: t("tailoring_state.text"),
        cancelText: t("no"),
        confirmationText: t("yes"),
        icon: mdiAlertCircleOutline
    }).
    icon: mdiAlertCircleOutline,
})

to see text formated as

Do you really want to set next state of tailoring?
After setting to next state neither requirements can be changed nor tailoring be deleted!

In case you need to downstate call your administrator

baedorf avatar May 08 '24 04:05 baedorf

I like your work vuetify3-dialog. So simple usage and best efforts. As @baedorf mentioned, it would be nice that html-formatted string text can be rendered in dialogs.

As example for snackbar:

https://github.com/ThomasLeconte/vuetify3-dialog/blob/8f6d54a75a462e9558fa1f423befcef6cfd1ec55/src/components/Snackbar.vue#L49

could be written in

<span v-html="text" />

babsey avatar Jun 14 '24 09:06 babsey

Adding a Pull Request (PR) to support this feature.

Instead of displaying all content as HTML, adding a flag to indicate whether it should be enabled is preferable.

ramseyfeng avatar Sep 12 '24 08:09 ramseyfeng

@baedorf @babsey you can display HTML content in 1.5.3 in the following way:

this.$notify.create({
        text: "Hello world!",
        htmlContent: `<a href="#">hello</a>`,
        notifyOptions: {
          timeout: 3000,
          location: 'top right'
        }
      })

ramseyfeng avatar Sep 21 '24 11:09 ramseyfeng

Great! It works well. Many Thanks! :+1:

babsey avatar Sep 22 '24 09:09 babsey