FlowBite - Tailwind CSS 组件库

开源小助理

973人浏览 · 2022-08-11 07:31:30

开源小助理 · 2022-08-11 07:31:30 发布

什么是 FlowBite?

FlowBite 是一个开源的 UI 元素集合,基于实用程序优先的 CSS 框架 Tailwind,由 Themesberg 设计和编码,可在 Figma 中使用,也可作为 Web 组件使用。

为什么要使用 FlowBite?

与其他框架相比,Tailwind CSS 的一个缺点是它没有基本的组件集。这使得快速制作用户界面原型变得非常困难。

[ FlowBite - Tailwind CSS 组件库 ](https://res.cloudinary.com/practicaldev/image/fetch/s--xuSeg0ln--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// flowbite.s3.amazonaws.com/og-image.png)

这就是 FlowBite 发挥作用的地方:它基本上是 Tailwind CSS,但您可以获得通常使用 Bootstrap 或 Bulma 等经典 CSS 框架获得的所有组件。

至少有 15 种类型的组件,包括按钮、警报、面包屑、分页和导航栏。 FlowBite 还包括一些自定义 JavaScript,这些 JavaScript 支持交互式组件,例如下拉菜单、模式、工具提示等。

如何开始?

FlowBite 入门非常简单:您只需按照快速入门指南或按照构建工具指南设置高级工作流程。

通过 CDN 包含

开始使用 FlowBite 的最快方法是通过 CDN 将 CSS 和 JavaScript 简单地包含到您的项目中。

在head标记内需要以下缩小样式表:

<link rel="stylesheet" href="https://unpkg.com/flowbite@latest/dist/flowbite.min.css" />

进入全屏模式退出全屏模式

并在body元素的末尾包含以下 javascript 文件:

<script src="https://unpkg.com/flowbite@latest/dist/flowbite.js"></script>

进入全屏模式退出全屏模式

重要提示: 这不是使用 FlowBite 的推荐方式,因为您将无法清除不必要的 CSS。查看构建工具以正确设置 FlowBite 用于开发和生产代码。

需要通过 NPM

您还可以通过运行以下命令使用 NPM 将 FlowBite 作为依赖项:

npm i flowbite

进入全屏模式退出全屏模式

安装

按照以下步骤使用 FlowBite 和 Tailwind CSS 进行配置、开发和构建:

1.确保你的机器上安装了Node.js和npm

2.新建一个文件夹,mkdir flowbite-project

在新创建的文件夹内移动cd flowbite-project
运行npm init创建package.json文件并按照 CLI 说明进行操作
运行以下代码安装 Tailwind CSS:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/forms@latest

进入全屏模式退出全屏模式

新建一个touch postcss.config.js的文件,插入如下代码:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

进入全屏模式退出全屏模式

通过运行以下命令创建 Tailwind 配置文件:

npx tailwindcss init

进入全屏模式退出全屏模式

然后在tailwind.config.js文件中添加以下代码:

module.exports = {
  purge: {
    enabled: true,
    content: ["./layouts/**/*.html", "./content/**/*.md", "./content/**/*.html"],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    fontFamily: {
      'sans': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
      'body': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
      'mono': ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace']
    },
    colors: {
      white: "#ffffff",
      black: "#000000",
      gray: {
        50: '#F9FAFB',
        100: '#F3F4F6',
        200: '#E5E7EB',
        300: '#D1D5DB',
        400: '#9CA3AF',
        500: '#6B7280',
        600: '#4B5563',
        700: '#374151',
        800: '#1F2937',
        900: '#111827'
      },
      red: {
        50: '#FDF2F2',
        100: '#FDE8E8',
        200: '#FBD5D5',
        300: '#F8B4B4',
        400: '#F98080',
        500: '#F05252',
        600: '#E02424',
        700: '#C81E1E',
        800: '#9B1C1C',
        900: '#771D1D'
      },
      orange: {
        50: '#FFF8F1',
        100: '#FEECDC',
        200: '#FCD9BD',
        300: '#FDBA8C',
        400: '#FF8A4C',
        500: '#FF5A1F',
        600: '#D03801',
        700: '#B43403',
        800: '#8A2C0D',
        900: '#771D1D'
      },
      yellow: {
        50: '#FDFDEA',
        100: '#FDF6B2',
        200: '#FCE96A',
        300: '#FACA15',
        400: '#E3A008',
        500: '#C27803',
        600: '#9F580A',
        700: '#8E4B10',
        800: '#723B13',
        900: '#633112'
      },
      green: {
        50: '#F3FAF7',
        100: '#DEF7EC',
        200: '#BCF0DA',
        300: '#84E1BC',
        400: '#31C48D',
        500: '#0E9F6E',
        600: '#057A55',
        700: '#046C4E',
        800: '#03543F',
        900: '#014737'
      },
      teal: {
        50: '#EDFAFA',
        100: '#D5F5F6',
        200: '#AFECEF',
        300: '#7EDCE2',
        400: '#16BDCA',
        500: '#0694A2',
        600: '#047481',
        700: '#036672',
        800: '#05505C',
        900: '#014451'
      },
      blue: {
        50: '#EBF5FF',
        100: '#E1EFFE',
        200: '#C3DDFD',
        300: '#A4CAFE',
        400: '#76A9FA',
        500: '#3F83F8',
        600: '#1C64F2',
        700: '#1A56DB',
        800: '#1E429F',
        900: '#233876'
      },
      indigo: {
        50: '#F0F5FF',
        100: '#E5EDFF',
        200: '#CDDBFE',
        300: '#B4C6FC',
        400: '#8DA2FB',
        500: '#6875F5',
        600: '#5850EC',
        700: '#5145CD',
        800: '#42389D',
        900: '#362F78'
      },
      purple: {
        50: '#F6F5FF',
        100: '#EDEBFE',
        200: '#DCD7FE',
        300: '#CABFFD',
        400: '#AC94FA',
        500: '#9061F9',
        600: '#7E3AF2',
        700: '#6C2BD9',
        800: '#5521B5',
        900: '#4A1D96'
      },
      pink: {
        50: '#FDF2F8',
        100: '#FCE8F3',
        200: '#FAD1E8',
        300: '#F8B4D9',
        400: '#F17EB8',
        500: '#E74694',
        600: '#D61F69',
        700: '#BF125D',
        800: '#99154B',
        900: '#751A3D'
      }
    }
  },
  variants: {
    extend: {
      fill: ['hover', 'focus'],
      zIndex: ['hover', 'active'],
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

进入全屏模式退出全屏模式

通过创建一个新的 CSS 文件将 Tailwind 包含在您的 CSS 中,并使用@directive注入主要样式:

/* ./styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

进入全屏模式退出全屏模式

通过运行以下命令使用 Tailwind CLI 工具编译 CSS:

npx tailwindcss -o flowbite.css

进入全屏模式退出全屏模式

将新创建的flowbite.css文件包含到您的 HTML 模板中,并开始使用 FlowBite 和 Tailwind CSS 进行开发。
使用 ES6:确保您还创建了一个名为flowbite.js的 JavaScript 文件,以使下拉菜单和模式等元素正常工作,并添加以下代码:

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css'; // optional for styling
import 'tippy.js/animations/scale.css';
import { createPopper } from '@popperjs/core';

function toggleCollapse(collapseId) {
    const menu = document.getElementById(collapseId);
    if (menu.classList.contains("hidden")) {
        menu.classList.remove("hidden");
    } else {
        menu.classList.add("hidden");
    }
}
window.toggleCollapse = toggleCollapse;

function toggleDropdown(event, dropdownID) {
    let element = event.target;
    while (element.nodeName !== "BUTTON") {
        element = element.parentNode;
    }
    createPopper(element, document.getElementById(dropdownID), {
        placement: 'bottom-start',
        modifiers: [
            {
                name: 'offset',
                options: {
                    offset: [0, 10],
                },
            },
        ]
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
}
window.toggleDropdown = toggleDropdown;

function toggleModal(modalID) {
    document.getElementById(modalID).classList.toggle("hidden");
    document.getElementById(modalID + "-backdrop").classList.toggle("hidden");
    document.getElementById(modalID).classList.toggle("flex");
    document.getElementById(modalID + "-backdrop").classList.toggle("flex");
}

window.toggleModal = toggleModal;

document.addEventListener("DOMContentLoaded", function () {
    tippy('[data-tippy-content]');
});

进入全屏模式退出全屏模式

或者,您也可以只使用带有已编译 JS 的 CDN 链接:

<script src="https://unpkg.com/flowbite@latest/dist/flowbite.js"></script>

进入全屏模式退出全屏模式

生产大楼

如果您想构建生产环境,请使用以下命令并删除所有未使用的 CSS:

NODE_ENV=production npx tailwindcss -o flowbite.css

进入全屏模式退出全屏模式

Figma 设计文件

如果您想使用 Figma 设计文件,您可以在 Figma 社区](https://www.figma.com/community/file/973638860086718856)上复制[免费版本,或者使用FlowBite Pro升级以获取其他应用程序 UI、营销 UI 和电子商务部分和页面。

许可

FlowBite 的组件库是在MIT License下开源的。

但是,请注意 FlowBite 的专业版受 FlowBite 的EULA(最终用户许可协议)的约束。

作者

FlowBite 的作者是Zoltán Szőgyényi(开发)和Robert Tanislav(设计师)作为Themesberg的联合创始人。

向您推荐>>ModelScope魔搭中文开源社区

ModelScope旨在打造下一代开源的模型即服务共享平台，为泛AI开发者提供灵活、易用、低成本的一站式模型服务产品，让模型应用更简单！

更多推荐

一个开源应用程序导致 XSS 到 RCE 漏洞缺陷

跨站点脚本 (XSS) 是 Web 应用程序中最常遇到的攻击之一。如果攻击者可以将 JavaScript 代码注入到应用程序输出中,这不仅会导致 cookie 盗窃、重定向或网络钓鱼,而且在某些情况下还会导致系统完全受损。在本文中,我将通过 Evolution CMS、FUDForum 和 GitBucket 的示例展示如何通过 XSS 实现远程代码执行。进化CMS v3.1.8 链接:git

开源

我在校园 DevRel 展上的主要收获乔恩·戈特弗里德 E1

嘿嘿👋,欢迎来到校园DevRel 秀的这个博客系列,重点是来自神奇嘉宾DevRels 的经验教训。在我们开始之前!让我们花点时间了解一下 DevRel 到底是什么。顾名思义,开发者关系(或 DevRel)专注于维护与负责开发组织技术或产品的人员的关系。根据公司及其目标,该领域的角色可以采取各种形式和任务。组织和开发人员之间的沟通通常是 DevRel 的责任,以确保更好的信息流和反馈循环。这是对

开源

克服心理障碍,为开源做贡献

为开源做贡献是一项艰巨的任务。我已经当了 3 年的软件工程师,并且已经构建了近十年的软件,但我从来没有能够为开源项目做出贡献。它总是显得如此大胆和令人困惑。我以前开过 PR,接受过几十个比我优秀的开发者的批评,从不流汗。但开源似乎总是我无法企及的。为什么重要? 🤔 我 90% 的代码都是闭源的。很多公司都希望看到我的代码和我从事的项目,但除了部署的应用程序和我 3 年前做的一些全栈项目之