Tailwind CSSでスイッチ(トグル)ボタン作ってみた
どうもSadoです。
最近はTailwind CSSを使用していて、とても快適だなと感じておりましてその流れで今回はよく使用されるであろうON・OFF切り替えできるスイッチボタンを生のCSSを使わずにTaliwind CSSのみで作成してみました！
やること
CSSを使わずに、Tailwindで用意されている「peer」という兄弟の状態に基づいて要素のスタイルを設定できるものを使用します。
なお今回はVue.jsファイルを用いて進めたいと思います。
Tailwind CSS – peer- {modifier}について
準備
- Tailwindの環境をご準備下さい。
Tailwindのインストール
※Tailwindのバージョンは3.0以降を使用。 - 適当なVueファイルを準備。
※Vue.jsのバージョンは3.2を使用。
<template>
<label>
<input type="checkbox" id="checkbox"/>
</label>
</template>チェックボックスのみが表示されている状態
実際にやってみる
早速スイッチボタンをTailwindを用いて作成していきます。
ON・OFFを判別するための変数を作成
スイッチボタンを押したときに、ON・OFFのフラグを変数で準備します。
Vue3では、変数をリアクティブな状態にするためにrefを使用します。
<template>
<label>
<input class="m-5" v-model="isCheck" type="checkbox"/>
{{ isCheck }}
</label>
</template>
<script setup lang="ts">
import { ref } from "vue";
const isCheck = ref(false);
</script>ON・OFFで変数の値（true・false）が切り替わっていることを確認。
Tailwindでスイッチボタンのデザインを作成
Tailwindの「peer」を使って、兄弟要素の状態がchecked（チェックされたとき）にデザインが切り替わるようにクラスを指定します。
- 「sr-only」ではinputを視覚的に非表示にするクラスがTailwindで用意されております。
- 「after」では、疑似要素を用いて、ボタンの切り替えに使用する球体を作成しています。
- 「peer」をinput(兄要素)に設定してspan(弟要素)に「peer-checked」を指定することで、チェック(ON)されたときに疑似要素のafterに対して色を変えたり、丸い球体の位置をずらしたりしています。
<template>
<label>
<input
v-model="isCheck"
type="checkbox"
class="peer sr-only"
/>
<span
class="block w-[2em] cursor-pointer bg-gray-500 rounded-full
p-[1px] after:block after:h-[1em] after:w-[1em] after:rounded-full
after:bg-white after:transition peer-checked:bg-blue-500
peer-checked:after:translate-x-[calc(100%-2px)]"
>
</span>
{{ isCheck }}
</label>
</template>
<script setup lang="ts">
import { ref } from "vue";
const isCheck = ref(false);
</script>
