Tailwind CSS 예제를 사용하여 React JS에서 스위치 전환

이 튜토리얼에서는 tailwind css를 사용하여 반응 js에서 토글 스위치를 생성합니다. 간단한 토글 스위치 반응, Tailwind CSS 및 React를 사용한 토글 스위치 헤드리스 UI 예제를 볼 수 있습니다.

도구 사용

리액트 JS
순풍 CSS 3.v
헤드리스 UI

view

먼저 tailwind css로 반응 프로젝트를 설정해야 합니다. 수동으로 설치하거나 아래 블로그를 읽을 수 있습니다.

How to install Tailwind CSS in React

Install & Setup Vite + React + Typescript + Tailwind CSS 3

예 1

반응 후크 및 tailwind css v3을 사용하여 토글 스위치 입력을 빌드합니다.
Toggle.jsx

import { useState } from "react";

export default function Toggle() {
    const [enabled, setEnabled] = useState(false);

    return (
        <div className="relative flex flex-col items-center justify-center min-h-screen overflow-hidden">
            <div className="flex">
                <label class="inline-flex relative items-center mr-5 cursor-pointer">
                    <input
                        type="checkbox"
                        className="sr-only peer"
                        checked={enabled}
                        readOnly
                    />
                    <div
                        onClick={() => {
                            setEnabled(!enabled);
                        }}
                        className="w-11 h-6 bg-gray-200 rounded-full peer  peer-focus:ring-green-300  peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"
                    ></div>
                    <span className="ml-2 text-sm font-medium text-gray-900">
                        ON
                    </span>
                </label>
            </div>
        </div>
    );
}

예 2

react 및 tailwind css v3 및 Headless ui를 사용하여 토글 스위치 입력을 만듭니다.
시작하려면 npm을 통해 헤드리스 UI를 설치합니다.

npm install @headlessui/react

Toggle.jsx

import { useState } from 'react'
import { Switch } from '@headlessui/react'

export default function Toggle() {
  const [enabled, setEnabled] = useState(false)

  return (
    <div className="grid h-screen place-items-center">
      <Switch
        checked={enabled}
        onChange={setEnabled}
        className={`${enabled ? 'bg-teal-900' : 'bg-teal-700'}
          relative inline-flex h-[38px] w-[74px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`}
      >
        <span className="sr-only">Use setting</span>
        <span
          aria-hidden="true"
          className={`${enabled ? 'translate-x-9' : 'translate-x-0'}
            pointer-events-none inline-block h-[34px] w-[34px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`}
        />
      </Switch>
    </div>
  )
}

또한보십시오

React Responsive Navbar Menu With Tailwind CSS Example
Toggle Switch in React JS with Tailwind CSS Example
React JS Login Form with Tailwind CSS Example
React Tailwind CSS Dialog (Modal) Example