Tailwind CSS 토글/스위치 구성 요소 빌드

저는 최근에 Tailwind CSS를 많이 사용하고 있으며 유틸리티 클래스로 작업하는 새로운 방식을 좋아하지만 Bootstrap 또는 Bulma와 유사하게 작업할 기본 구성 요소 집합이 없다는 점을 말해야 합니다.

그렇기 때문에 DEV 커뮤니티에서 Tailwind CSS의 유틸리티 클래스를 사용하여 일반적으로 사용되는 웹 구성 요소를 빌드하는 방법에 대한 새 시리즈를 시작했습니다.



지난 번에 어떻게 빌드하는지 보여드렸고 오늘은 토글/스위치 요소를 빌드하는 방법을 보여드리고 싶습니다.

Tailwind CSS 토글/스위치 구성 요소

토글 구성 요소를 구축하기 위한 첫 번째 단계는 기본 HTML 코드를 설정하는 것입니다.

<label for="toggle-example">
  <input type="checkbox" id="toggle-example">
  <div></div>
  <span>Toggle me</span>
</label>

보시다시피 label 태그 안에 모든 요소를 ​​래핑하여 클릭할 때마다 체크박스가 토글되도록 합니다. 또한 나중에 배경으로 사용될 빈div 태그도 추가했습니다.

이제 요소의 스타일을 지정하는 데 필요한 유틸리티 클래스를 추가해 보겠습니다.

<label for="toggle-example" class="flex items-center cursor-pointer relative mb-4">
  <input type="checkbox" id="toggle-example" class="sr-only">
  <div class="toggle-bg bg-gray-200 border-2 border-gray-200 h-6 w-11 rounded-full"></div>
  <span class="ml-3 text-gray-900 text-sm font-medium">Toggle me</span>
</label>

토글 요소는 아직 완성되지 않았습니다. 왼쪽에서 오른쪽으로 이동할 점이 될 의사 클래스 몇 개를 추가해야 하기 때문입니다.

작동하게 만드는 가장 쉬운 방법은 install the Flowbite package from NPM Tailwind CSS 프로젝트에 플러그인으로 포함하는 것입니다. 그러면 이 구성 요소와 Flowbite의 다른 구성 요소가 작동합니다.

또는 CSS 내에 다음 스타일을 추가할 수도 있습니다.

.toggle-bg:after {
    content: '';
    @apply absolute top-0.5 left-0.5 bg-white border border-gray-300 rounded-full h-5 w-5 transition shadow-sm;
}

input:checked + .toggle-bg:after {
    transform: translateX(100%);
    @apply border-white;
}

input:checked + .toggle-bg {
    @apply bg-blue-600 border-blue-600;
}

최종 결과는 다음과 같아야 합니다.



토글 구성 요소를 기본적으로 선택하도록 할 수도 있습니다.

<label for="toggle-example-checked" class="flex items-center cursor-pointer relative">
  <input type="checkbox" id="toggle-example-checked" class="sr-only" checked>
  <div class="toggle-bg bg-gray-200 border-2 border-gray-200 h-6 w-11 rounded-full"></div>
  <span class="ml-3 text-gray-900 text-sm font-medium">Toggle me (checked)</span>
</label>

이 튜토리얼이 Tailwind CSS 여정에 도움이 되고 작업할 수 있는 구성 요소를 확장하는 데 도움이 되었기를 바랍니다. 이동하기 전에 이 토글 구성 요소가 포함되어 있고 웹 사이트를 더 빠르게 구축하는 데 사용할 수 있는 Tailwind CSS 구성 요소 라이브러리를 보여드리고 싶습니다.

Flowbite - Tailwind CSS 구성 요소 라이브러리

앞서 말했듯이 이Tailwind CSS toggle component는 Flowbite라는 더 큰 오픈 소스 구성 요소 라이브러리의 일부입니다.



Flowbite은 기본적으로 Tailwind CSS의 유틸리티 클래스로 구축된 버튼, 경고, 배지, 드롭다운, 탐색 모음과 같은 UI 구성 요소 집합이지만 Tailwind CSS를 사용하여 웹 사이트를 훨씬 더 빠르게 구축하는 데 도움이 되는 도구 설명 및 날짜 선택기와 같은 대화형 요소도 포함합니다.

NPM을 통해 Flowbite를 설치한 다음 Tailwind CSS 프로젝트 내에서 플러그인으로 요구하거나 CDN을 사용하여 사용해 볼 수 있습니다quickly get started.