... ステータス（α版）

（機能追加後に随時更新していこうと思っています！が一旦Launchします！）

背景

チェックボックスやラジオボタンを手軽に（おしゃれに）組み込めないか考えた時に、

以下の選択肢に遭遇しました。

iCheck.js
- → Jquery依存だったりする
CSSでおしゃれに自作 https://deshinon.com/2019/03/02/sugoi-checkbox-animation/
- → コピペといえど大変..

（他にもっと簡単な方法があれば教えて下さい....orz）

fontawesomeはアイコン組み込むのになにかと使用されている方が多いのではと思います。

ちょうど、free版にもチェックボックスのアイコンも存在するので組み合わせて使ってお手軽に実装と行こうではないかと考え立ちました。

ちなみに、checkboxの疑似要素(before)を使ってCSSのみでfontawesomeを組み込む方法も紹介されていたのですが、アイコンサイズとラベルのサイズを調整するのが面倒だったりします。

なので、「jQueryにも依存しない、fontawesomeを手軽に組み込めるJSライブラリー」が欲しいということで作成に至りました！

名前は、awesome = イケてるに対して、 wonderful = 素晴らしいという発想からの、イメージは犬! =3

レポジトリ

こちらに公開しました！
wonderful.js　｜ DOC

使い方

1. fontawesomeを使用する準備をしてください

以下のような形でfontawesomeをimport

  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
  integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI="
  crossorigin="anonymous"/>

2. レポジトリからwonderful.js をダウンロードして、アプリにimportしてください

（bodyタグの最下部が望ましいです）

<script type="text/javascript" src="wonderful.js"></script>

以上！

デフォルト設定だけで以下のようなデザインに仕上がります

ちょっと貧相ですが、使いたいアイコン、色に変更可能です！

設定（Configuration）

Checkbox

設定	デフォルト	説明
targetClass	undefined	カスタマイズしたい要素に付与するクラス名を指定する
isStack	false	アイコンを重ねて表示したい場合に`true`を設定する
bfFontClass	far fa-square (if:isStack = true then far 'fa-square')	アイコンのクラスを設定
bfFontClassStacked	far fa-square fa-stack-1x	重ねて表示するアイコンのクラスを設定
bfColor	black	アイコンの色を設定
bfColorStacked	black	重ねて表示するアイコンの色を設定
bfSize	1.5rem	アイコンのサイズを設定
bfSizeStacked	1.5rem	重ねて表示するアイコンのサイズを設定
bfMarginRight	8px	ラベルとの距離を調整するために設定
afFontClass	far fa-square (if:isStack = true then far 'fa-square')	アイコンのクラスを設定
afFontClassStacked	far fa-square fa-stack-1x	重ねて表示するアイコンのクラスを設定
afColor	black	アイコンの色を設定
afColorStacked	black	重ねて表示するアイコンの色を設定
afSize	1.5rem	アイコンのサイズを設定
afSizeStacked	1.5rem	重ねて表示するアイコンのサイズを設定
afMarginRight	8px	ラベルとの距離を調整するために設定
labelSize	1rem	ラベルの文字サイズを設定

※bf*,af* はcheck前後の設定を表しています。

Other Sample

TBI（今後の展開）

Webpackでjavascriptの環境作ってんですが、Typescript化したい
Checkboxやinputboxにも対応させる
使いやすいようにリファクタリングする