Notify close button

[sebag]

Hi,

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

Thank you.

[dobbel]

You can use and modify the ‘html’ message.

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

[sebag]

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;
};

[pd76]

@sebag well, late to the party, but you could do something like…

          actions: [
            {
              icon: 'close',
              color: 'white',
              handler: () => {},
            },
          ],

and your css could be…

.q-notification__actions .q-btn__wrapper.col.row.q-anchor--skip {
  padding: 0px !important;
  font-size: 8px !important;
}

.q-notification__actions .q-btn__wrapper.col.row.q-anchor--skip i {
  position: absolute;
  top: -10px;
  font-weight: bold;
}