JSFiddle - React, Tailwind, and code Playground

by ph822720355

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
<div id="q-app">
  <div class="flex flex-center" style="height: 100vh;">
    <div class="q-pa-md q-gutter-y-sm column items-center">
      <div>
        <div class="row q-gutter-sm">
          <q-btn round size="sm" color="secondary" @click="showNotif('top-left')">
            <q-icon name="arrow_back" class="rotate-45" ></q-icon>
          </q-btn>
          <q-btn round size="sm" color="accent" @click="showNotif('top')">
            <q-icon name="arrow_upward" ></q-icon>
          </q-btn>
          <q-btn round size="sm" color="secondary" @click="showNotif('top-right')">
            <q-icon name="arrow_upward" class="rotate-45" ></q-icon>
          </q-btn>
        </div>
      </div>
  
      <div>
        <div class="row q-gutter-sm">
          <div>
            <q-btn round size="sm" color="accent" @click="showNotif('left')">
              <q-icon name="arrow_back" ></q-icon>
            </q-btn>
          </div>
          <div>
            <q-btn round size="sm" color="accent" @click="showNotif('center')">
              <q-icon name="fullscreen_exit" ></q-icon>
            </q-btn>
          </div>
          <div>
            <q-btn round size="sm" color="accent" @click="showNotif('right')">
              <q-icon name="arrow_forward" ></q-icon>
            </q-btn>
          </div>
        </div>
      </div>
  
      <div>
        <div class="row q-gutter-sm">
          <div>
            <q-btn round size="sm" color="secondary" @click="showNotif('bottom-left')">
              <q-icon name="arrow_forward" class="rotate-135" ></q-icon>
            </q-btn>
          </div>
          <div>
            <q-btn round size="sm" color="accent" @click="showNotif('bottom')">
              <q-icon name="arrow_downward" ></q-icon>
            </q-btn>
          </div>
          <div>
            <q-btn...

JavaScript

const alerts = [
  { color: 'negative', message: 'Woah! Danger! You are getting good at this!', icon: 'report_problem' },
  { message: 'You need to know about this!', icon: 'warning' },
  { message: 'Wow! Nice job!', icon: 'thumb_up' },
  { color: 'teal', message: 'Quasar is cool! Right?', icon: 'tag_faces' },
  { color: 'purple', message: 'Jim just pinged you', avatar: 'https://cdn.quasar-framework.org/img/boy-avatar.png' },
  { multiLine: true, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quisquam non ad sit assumenda consequuntur esse inventore officia. Corrupti reiciendis impedit vel, fugit odit quisquam quae porro exercitationem eveniet quasi.' }
]

new Vue({
  el: '#q-app',
  data() {
     return {
       dismissNoti: null
     }
  },
  methods: {
    showNotif (position) {
      const { color, textColor, multiLine, icon, message, avatar } = alerts[ Math.floor(Math.random(alerts.length) * 10) % alerts.length ]
      const random = Math.random() * 100

      const twoActions = random > 70
      const buttonColor = color ? 'white' : void 0

//       show only one notification on the screen at a time.
// keep a reference and call dismissNoti() if reference is present
       if (this.dismissNoti) {
          this.dismissNoti();
        }
        this.dismissNoti = this.$q.notify({
        color,
        textColor,
        icon: random > 30 ? icon : null,
        message,
        position,
        avatar,
        multiLine,
        actions: twoActions
          ? [
            { label: 'Reply', color: buttonColor, handler: () => console.log('wooow') },
            { label: 'Dismiss', color: 'yellow', handler: () => console.log('wooow') }
          ]
          : (random > 40
            ? [ { label: 'Reply', color: buttonColor, handler: () => console.log('wooow') } ]
            : null
          ),
        timeout: Math.random() * 5000 + 3000
      })
    }
  }
})