Icons UI Components vue.js ライブラリ

Vue.jsでFontAwesomePickerを実装する「vfa-picker」

Vue.jsでFontAwesomePickerを実装する「vfa-picker」

vfa-pickerとは

vfa-pickerは、Vue.jsを使ってFontAwesomeのClass nameを取得できるPickerコンポーネントライブラリです。

 

【動画サイズ:233KB】

 

環境

Vue 2.6.10
vfa-picker 5.9.1

インストール

以下のnpmyarnCDNを使ってインストールします。

npm

npm install vfa-picker

yarn

yarn add vfa-picker

CDN

<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vfa-picker.umd.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/zolamk/vue-fontawesome-picker

 

導入手順

1. ライブラリの取り込み

(1)ES6等の場合 [注意]モジュール版は未検証です。

import VueFontAwesomePicker from "vfa-picker";

(2)UMDの場合

const VueFontAwesomePicker = window['vfa-picker'].default;

2.メソッドを設定

上記で取得したVueFontAwesomePickerを Vue.use に取り込みます。

Vue.use(VueFontAwesomePicker);
new Vue({
  el: '#app', 
  data: {
    v: undefined
  }
});
 

3. テンプレートを準備

<vfa-picker> を設置する。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <vfa-picker v-model="v">
    <template v-slot:activator="{ on }">
      <input v-model="v" @click="on" placeholder="Icon Class" type="text" />
    </template>
  </vfa-picker>
</div>

サンプル

>>専用ページで確認する

 

さいごに

Vue.jsを使ってFontAwesomeのClass nameを取得できるPickerコンポーネントライブラリでした。

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Icons, UI Components, vue.js, ライブラリ
-, ,