實作 Short Toggle

Short Toggle 可簡單設定 true 與 false，但必須搭配 JavaScript 維護 State 並動態改變 Utility。

Version

Vue 3.0.5
Tailwind CSS 2.1.0

Short Toggle

short000

功能與 Simple Toggle 一樣，但中間橢圓形部分較小，且圓形有 shadow。

<template>
  <button @click='onClick' type="button" class="flex-shrink-0 group relative rounded-full inline-flex items-center justify-center h-5 w-10 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" aria-pressed="false">
    <span class="sr-only">Use setting</span>
    <span class="pointer-events-none absolute bg-white w-full h-full rounded-md" aria-hidden="true"/>
    <span :class="isOn ? 'bg-indigo-600' : 'bg-gray-200'" class="pointer-events-none absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200" aria-hidden="true"/>
    <span :class="isOn ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform ring-0 transition-transform ease-in-out duration-200" aria-hidden="true"/>
  </button>
</template>

<script setup>
ref: isOn = true

let onClick = () => isOn = !isOn
</script>

第 2 行

<button @click="onClick">

外層 <button> 需攔截 click event 維護 state。

第 5 行

<span :class="isOn ? 'bg-indigo-600' : 'bg-gray-200'"/>

當 isOn 為 true 時使用 bg-indigo-600，否則使用 bg-gray-200。

第 6 行

<span :class="isOn ? 'translate-x-5' : 'translate-x-0'"/>

當 isOn 為 true 時使用 translate-x-5，否則使用 translate-x-0。

11 行

ref: isOn = true

定義 isOn state 的初始值為 true。

13 行

let onClick = () => isOn = !isOn

onClick() 會對 isOn state 做 toggle。

Function Pipeline

<template>
  <button @click='onClick' type="button" class="flex-shrink-0 group relative rounded-full inline-flex items-center justify-center h-5 w-10 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" aria-pressed="false">
    <span class="sr-only">Use setting</span>
    <span class="pointer-events-none absolute bg-white w-full h-full rounded-md" aria-hidden="true"/>
    <span :class="isOn ? 'bg-indigo-600' : 'bg-gray-200'" class="pointer-events-none absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200" aria-hidden="true"/>
    <span :class="isOn ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform ring-0 transition-transform ease-in-out duration-200" aria-hidden="true"/>
  </button>
</template>

<script setup>
import { ref } from 'vue'
import { pipe, not } from 'ramda'
import { read, write } from 'vue3-fp'

let isOn = ref(true)

let onClick = pipe(
  read(isOn),
  not,
  write(isOn)
)
</script>

17 行

let onClick = pipe(
  read(isOn),
  not,
  write(isOn)
)

read(isOn)：讀取 isOn state
not()：對 isOn state 做 toggle
write(isOn)：寫入 isOn state

Conclusion

Short Toggle 必須自行攔截 click event 並對 isOn state 做 toggle
Tailwind UI 常有兩個 utility 根據 state 改變而切換 utility，可簡單在 :class 內使用 ?: operator