@quasar/quasar-ui-qiconpicker
QIconPicker - Quasar component
Last updated 10 months ago by hawkeye64 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @quasar/quasar-ui-qiconpicker 
SYNC missed versions from official npm registry.

QIconPicker

npm npm

QIconPicker is a Quasar component. It gives an Icon Picker for your apps.

QIconPicker

Examples and Documentation

Can be found here

Usage

Quasar CLI project

Install the App Extension.

OR:

Create and register a boot file:

import Vue from 'vue'
import Plugin from 'quasar-ui-qiconpicker'
import '@quasar/quasar-ui-qiconpicker/dist/index.css'

Vue.use(Plugin)

OR:

<style src="@quasar/quasar-ui-qiconpicker/dist/index.css"></style>

<script>
import { QIconPicker } from '@quasar/quasar-ui-qiconpicker'

export default {
  components: {
    QIconPicker
  }
}
</script>

Vue CLI project

import Vue from 'vue'
import Plugin from '@quasar/quasar-ui-qiconpicker'
import '@quasar/quasar-ui-qiconpicker/dist/index.css'

Vue.use(Plugin)

OR:

<style src="@quasar/quasar-ui-qiconpicker/dist/index.css"></style>

<script>
import { QIconPicker } from '@quasar/quasar-ui-qiconpicker'

export default {
  components: {
    QIconPicker
  }
}
</script>

Caching

If you are using a large icon set and find it is taking too long to load, you can pre-cache the UMD variant.

You can do this by adding to your App.vue (or, any other appropriate) file:

<template>
  <div id="q-app">
    <router-view />
  </div>
</template>

<script>
import '@quasar/quasar-ui-qiconpicker/dist/icon-set/eva-icons.umd.js'
import '@quasar/quasar-ui-qiconpicker/dist/icon-set/fontawesome-v5.umd.js'
import '@quasar/quasar-ui-qiconpicker/dist/icon-set/ionicons-v4.umd.js'
import '@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons-outlined.umd.js'
import '@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons-round.umd.js'
import '@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons-sharp.umd.js'
import '@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons.umd.js'
import '@quasar/quasar-ui-qiconpicker/dist/icon-set/mdi-v5.umd.js'
import '@quasar/quasar-ui-qiconpicker/dist/icon-set/themify.umd.js'
export default {
  name: 'App'
}
</script>

<style>
</style>

Don't add them all (unless you have this requirement). Remove the ones from above you won't be needing.

UMD variant

Exports window.QIconPicker.

Add the following tag(s) after the Quasar ones:

<head>
  <!-- AFTER the Quasar stylesheet tags: -->
  <link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/index.min.css" rel="stylesheet" type="text/css">
</head>
<body>
  <!-- at end of body, AFTER Quasar script(s): -->
  <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/index.umd.min.js"></script>
</body>

If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):

<link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/index.rtl.min.css" rel="stylesheet" type="text/css">

For UMD variants only, there is also a caveat:

You must also load the QIconPicker icon set for the icon font(s) that you have loaded:

<script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons.umd.js"></script>

Choices are:

  1. eva-icons.umd.js
  2. fontawesome-v5.umd.js
  3. ionicons-v4.umd.js
  4. material-icons-outlined.umd.js
  5. material-icons-round.umd.js
  6. material-icons-sharp.umd.js
  7. material-icons.umd.js
  8. mdi-v4.umd.js
  9. themify.umd.js
  10. line-awesome.umd.js

UMD Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>UMD test</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/quasar@^1.0.0/dist/quasar.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/index.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="q-app">
      <q-layout view="lHh Lpr fff">
        <q-header class="glossy bg-primary">
          <q-toolbar>
            <q-toolbar-title>
              quasar-ui-qiconpicker <span class="text-subtitle2">v{{ version }}</span>
            </q-toolbar-title>

            <div>Quasar v{{ $q.version }}</div>
          </q-toolbar>
        </q-header>

        <q-page-container>
          <q-page padding>
            <div style="width: 700px;">
              <q-input
                v-model="filter"
                label="Filter"
                outlined
                clearable
                class="q-ma-md">
              </q-input>
              <q-icon-picker
                v-model="value"
                icon-set="material-icons"
                :filter="filter"
                :pagination.sync="pagination"
                style="height: 220px"
              ></q-icon-picker>
            </div>
            <ul class="q-mb-lg">
              <li>In /ui, run: "yarn build"</li>
              <li class="text-red">You need to build & refresh page on each change manually.</li>
              <li>Use self-closing tags only!</li>
              <li>Example: &lt;my-component&gt;&lt;/my-component&gt;</li>
            </ul>
          </q-page>
        </q-page-container>
      </q-layout>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.0/dist/quasar.ie.polyfills.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.0/dist/quasar.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.0/dist/icon-set/material-icons.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/index.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons.umd.js"></script>


    <script>
      new Vue({
        el: '#q-app',

        data: function () {
          return {
            version: QIconPicker.version,
            value: '',
            filter: '',
            pagination: {
              itemsPerPage: 60,
              page: 0
            }
          }
        }
      })
    </script>
  </body>
</html>

Codepen

UMD Example on Codepen

Building the Projects

Setup

In both the ui and ui/dev folders:

$ yarn

Developing

In the ui folder

# start dev in SPA mode
$ yarn dev

# start dev in UMD mode
$ yarn dev:umd

# start dev in SSR mode
$ yarn dev:ssr

# start dev in Cordova iOS mode
$ yarn dev:ios

# start dev in Cordova Android mode
$ yarn dev:android

# start dev in Electron mode
$ yarn dev:electron

Building package

$ yarn build

# build just the JSON API
$ yarn build:api

Donate

If you appreciate the work that went into this, please consider donating to Quasar or Jeff.

License

MIT (c) Jeff Galbraith jeff@quasar.dev

Current Tags

  • 1.2.4                                ...           latest (23 days ago)

23 Versions

  • 1.2.4                                ...           23 days ago
  • 1.2.3                                ...           a month ago
  • 1.2.2                                ...           3 months ago
  • 1.2.1                                ...           3 months ago
  • 1.2.0                                ...           4 months ago
  • 1.1.5                                ...           4 months ago
  • 1.1.4                                ...           6 months ago
  • 1.1.3                                ...           6 months ago
  • 1.1.2                                ...           6 months ago
  • 1.1.1                                ...           8 months ago
  • 1.1.0                                ...           8 months ago
  • 1.0.15                                ...           9 months ago
  • 1.0.14                                ...           9 months ago
  • 1.0.9                                ...           9 months ago
  • 1.0.8                                ...           10 months ago
  • 1.0.7                                ...           10 months ago
  • 1.0.6                                ...           10 months ago
  • 1.0.5                                ...           10 months ago
  • 1.0.4                                ...           a year ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Downloads
Today 0
This Week 1
This Month 4
Last Day 0
Last Week 1
Last Month 42
Dependencies (1)
Dev Dependencies (23)

Copyright 2014 - 2016 © taobao.org |