return <div className='flex items-center gap-2'>
  <span className='select-none text-sm'>ラベル</span>
  <div className='relative overflow-hidden rounded-md border border-slate-200 transition-colors dark:border-slate-600'>

    <button
      title='True要素'
      className={`inline-flex h-8 w-10 items-center justify-center transition-colors hover:bg-gray-200 dark:hover:bg-slate-700`}
      onClick={() => setFlag(true)}
    >
      <span
        className={`i-tabler-photo relative z-20 size-5 ${isLeft ? 'bg-white' : 'bg-gray-700 dark:bg-slate-400'} transition-colors`}
      ></span>
    </button>

    <button
      title='False要素'
      className={`inline-flex h-8 w-10 items-center justify-center transition-colors hover:bg-gray-200 dark:hover:bg-slate-700`}
      onClick={() => setFlag(false)}
    >
      <span
        className={`i-tabler-list relative z-20 size-5 ${!isLeft ? 'bg-white' : 'bg-gray-700 dark:bg-slate-400'} transition-colors`}
      />
    </button>

    {/* オーバーレイ */}
    <div
      className={`pointer-events-none absolute ${isLeft ? 'left-0' : 'left-10'} top-0 z-10 h-8 w-10 bg-blue-500 transition-all`}
    />
  </div>
</div>

それぞれアイコン(i-**-**)は@egoist/tailwindcss-iconsで参照しています．

ボタンをクリックすることでuseStateの状態管理を使い選択先を記憶します．それぞれボタンはホバーした際に薄い灰色にします．

あとは，選択された際に内部のアイコンが白くなるようにだけ準備しておきます．

次にオーバーレイです．ボタンとしての判定が邪魔されないようにするべく，pointer-events-noneで当たり判定を消します． そして絶対配置でtopとleftを設定し，ボタンとアイコンの間に配置されるようz-indexを調節します．すると，アイコンの色変更に邪魔されること無く目的の色を表現できます．

leftの位置をフラグによって変えることで位置調整が完了し，transition-allで移動アニメーションをつけて完成です．

今回はbooleanを使っていますが，useState<number>を使って3つ以上のボタンを並べ，オーバーレイのleftを乗算にすることも可能です．

mix-blend-modeによるアプローチ

これは，白黒のUIを作る時におすすめです．ソースからz-indexの情報を全て消し，アイコンは常時黒のままにしておきます．そして，オーバーレイを動かすことは同じですが，mix-blend-exclusionで除外設定のブレンドにする力で白黒反転させます．

return <div className='flex items-center gap-2'>
  <span className='select-none text-sm'>ラベル</span>
  <div className='relative overflow-hidden rounded-md border border-slate-200 transition-colors dark:border-slate-600'>

    <button
      title='True要素'
      className={`inline-flex h-8 w-10 items-center justify-center transition-colors hover:bg-gray-200 dark:hover:bg-slate-700`}
      onClick={() => setFlag(true)}
    >
      <span className={`i-tabler-photo relative size-5 bg-black transition-colors`}></span>
    </button>

    <button
      title='False要素'
      className={`inline-flex h-8 w-10 items-center justify-center transition-colors hover:bg-gray-200 dark:hover:bg-slate-700`}
      onClick={() => setFlag(false)}
    >
      <span className={`i-tabler-list relative size-5 bg-black transition-colors`} />
    </button>

    {/* オーバーレイ */}
    <div
      className={`pointer-events-none absolute ${isLeft ? 'left-0' : 'left-10'} top-0 h-8 w-10 bg-white mix-blend-exclusion transition-all`}
    />
  </div>
</div>

アイコンの色をブレンドで変えるので違和感なく自然な遷移になると思います．この方法は有彩色だとハードルが上がると思うためおすすめしません．

ブレンドについて(MDN)

自動更新

コメントはまだありません

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.