今天,我想向您展示如何使用 Tailwind CSS 中的实用程序类和 Flowbite 中的组件,使用基于多种样式和大小的自定义样式文件输入元素。

Flowbite是基于 Tailwind CSS 的最受欢迎的组件库,具有超过 35 个交互式 UI 组件,例如按钮、模式、导航栏、下拉菜单等。

Tailwind CSS是市场上最流行的实用程序优先 CSS 框架,它可以帮助您更快地构建网站,而无需接触 CSS 文件。

因此,事不宜迟,让我向您展示如何开始使用自定义文件输入元素!

Tailwind CSS 文件输入 - Flowbite

首先,确保您的项目中同时安装了 Tailwind CSS 和 Flowbite。您可以查看以下指南来做到这一点:

• 安装 Tailwind CSS

• 安装 Flowbite

惊人的!现在您可以转到Flowbite 的文件输入文档并查看所有示例和大小。

例如,您可以使用以下代码:

<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 构建的文件输入示例:

• Tailwind CSS 文件输入 - Flowbite

• Flowbite - Tailwind CSS 组件