Notify close button



  • Hi,

    Is it possible to add a closing button in the top corner in Notify?

    080ddde4-07c9-4613-89a4-4b1501f098e2-image.png

    Thank you.



  • You can use and modify the ‘html’ message.

    https://quasar.dev/quasar-plugins/notify#Example--Unsafe-HTML-message



  • This is what I’ve done, let me know if that can be done better. For example grouping doesn’t work with this, I’m not sure why:

    import Vue from "vue";
    import { Platform } from "quasar";
    import { Notify } from "quasar";
    import { uid } from "quasar";
    
    const notification = (msg = "", type = "info") => {
      // id for the notification message so it can be dismissed if user clicks the button
      const alert_uid = uid();
      if (!window.dismiss) window.dismiss = [];
      // add a close button to the notification
      msg += `
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <button style="position:absolute;top:-4px;right:-13px;background-color: inherit;
      border: none;
      border-radius: 50%;
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      cursor: pointer;
      height:18px;width:18px;
      outline:none;
      "
      onclick="window.dismiss['${alert_uid}']();
      delete window.dismiss['${alert_uid}'];
      "
      >
      <svg style="width:18px;height:18px" viewBox="0 0 24 24">
        <path fill = "${
          type === "info" ? "black" : "white"
        }" d = "M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" />
    </svg >
    </button>`;
    
      // create dismissable notification
      const dismiss = Notify.create({
        progress: true,
        message: msg,
        textColor: type === "info" ? "black" : "white",
        multiLine: true,
        type: type,
        html: true,
        position: Platform.is.mobile ? "top" : "bottom-right",
      });
    
      // store dismissable notification in the global array
      window.dismiss[alert_uid] = dismiss;
    };
    
    export default ({ Vue }) => {
      Vue.prototype.$notification = notification;
    };
    

Log in to reply