Flowbite UI

简介

Flowbite 是一个基于实用优先的 Tailwind CSS 框架的开源 UI 组件库，具有深色模式支持、Figma 设计系统、模板等功能。

它包含网站所需的所有常用组件，例如按钮、下拉菜单、导航栏、模态框，还有一些更高级的交互式元素，例如日期选择器。

使用 Meteor.js、Tailwind CSS 和 Flowbite 可以帮助您开始构建现代 UI Web 应用程序，通过利用 Meteor.js 的强大框架功能、Tailwind CSS 框架的实用优先方法以及 Flowbite 库的开源 UI 组件。

要求

确保您已在计算机上安装了 Node.js v14，以便能够使用 NPX 和 NPM 安装 Meteor.js、Tailwind CSS 和 Flowbite。有关如何安装 Meteor.js 的更多信息，请查看官方安装指南。

创建新的 Meteor 项目

创建一个新的 `meteor` 初学者项目

创建新的 Meteor.js 项目最简单的方法是首先全局安装 CLI

npm install -g meteor

全局安装 meteor 后，您可以继续创建新项目

meteor create flowbite-app --tailwind
cd flowbite-app

这将创建一个新的 meteor 项目，并支持 tailwindcss。

无需额外的配置，因为我们在设置项目时添加了 --tailwind 标志。

现在您已创建了一个新的 Meteor.js 项目，并自动配置了 Tailwind CSS，我们可以继续安装 Flowbite 和 Flowbite React 以开始利用开源 UI 组件。

安装 Flowbite

通过 NPM 安装 Flowbite 和 Flowbite React

npm install --save flowbite flowbite-react

确保您在 tailwind.config.js 文件中设置了 Flowbite 插件和模板路径

module.exports = {
  content: [
    './imports/ui/**/*.{js,jsx,ts,tsx}',
    './client/*.html',
    'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [require('flowbite/plugin')],
};

现在您已安装了这些包，您可以开始导入 UI 组件

import { Alert } from 'flowbite-react';

export default function MyPage() {
  return <Alert color="info">Alert!</Alert>;
}

上面的代码将导入 <Alert> 组件，您可以使用它来发送反馈消息。

Flowbite UI 组件

为了帮助您入门，您可以查看 Flowbite React 网站上的完整 React 组件集合，并浏览每个组件的源代码文档。

以下是如何通过从 Meteor.js 项目中的 Flowbite React 包导入它们来使用模态框和按钮组件的示例

import { Button, Modal } from 'flowbite-react';

export default function DefaultModal() {
  const [openModal, setOpenModal] = useState<string | undefined>();
  const props = { openModal, setOpenModal };

  return (
    <>
      <Button onClick={() => props.setOpenModal('default')}>Toggle modal</Button>
      <Modal show={props.openModal === 'default'} onClose={() => props.setOpenModal(undefined)}>
        <Modal.Header>Terms of Service</Modal.Header>
        <Modal.Body>
          <div className="space-y-6">
            <p className="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 className="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.Body>
        <Modal.Footer>
          <Button onClick={() => props.setOpenModal(undefined)}>I accept</Button>
          <Button color="gray" onClick={() => props.setOpenModal(undefined)}>
            Decline
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  )
}

以下是如何使用下拉菜单组件的另一个示例

import { Dropdown } from 'flowbite-react';

<Dropdown label="Dropdown button">
  <Dropdown.Item>Dashboard</Dropdown.Item>
  <Dropdown.Item>Settings</Dropdown.Item>
  <Dropdown.Item>Earnings</Dropdown.Item>
  <Dropdown.Item>Sign out</Dropdown.Item>
</Dropdown>;

最后，另一个关于如何使用导航栏组件的示例

import { Navbar } from 'flowbite-react';

<Navbar fluid={true} rounded={true}>
  <Navbar.Brand href="https://flowbite.com/">
    <img
      src="https://flowbite.com/docs/images/logo.svg"
      className="mr-3 h-6 sm:h-9"
      alt="Flowbite Logo"
    />
    <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
      Flowbite
    </span>
  </Navbar.Brand>
  <Navbar.Toggle />
  <Navbar.Collapse>
    <Navbar.Link href="/navbars" active={true}>
      Home
    </Navbar.Link>
    <Navbar.Link href="/navbars">About</Navbar.Link>
    <Navbar.Link href="/navbars">Services</Navbar.Link>
    <Navbar.Link href="/navbars">Pricing</Navbar.Link>
    <Navbar.Link href="/navbars">Contact</Navbar.Link>
  </Navbar.Collapse>
</Navbar>;

要了解有关 Flowbite React 的更多信息，请务必查看存储库和主网站。

Meteor.js 初学者项目

Flowbite 社区创建了一个开源 Meteor.js 初学者项目，该项目预先设置了 Tailwind CSS 和 Flowbite React，您可以通过查看 GitHub 上的存储库来克隆它。

在 GitHub 上编辑

简介

要求

创建新的 Meteor 项目

创建一个新的 meteor 初学者项目

安装 Flowbite

Flowbite UI 组件

Meteor.js 初学者项目

创建一个新的 `meteor` 初学者项目