Tailwind CSS 및 Flowbite와 함께 사용자 지정 파일 입력 요소를 사용하는 방법
Flowbite은 버튼, 모달, 탐색 모음, 드롭다운 등과 같은 35개 이상의 대화형 UI 구성 요소가 있는 Tailwind CSS를 기반으로 하는 가장 인기 있는 구성 요소 라이브러리입니다.
Tailwind CSS는 시장에서 가장 인기 있는 유틸리티 우선 CSS 프레임워크로, CSS 파일을 건드리지 않고도 웹 사이트를 훨씬 빠르게 구축할 수 있도록 도와줍니다.
따라서 더 이상 고민하지 않고 사용자 정의 파일 입력 요소로 시작하는 방법을 보여드리겠습니다!
Tailwind CSS 파일 입력 - Flowbite
먼저 프로젝트에 Tailwind CSS와 Flowbite가 모두 설치되어 있는지 확인하세요. 이를 위해 다음 가이드를 확인할 수 있습니다.
대박! 이제 Flowbite's file input 설명서로 이동하여 모든 예제와 크기를 확인할 수 있습니다.
예를 들어 다음 코드를 사용할 수 있습니다.
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" for="file_input">Upload file</label>
<input class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" id="file_input" type="file">
또한 다크 모드를 지원하며 다음과 같이 표시됩니다.
다음과 같이 입력 아래에 설명 도우미 텍스트를 추가할 수도 있습니다.
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" for="file_input">Upload file</label>
<input class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" aria-describedby="file_input_help" id="file_input" type="file">
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300" id="file_input_help">SVG, PNG, JPG or GIF (MAX. 800x400px).</p>
결과는 다음과 같아야 합니다.
입력 요소에
multiple
속성을 추가하면 하나가 아닌 여러 파일을 업로드할 수도 있습니다.<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" for="multiple_files">Upload multiple files</label>
<input class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" id="multiple_files" type="file" multiple>
다음 리소스를 확인하여 Tailwind CSS 및 Flowbite로 빌드된 더 많은 파일 입력 예제를 확인할 수 있습니다.
Reference
이 문제에 관하여(Tailwind CSS 및 Flowbite와 함께 사용자 지정 파일 입력 요소를 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/themesberg/how-to-use-a-custom-file-input-element-with-tailwind-css-and-flowbite-iad텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)