装飾されたキレイなチェックボックスコンポーネント「pretty-checkbox-vue」

装飾されたキレイなチェックボックスコンポーネント「pretty-checkbox-vue」

pretty-checkbox-vueとは

pretty-checkbox-vueは、キレイな装飾をしたチェックボックスコンポーネントです。

3つの形式のチェックやアイコン装飾、クリックアニメーションを設定することが可能です。

 

装飾されたキレイなチェックボックスコンポーネント「pretty-checkbox-vue」

 

環境

Vue 2.6.10
pretty-checkbox 3.0

 

インストール

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

npm

npm i --save pretty-checkbox-vue

yarn

yarn add pretty-checkbox-vue

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox-vue.min.js"></script>

 

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

https://github.com/hamed-ehtesham/pretty-checkbox-vue

 

導入手順

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

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

@import '~pretty-checkbox/src/pretty-checkbox.scss';
import PrettyCheckbox from 'pretty-checkbox-vue';

(2)CDNの場合

なし

2.メソッドを設定

PrettyCheckboxVue.useに取り込みます。

Vue.use(PrettyCheckbox);
new Vue({
  el: '#app'
});

3. テンプレートを準備

<p-check> を設置します。

デフォルトでは、正方形になります。
変更するには、クラスp-curveまたはp-roundを追加します。

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

<div id="app">
  <p-check class="p-default">Default</p-check>
  <p-check class="p-default p-fill">Fill</p-check>
  <p-check class="p-default p-thick">Thick</p-check>
  <p-check class="p-default p-curve">Curve</p-check>
  <p-check class="p-default p-round">Round</p-check>
</div>

 

サンプル

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

 

Switch

Classに p-switchを追加します。
p-outlinep-fill、またはp-slimを追加します

<p-check class="p-switch">Default</p-check>
<p-check class="p-switch p-fill">Fill</p-check>
<p-check class="p-switch p-slim">Thick</p-check>

Colors

5色あります。

colorプロパティにprimarysuccessinfowarningdanger を設定します。

<p-check class="p-default" color="primary">Primary</p-check>
<p-check class="p-default" color="success">Success</p-check>
<p-check class="p-default" color="info">Info</p-check>
<p-check class="p-default" color="warning">Warning</p-check>
<p-check class="p-default" color="danger">Danger</p-check>

Font icons

フォントアイコンを追加して、基本的なチェックボックススタイルを置き換えることができます。

例えば以下のマテリアアイコンを使用します。

<link rel="stylesheet" href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css">

<p-check class="p-icon p-round">
  <i class="icon mdi mdi-check" slot="extra"></i>
  Pay Bills
</p-check>
<p-check class="p-icon p-curve">
  <i class="icon mdi mdi-close" slot="extra"></i>
  Fuel refill
</p-check>
<p-check class="p-icon">
  <i class="icon mdi mdi-close-outline" slot="extra"></i>
  Buy groceries
</p-check>

Animations

アニメーション化するには、classp-smoothまたはp-jellyまたはp-tadaまたはp-rotateまたはp-pulseを追加します。

[注意]
p-smooth
以外のアニメーションは、p-default では動作しません。

<p-check class="p-icon p-curve p-smooth">
  <i slot="extra" class="icon mdi mdi-check"></i>
  Smooth
</p-check>
<p-check class="p-icon p-curve p-jelly" color="primary">
  <i slot="extra" class="icon mdi mdi-check"></i>
  Jelly
</p-check>
<p-check class="p-icon p-curve p-tada"  color="primary">
  <i slot="extra" class="icon mdi mdi-check"></i>
  Tada
</p-check>  
<p-check class="p-icon p-rotate" color="success">
  <i slot="extra" class="icon mdi mdi-check"></i>
  Rotate
</p-check>
<p-check class="p-icon p-pulse" color="success">
  <i slot="extra" class="icon mdi mdi-check"></i>
  Pulse
</p-check>

 

さいごに

キレイな装飾をしたチェックボックスコンポーネントライブラリでした。

記事を書いてて気がついたのですが、このライブラリはラジオの機能もあるんですねー。
スイッチが付いて時点で気がつけよと。
あとで追記します。

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

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

-Form, UI Utilities, vue.js, ライブラリ
-, , , , ,