ITADN · 发现全球开源项目

基于 Tailwind CSS 的组件，更快构建网站

文档

完整文档请访问 flowbite.com。

快速开始

Flowbite 可以作为插件引入到现有的 Tailwind CSS 项目中，它旨在通过提供一组基于 Tailwind CSS 工具类构建的 Web 组件，帮助你更快地构建网站。

使用 NPM 安装

请确保已安装 Node.js 和 Tailwind CSS。本指南适用于 Tailwind v4。

运行以下命令，使用 NPM 将 Flowbite 作为依赖项安装：

npm install flowbite

在你的主 input.css CSS 文件中导入 Flowbite 的默认主题变量：

/* choose one of the following */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

/* MINIMAL THEME
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/minimal";
*/

/* ENTERPRISE THEME
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/enterprise";
*/

/* PLAYFUL THEME
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/playful";
*/

/* MONO THEME
@import "flowbite/src/themes/mono";
*/

在您的 CSS 中导入 Flowbite 插件文件：

@plugin "flowbite/plugin";

在您的 CSS 中配置 Flowbite 的源文件：

@source "../node_modules/flowbite";

在您的 <body> 标签结束之前，包含驱动交互元素的 JavaScript 代码：

<script src="../path/to/flowbite/dist/flowbite.min.js"></script>

在 JavaScript 部分中了解有关 Flowbite JavaScript API 和功能的更多信息。

如果您有一个使用 Tailwind CSS v3 的旧项目，请查看此指南以了解如何升级到 v4。

使用 CDN 引入

开始使用 Flowbite 的最快方法是通过 CDN 将 CSS 和 JS 引入到您的项目中。

在 head 标签内引入以下压缩后的样式表：

<link href="https://cdn.jsdelivr.net/npm/flowbite@{{< current_version >}}/dist/flowbite.min.css" rel="stylesheet" />

并在 body 元素结束之前包含以下 JavaScript 文件：

<script src="https://cdn.jsdelivr.net/npm/flowbite@{{< current_version >}}/dist/flowbite.min.js"></script>

请记住，使用 Tailwind CSS 和 Flowbite 的最佳方式是清除 CSS 类。

打包的 JavaScript

使用 Flowbite 最流行的方式之一是通过 Webpack 或 Parcel 等打包工具引入 UMD 格式的打包 JavaScript 文件，这可以确保所有数据属性和功能开箱即用。

你可以直接在打包的 app-bundle.js 文件中导入主 JavaScript 文件，如下所示：

import 'flowbite';

此文件可以访问所有组件，并自动将事件监听器应用于数据属性。

数据属性

使用 Flowbite 交互式 UI 组件的首选方式是通过数据属性接口，该接口允许我们通过 HTML 元素属性添加功能，我们文档中的大多数示例都采用了此策略。

例如，要设置一个模态框组件，你只需使用 data-modal-target 和 data-modal-{toggle|show|hide} 通过点击任何触发元素来切换、显示或隐藏该组件。

<button data-modal-target="defaultModal" data-modal-toggle="defaultModal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
  Toggle modal
</button>

<!-- Main modal -->
<div id="defaultModal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative w-full max-w-2xl max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600 border-gray-200">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                    Terms of Service
                </h3>
                <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="defaultModal">
                    <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <div class="p-6 space-y-6">
                <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                </p>
                <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                </p>
            </div>
            <!-- Modal footer -->
            <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
                <button data-modal-hide="defaultModal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
                <button data-modal-hide="defaultModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Decline</button>
            </div>
        </div>
    </div>
</div>

初始化函数

你也可以使用初始化函数自行设置事件监听器。以下是使用 Vue 或 Nuxt 的示例：

<script setup>
import { onMounted } from 'vue'
import { initFlowbite } from 'flowbite'

// initialize components based on data attribute selectors
onMounted(() => {
    initFlowbite();
})
</script>

<template>
    // Modal HTML markup with data attributes from Flowbite
</template>

initFlowbite 函数会为下拉菜单、模态框、导航栏、工具提示等设置所有初始化函数，以便它们能够挂钩到数据属性上。或者，你也可以使用 initDropdowns 或 initModals 分别初始化每个组件类别类。

你可以通过浏览 Flowbite 组件查看更多示例。

ESM 和 CJS

Flowbite 还提供了一种用于以编程方式使用组件的 API，并且支持 JavaScript 的 CJS 和 ESM，如果你需要扩展数据属性接口的默认功能并访问函数回调，这将非常有用。

下面是一个示例，展示如何在 JavaScript 中导入并创建一个新的 Modal 组件：

import { Modal } from 'flowbite'

const $modalElement = document.querySelector('#modalEl');

const modalOptions = {
    placement: 'bottom-right',
    backdrop: 'dynamic',
    backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
    onHide: () => {
        console.log('modal is hidden');
    },
    onShow: () => {
        console.log('modal is shown');
    },
    onToggle: () => {
        console.log('modal has been toggled');
    }
}

const modal = new Modal($modalElement, modalOptions);

modal.show();

查看每个组件页面的 JavaScript 行为部分，以了解如何使用此功能。

TypeScript

Flowbite 支持交互式 UI 组件的类型声明，包括对象接口和参数类型。查看以下示例，了解如何在 Flowbite 中使用类型。

除了上述代码外，我们现在将从 Flowbite 包中导入一些相关的类型，即 ModalOptions 和 ModalInterface：

import { Modal } from 'flowbite'
import type { ModalOptions, ModalInterface } from 'flowbite'

// other code

通常来说，所有组件都有一个接口定义，你可以在创建新对象时使用它，以确保你使用的是正确类型的参数和方法。

在创建新的模态框时，你可以将 ModalInterface 设置为主类型：

const modal: ModalInterface = new Modal($modalElement, modalOptions);

Flowbite 还支持选项对象的类型定义，因此如果你想基于类型来设置模态框的位置，可以这样做：

const modalOptions: ModalOptions = {
    placement: 'top-right'
}

const modal: ModalInterface = new Modal($modalElement, modalOptions);

了解更多关于 Flowbite 和 TypeScript 的信息，请参阅快速入门指南。

RTL 支持

所有 Flowbite UI 组件都原生支持 RTL，您可以通过在 HTML 元素上使用 dir="rtl" 属性轻松进行设置。有关 Flowbite 和 RTL 支持的更多信息，请参见此处。

JavaScript 框架

出色的开源社区还构建并目前维护着以下用于 React、Vue、Svelte、Angular 和 Qwik 的独立库：

我们还为以下前端框架和库编写了集成指南：

后端框架

Flowbite 与大多数后端框架都有很好的集成，因为它依赖于原生 JavaScript：

组件

Flowbite 是一个开源的 UI 组件集合，基于 Tailwind CSS 的工具类构建，可作为编码用户界面和网站时的起点。

警报	徽章	面包屑导航

按钮	按钮组	卡片

下拉菜单	表单	列表组

排版	模态框	选项卡

导航栏	分页	时间线

进度条	表格	Toast

Tooltips	Datepicker	Spinner

Footer	Accordion	Sidebar

Carousel	Avatar	Rating

输入框	文件输入	搜索输入框

选择	文本域	复选框

单选按钮	开关	范围滑块

浮动标签	巨型菜单	骨架屏

KBD (键盘)	抽屉 (侧边栏)	气泡框

视频	标题	段落

引用块	图片	列表

链接	文本	水平线 (HR)

速度拨号	步骤条	指示器

底部导航	粘性横幅	画廊 (瀑布流)

大标题区	设备模型	图表

数字输入	电话输入	聊天气泡

复制到剪贴板	时间选择器	DataTables

所见即所得编辑器	二维码