Flowbite로 Tailwind CSS 선택 드롭다운 구성 요소를 빌드하는 방법

Tailwind CSS 및 Flowbite는 개발 속도, 성능 및 HTML을 떠날 필요가 없다는 사실 때문에 주로 웹 사이트를 구축할 때 작업할 때 가장 좋아하는 프런트 엔드 스택 중 하나였습니다.

Flowbite은 탐색 모음, 모달, 드롭다운, 도구 설명, 버튼 등과 같은 30개 이상의 대화형 요소를 포함하여 Tailwind CSS 위에 구축된 구성 요소 라이브러리입니다.

Tailwind CSS은 세계에서 가장 인기 있는 유틸리티 우선 CSS 프레임워크로 웹 사이트를 더 빠르게 구축하고 원하는 방식으로 요소와 페이지를 유연하게 디자인할 수 있습니다.



오늘은 Tailwind CSS의 클래스와 Flowbite의 구성 요소 예제를 사용하여 선택 입력 구성 요소를 빌드하는 방법을 보여드리고자 합니다.

시작하자!

Tailwind CSS 선택

우선 다음과 같이 select 태그가 있는 option 요소를 추가하여 시맨틱 HTML을 빌드해 보겠습니다.

<label for="countries">Select an option</label>
<select id="countries">
  <option selected>Choose a country</option>
  <option value="US">United States</option>
  <option value="CA">Canada</option>
  <option value="FR">France</option>
  <option value="DE">Germany</option>
</select>

아직 스타일이 없으므로 몇 가지 색상과 크기를 추가해 보겠습니다.

<label for="countries" class="block mb-2 text-sm font-medium text-gray-900">Select an option</label>
<select id="countries" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
  <option selected>Choose a country</option>
  <option value="US">United States</option>
  <option value="CA">Canada</option>
  <option value="FR">France</option>
  <option value="DE">Germany</option>
</select>

더 좋아 보인다! 이제 몇 가지 어두운 모드 클래스도 추가해 보겠습니다.

<label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Select an option</label>
<select id="countries" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
  <option selected>Choose a country</option>
  <option value="US">United States</option>
  <option value="CA">Canada</option>
  <option value="FR">France</option>
  <option value="DE">Germany</option>
</select>

마지막으로 다음과 같아야 합니다.

여러 옵션

선택 입력에 multiple 속성을 추가하여 여러 옵션을 쉽게 허용할 수 있습니다.

<label for="countries_multiple" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Select an option</label>
<select multiple id="countries_multiple" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
  <option selected>Choose countries</option>
  <option value="US">United States</option>
  <option value="CA">Canada</option>
  <option value="FR">France</option>
  <option value="DE">Germany</option>
</select>

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

사이징

더 작은 선택 입력에 대해 다음 예제를 사용할 수도 있습니다.

<label for="small" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Small select</label>
<select id="small" class="block p-2 mb-6 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
  <option selected>Choose a country</option>
  <option value="US">United States</option>
  <option value="CA">Canada</option>
  <option value="FR">France</option>
  <option value="DE">Germany</option>
</select>

더 큰 선택 입력에 대한 다음 예는 다음과 같습니다.

<label for="large" class="block mb-2 text-base font-medium text-gray-900 dark:text-gray-400">Large select</label>
<select id="large" class="block py-3 px-4 w-full text-base text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
  <option selected>Choose a country</option>
  <option value="US">United States</option>
  <option value="CA">Canada</option>
  <option value="FR">France</option>
  <option value="DE">Germany</option>
</select>

이것은 선택 입력의 몇 가지 예에 불과하지만 Flowbite에서 더 많은 구성 요소Tailwind CSS Select를 확인하여 웹 사이트 구축을 더 빠르게 시작할 수 있습니다.

다음은 Flowbite의 추가 선택 구성 요소 목록입니다.





다음의 유용한 링크를 확인하십시오.

Tailwind CSS Select - Flowbite

Flowbite - Tailwind CSS Components