第二十六天：UI切版 & 元件-圖文資訊元件、ICON字型 & SVG、通知訊息元件

第 12 屆 iThome 鐵人賽

DAY 26

Modern Web

Quasar CLI Framework 邪教：整合分散的前端技術和工具、常見的開發需求系列第 26 篇

12th鐵人賽

通靈亡

2020-10-11 19:24:55

2118 瀏覽

分享至

今天的內容

一、圖文資訊元件
二、ICON: Webfont & SVG
三、通知訊息元件
四、總結

一、圖文資訊元件

(一) QImg

QImg比起HTML的 img，可以很方便的處理額外的特殊需求
包括Responsive、Transition、Caption

此元件是以Background來呈現，可以設定Background-size是cover還是contain
contain會強制維持原比例寬高，cover則是依照設定的寬或高，超出的部分則會裁切掉。

The QImg component makes working with images (any picture format) easy and also adds a nice loading effect to it along with many other features (example: the ability to set an aspect ratio).
https://quasar.dev/vue-components/img

程式碼示意：

<template>
  <div class="q-pa-sm row q-col-gutter-sm">
    <div class="col-3">
      <q-img src="https://cdn.quasar.dev/img/parallax2.jpg" height="200px">
        <div class="absolute-bottom text-h5 text-center">
            height="200px"
            Default: cover
          </div>
      </q-img>
    </div>
    <div class="col-3">
      <q-img src="https://cdn.quasar.dev/img/parallax2.jpg" height="200px" :contain="true">
        <div class="absolute-bottom text-h5 text-center">
            height="200px"
            contain="true"
         </div>
      </q-img>
    </div>
    <div class="col-3">
      <q-img src="https://cdn.quasar.dev/img/parallax2.jpg" img-class="my-custom-image">
        <div class="absolute-full text-h5 flex flex-center">
          img-class="my-custom-image"
        </div>
      </q-img>
    </div>
    <div class="col-3">
      <q-img src="https://cdn.quasar.dev/img/parallax2.jpg" transition="scale">
        <div class="absolute-full text-h5 flex flex-center">
          transition="scale"
        </div>
      </q-img>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<style lang="scss" scoped>
.my-custom-image {
  filter: blur(1px) sepia()
}
</style>

(二) QParallax

此元件可呈現圖片或影片捲動時的視差效果

Parallax scrolling is a technique in computer graphics and web design, where background images move by the camera slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion.
https://quasar.dev/vue-components/parallax#QParallax-API

程式碼示意：

<div class="q-pa-md">
    <div style="height: 100px;"></div>
    <q-parallax>
      <template v-slot:media>
        <img src="https://cdn.quasar.dev/img/parallax2.jpg">
      </template>

      <template v-slot:content="scope">
        <div
          class="absolute column items-center"
          :style="{
            opacity: 0.45 + (1 - scope.percentScrolled) * 0.55,
            top: (scope.percentScrolled * 60) + '%',
            left: 0,
            right: 0
          }"
        >
          <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg" style="width: 150px; height: 150px">
          <div class="text-h3 text-white text-center">Quasar Framework</div>
          <div class="text-h6 text-grey-3 text-center">
            v{{ $q.version }}
          </div>
        </div>
      </template>
    </q-parallax>
    <div style="height: 100px;"></div>
</div>

(三) QAvatar

將文字、圖片、icon裁切成圓形、圓角矩形或方形

The QAvatar component creates a scalable, color-able element that can have text, icon or image within its shape.
https://quasar.dev/vue-components/avatar

程式碼示意：

<div class="q-pa-sm">
    <q-item class="bg-yellow-7" clickable v-ripple>
      <q-item-section side>
        <q-avatar size="48px">
          <img src="https://cdn.quasar.dev/img/avatar.png" />
          <q-badge floating color="teal">new</q-badge>
        </q-avatar>
      </q-item-section>
      <q-item-section>
        <q-item-label>Mary</q-item-label>
        <q-item-label caption>2 new messages</q-item-label>
      </q-item-section>
      <q-item-section side>
        3 min ago
      </q-item-section>
    </q-item>
</div>

二、ICON: Webfont & SVG

(一) 在Quasar當中的使用方式

1.大多元件的icon屬性

以QBtn為例：

<q-btn unelevated icon="settings" label="settings" color="blue"></q-btn>

2.使用QIcon元件

The QIcon component allows you to easily insert icons within other components or any other area of your pages.
https://quasar.dev/vue-components/icon#Custom-mapping

<q-btn unelevated color="blue">
      <q-icon class="q-mr-sm" name="settings"></q-icon>
      <div>settings</div>
</q-btn>

(二) 加入Webfont icons

可以在quasar.config.js > extras: [] 設定你需要的Icon Font Library

(三) 加入自訂的SVG圖檔

除了Webfont icons，也可以使用自訂的SVG檔
以下是兩種方便修改大小與顏色的SVG使用方式

1. svguse
(1)在public底下新增一個svg資料夾，把svg檔案放在裡面

(2)在svg檔案，給予<svg>一個id，並確定沒有設定任何長度與寬度

(3)在元件的icon屬性，或者QIcon的name，使用svguse，指定SVG的public路徑與id
icon="svguse:path#id"

<template>
  <q-page class="flex flex-center q-gutter-md">
    <q-icon v-html="customIcon.machine" color="green" size="128px" />
    <q-btn color="black" label="black" size="28px" text-color="yellow" icon="svguse:svg/slot-machine.svg#svg"></q-btn>
  </q-page>
</template>

<script>
export default {
  name: 'PageIndex',

  data () {
    return {
    }
  },
  mounted () {
  }
}
</script>

2.SVG + v-html
(1)在src底下新增一個svg資料夾，接著在svg資料夾新增svg.js
(2)把svg的內容export出去

export default {
  machine: '<svg height="480pt" viewBox="0 0 480 480" width="480pt" xmlns="http://www.w3.org/2000/svg"><path d="m136 144c0-4.417969-3.582031-8-8-8h-32c-4.417969 0-8 3.582031-8 8v41.136719c-15.601562 4.027343-25.777344 19.03125-23.746094 35.015625s15.632813 27.96875 31.746094 27.96875 29.714844-11.984375 31.746094-27.96875-8.144532-30.988282-23.746094-35.015625v-9.136719c17.664062-.019531 31.980469-14.335938 32-32zm-18.148438 8c-2.855468 4.949219-8.136718 8-13.851562 8v-8zm-5.851562 64c0 8.835938-7.164062 16-16 16s-16-7.164062-16-16 7.164062-16 16-16c8.832031.011719 15.988281 7.167969 16 16zm0 0"/><path d="m248 144c0-4.417969-3.582031-8-8-8h-32c-4.417969 0-8 3.582031-8 8v41.136719c-15.601562 4.027343-25.777344 19.03125-23.746094 35.015625s15.632813 27.96875 31.746094 27.96875 29.714844-11.984375 31.746094-27.96875-8.144532-30.988282-23.746094-35.015625v-9.136719c17.664062-.019531 31.980469-14.335938 32-32zm-18.148438 8c-2.855468 4.949219-8.136718 8-13.851562 8v-8zm-5.851562 64c0 8.835938-7.164062 16-16 16s-16-7.164062-16-16 7.164062-16 16-16c8.832031.011719 15.988281 7.167969 16 16zm0 0"/><path d="m376 104h-336c-4.417969 0-8 3.582031-8 8v160c0 4.417969 3.582031 8 8 8h336c4.417969 0 8-3.582031 8-8v-160c0-4.417969-3.582031-8-8-8zm-328 16h96v144h-96zm112 0h96v144h-96zm208 144h-96v-144h96zm0 0"/><path d="m320 248c16.101562.035156 29.710938-11.925781 31.746094-27.902344 2.03125-15.972656-8.148438-30.960937-23.746094-34.960937v-9.136719c17.664062-.019531 31.980469-14.335938 32-32 0-4.417969-3.582031-8-8-8h-32c-4.417969 0-8 3.582031-8 8v41.136719c-15.597656 4-25.777344 18.988281-23.746094 34.960937 2.035156 15.976563 15.644532 27.9375 31.746094 27.902344zm21.851562-96c-2.855468 4.949219-8.136718 8-13.851562 8v-8zm-21.851562 48c8.835938 0 16 7.164062 16 16s-7.164062 16-16 16-16-7.164062-16-16c.011719-8.832031 7.167969-15.988281 16-16zm0 0"/><path d="m472 120h-56v-64c0-4.417969-3.582031-8-8-8h-40v-40c0-4.417969-3.582031-8-8-8h-304c-4.417969 0-8 3.582031-8 8v40h-40c-4.417969 0-8 3.582031-8 8v416c0 4.417969 3.582031 8 8 8h456c4.417969 0 8-3.582031 8-8v-64c0-4.417969-3.582031-8-8-8h-16v-24c0-4.417969-3.582031-8-8-8h-24v-184h24v113.136719c-15.601562 4.027343-25.777344 19.03125-23.746094 35.015625s15.632813 27.96875 31.746094 27.96875 29.714844-11.984375 31.746094-27.96875-8.144532-30.988282-23.746094-35.015625v-113.136719h16c4.417969 0 8-3.582031 8-8v-48c0-4.417969-3.582031-8-8-8zm-8 208c0 8.835938-7.164062 16-16 16s-16-7.164062-16-16 7.164062-16 16-16c8.832031.011719 15.988281 7.167969 16 16zm-400-312h288v48h-288zm8 448v-32h272v32zm208-48h-32v-16h8c4.417969 0 8-3.582031 8-8v-32c0-4.417969-3.582031-8-8-8h-80c-4.417969 0-8 3.582031-8 8v24h-8c-4.417969 0-8 3.582031-8 8v24h-16v-88h144zm-96-32v-16h64v16zm48 16v16h-64v-16zm224 64h-64v-16h64zm0-32h-64v-16h64zm-24-32h-64v-16h64zm-72-32c-4.417969 0-8 3.582031-8 8v32c0 4.417969 3.582031 8 8 8h16v48h-16v-40c0-4.417969-3.582031-8-8-8h-56v-96c0-4.417969-3.582031-8-8-8h-160c-4.417969 0-8 3.582031-8 8v96h-56c-4.417969 0-8 3.582031-8 8v40h-40v-400h32v8c0 4.417969 3.582031 8 8 8h304c4.417969 0 8-3.582031 8-8v-8h32v304zm104-200h-48v-32h48zm0 0"/><path d="m80 312c-4.417969 0-8 3.582031-8 8v64c0 4.417969 3.582031 8 8 8s8-3.582031 8-8v-64c0-4.417969-3.582031-8-8-8zm0 0"/><path d="m40 368h16v16h-16zm0 0"/><path d="m40 336h16v16h-16zm0 0"/></svg>'
}

(3) import 到 vue 裡面的data，塞到QIcon的v-html

<template>
  <q-page class="flex flex-center">
    <q-icon v-html="customIcon.machine" color="green" size="128px" />
  </q-page>
</template>

<script>
import customIcon from '../svg/svg.js'

export default {
  name: 'PageIndex',

  data () {
    return {
      customIcon: customIcon
    }
  },
  mounted () {
  }
}
</script>

三、通知訊息元件

(一) QBadge

常用於通知類的資訊顯示

The QBadge component allows you to create a small badge for adding information like contextual data that needs to stand out and get noticed. It is also often useful in combination with other elements like a user avatar to show a number of new messages.
https://quasar.dev/vue-components/badge

程式碼示意：

<template>
  <div class="q-pa-sm">
    <q-btn dense color="purple" round icon="email" class="q-ml-md" size="24px">
      <q-badge class="badge" color="red" floating>4</q-badge>
    </q-btn>
  </div>
</template>

<style lang="scss" scoped>
.badge {
  padding: 8px;
  font-size: 20px;
}
</style>

(二) QBanner

告知使用者某項狀態資訊，以及可執行的動作

The QBanner component creates a banner element to display a prominent message and related optional actions.
https://quasar.dev/vue-components/banner

程式碼示意：

<div class=" q-pa-sm q-gutter-sm">
    <q-banner class="text-white bg-red">
    <template v-slot:avatar>
        <q-icon name="signal_wifi_off" color="white"> </q-icon>
     </template>
      You have lost connection to the internet. This app is offline.
      <template v-slot:action>
        <q-btn flat color="white" label="Turn ON Wifi"></q-btn>
        <q-btn flat color="white" label="Turn ON Wifi" > </q-btn>
      </template>
    </q-banner>
    <q-banner class="text-white bg-blue-8">
    <template v-slot:avatar>
        <q-icon name="signal_wifi_off" color="white"> </q-icon>
     </template>
      You have lost connection to the internet. This app is offline.
    </q-banner>
</div>

(三) Notify Plugin

常用於告知使用者，做完某個操作後的結果狀態

Notify is a Quasar plugin that can display animated messages (floating above everything in your pages) to users in the form of a notification. They are useful for alerting the user of an event and can even engage the user through actions. Also known as a toast or snackbar.
https://quasar.dev/quasar-plugins/notify

1. 前置作業
必須先在quasar.config.js 檔案底下的 Frameworks > plugins，設定 'notify'
Notify的全域設定可以寫在 Frameworks > config > notify: {}

return {
  framework: {
    plugins: [
      'Notify'
    ],
    config: {
      notify: { 
          position: 'top',
          timeout: 3000,
      }
    }
  }
}

2. 使用方式

// outside of a Vue file
import { Notify } from 'quasar'

Notify.create('Danger, Will Robinson! Danger!')
// or with a config object:
Notify.create({
  message: 'Danger, Will Robinson! Danger!'
})

// inside of a Vue file
this.$q.notify('Message')
// or with a config object:
this.$q.notify({...})

3. 通知類型
透過type參數設定

程式碼示意：

<template>
  <div class="q-pa-md">
    <div class="row q-gutter-sm">
      <q-btn no-caps unelevated color="positive" @click="triggerPositive" label="Trigger 'positive'" />
      <q-btn no-caps unelevated color="negative" @click="triggerNegative" label="Trigger 'negative'" />
      <q-btn no-caps unelevated color="warning" text-color="dark" @click="triggerWarning" label="Trigger 'warning'" />
      <q-btn no-caps unelevated color="info" @click="triggerInfo" label="Trigger 'info'" />
      <q-btn no-caps unelevated color="grey-8" @click="triggerOngoing" label="Trigger 'ongoing' (v1.14+)" />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    triggerPositive () {
      this.$q.notify({
        type: 'positive',
        message: `This is a "positive" type notification.`
      })
    },
    triggerNegative () {
      this.$q.notify({
        type: 'negative',
        message: `This is a "negative" type notification.`
      })
    },
    triggerWarning () {
      this.$q.notify({
        type: 'warning',
        message: `This is a "warning" type notification.`
      })
    },
    triggerInfo () {
      this.$q.notify({
        type: 'info',
        message: `This is a "info" type notification.`
      })
    },
    triggerOngoing () {
      // we need to get the notification reference
      // otherwise it will never get dismissed ('ongoing' type has timeout 0)
      const notif = this.$q.notify({
        type: 'ongoing',
        message: 'Looking up the search terms...'
      })
      // simulate delay
      setTimeout(() => {
        notif({
          type: 'positive',
          message: 'Found the results that you were looking for',
          timeout: 1000
        })
      }, 4000)
    }
  }
}
</script>

4. 方向
透過position參數設定

程式碼示意：

<template>
  <div class="q-pa-md">
    <div class="row q-gutter-sm">
      <q-btn no-caps unelevated color="positive" @click="triggerPositive" label="Trigger 'positive'" />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    triggerPositive () {
      this.$q.notify({
        type: 'positive',
        position: 'top',
        message: `This is a "positive" type notification.`
      })
    }
  }
}
</script>

5. 自訂類型
使用registerType自訂一個預設的類型
在呼叫時，可以直接傳入參數覆寫該類型的預設樣式

程式碼示意：

<template>
  <div class="q-pa-md">
    <div class="row q-gutter-sm">
      <q-btn no-caps color="primary" @click="triggerCustomRegisteredType" label="Custom Notify"></q-btn>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    triggerCustomRegisteredType () {
      // this one overrides some of the original
      // options of the "my-notif" registered type
      this.$q.notify({
        type: 'my-notif',
        position: 'top',
        icon: 'contactless',
        message: `This notification is using a custom type.`,
        caption: `It overrides the type's default icon and color.`,
        color: 'primary'
      })
    }
  },

  created () {
    /**
     * The reason we have this here
     * is that the type needs to be
     * registered before using it.
     *
     * The best place would be a boot file instead
     * of a .vue file, otherwise it'll keep on
     * registering it every time your component
     * gets to be used :)
     */

    this.$q.notify.registerType('my-notif', {
      icon: 'announcement',
      progress: false,
      color: 'brown',
      textColor: 'white',
      classes: 'glossy'
    })
  }
}
</script>