Flowbite: Tăng Tốc Quá Trình Phát Triển Web Của Bạn Với Các Thành Phần Tailwind CSS

Xây dựng trang web nhanh hơn với các thành phần trên Tailwind CSS

Tài liệu

Để biết tài liệu đầy đủ, truy cập flowbite.com.

Bắt đầu

Flowbite có thể được bao gồm như một plugin vào một dự án Tailwind CSS hiện tại và nó được thiết kế để giúp bạn xây dựng trang web nhanh hơn bằng cách có sẵn một tập hợp các thành phần web được xây dựng bằng các lớp tiện ích từ Tailwind CSS.

Cài đặt bằng NPM

Đảm bảo rằng bạn đã cài đặt Node.js và Tailwind CSS.

. Cài đặt Flowbite như một phụ thuộc bằng NPM bằng cách chạy lệnh sau:

npm install flowbite

. Yêu cầu Flowbite như một plugin bên trong tệp tailwind.config.js:

module.exports = {

    plugins: [
        require('flowbite/plugin')
    ]

}

. Đảm bảo rằng bạn đã thêm đường dẫn mẫu vào tệp tailwind.config.js:

module.exports = {

    content: [
        "./node_modules/flowbite/**/*.js"
    ]

}

. Bao gồm tệp JavaScript chính để làm cho các yếu tố tương tác hoạt động:

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

Bao gồm qua CDN

Cách nhanh nhất để bắt đầu làm việc với Flowbite là đơn giản bao gồm CSS và JavaScript vào dự án của bạn thông qua dịch vụ CDN như UNPKG hoặc CDNJS (mạng phân phối nội dung).

Yêu cầu tệp stylesheet minified sau đây bên trong thẻ head:

<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.7.0/flowbite.min.css" rel="stylesheet" />

Và bao gồm tệp javascript sau đây trước khi kết thúc thẻ body:

<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.7.0/flowbite.min.js"></script>

JavaScript Gom Gọn

Một trong các cách phổ biến nhất để sử dụng Flowbite là bao gồm tệp Javascript được gom gọn, được chuẩn bị UMD sử dụng một trình gom gọn như Webpack hoặc Parcel để đảm bảo rằng tất cả các thuộc tính dữ liệu và chức năng sẽ hoạt động ngay tức khắc.

Bạn có thể nhập tệp JavaScript chính trực tiếp vào tệp app-bundle.js của bạn như sau:

import 'flowbite';

Tệp này có quyền truy cập vào tất cả các thành phần và tự động áp dụng trình lắng nghe sự kiện cho các thuộc tính dữ liệu.

Các thuộc tính dữ liệu

Cách ưu tiên để sử dụng các thành phần giao diện người dùng tương tác từ Flowbite là thông qua giao diện thuộc tính dữ liệu, cho phép chúng ta thêm chức năng thông qua các thuộc tính phần tử HTML và hầu hết các ví dụ trong tài liệu của chúng tôi áp dụng chiến lược này.

Ví dụ, để cài đặt một thành phần modal, bạn chỉ cần sử dụng data-modal-target và data-modal-{toggle|show|hide} để bật, hiển thị hoặc ẩn thành phần bằng cách nhấp vào bất kỳ phần tử kích hoạt nào.

<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 dark:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
                <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>

Hàm khởi tạo

Bạn cũng có thể sử dụng các hàm khởi tạo để thiết lập trình lắng nghe sự kiện một cách thủ công. Dưới đây là một ví dụ về cách bạn có thể làm điều này với Vue hoặc 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>

Hàm initFlowbite thiết lập tất cả các hàm khởi tạo cho dropdowns, modals, navbars, tooltips và nhiều thứ khác để gắn vào các thuộc tính dữ liệu. Tùy chọn, bạn cũng có thể khởi tạo từng lớp danh mục thành phần riêng biệt với initDropdowns hoặc initModals.

Bạn có thể xem thêm ví dụ bằng cách duyệt qua các thành phần từ Flowbite.

ESM và CJS

Flowbite cũng cung cấp một API để sử dụng các thành phần một cách có chương trình và hỗ trợ cả CJS và ESM cho JavaScript, điều này có thể hữu ích nếu bạn cần mở rộng khả năng mặc định của giao diện thuộc tính dữ liệu và có truy cập vào các hàm gọi lại.

Dưới đây là một ví dụ về cách bạn có thể nhập và tạo một thành phần Modal mới trong JavaScript:

import { Modal } from 'flowbite'

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

const modalOptions = {
    placement: 'bottom-right',
    backdrop: 'dynamic',
    backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-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();

Hãy kiểm tra phần hành vi JavaScript của từng trang thành phần để tìm hiểu cách bạn có thể sử dụng điều này.

TypeScript

Flowbite hỗ trợ khai báo kiểu cho các thành phần giao diện người dùng tương tác bao gồm giao diện đối tượng và kiểu tham số. Hãy kiểm tra các ví dụ sau để tìm hiểu cách bạn có thể sử dụng kiểu với Flowbite.

Ngoài mã trên, chúng ta sẽ nhập một số kiểu liên quan từ gói Flowbite, cụ thể là ModalOptions và ModalInterface:

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

// other code

Nói chung, tất cả các thành phần đều có một định nghĩa giao diện bạn có thể sử dụng khi tạo một đối tượng mới để đảm bảo rằng bạn đang sử dụng đúng kiểu tham số và phương thức.

Khi tạo một modal mới, bạn có thể đặt ModalInterface làm kiểu chính:

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

Flowbite cũng hỗ trợ khai báo kiểu cho đối tượng tùy chọn, vì vậy nếu bạn muốn đặt vị trí của modal dựa trên các kiểu, sau đây là cách bạn có thể làm điều đó:

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

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

Tìm hiểu thêm về Flowbite và TypeScript tại quickstart guide.

Các Framework JavaScript

Cộng đồng mã nguồn mở tuyệt vời cũng đã xây dựng và hiện đang duy trì các thư viện độc lập sau cho React, Vue, Svelte và Angular:

Chúng tôi cũng đã viết hướng dẫn tích hợp cho các framework và thư viện frontend sau:

Các Framework Back-end

Flowbite tích hợp tốt với hầu hết các framework back-end vì nó dựa trên JavaScript thuần:

Các Thành Phần

Cảm ơn!
Flowbite là một bộ sưu tập mã nguồn mở của các thành phần giao diện người dùng được xây dựng bằng các lớp tiện ích từ Tailwind CSS mà bạn có thể sử dụng như một điểm khởi đầu khi lập trình giao diện người dùng và trang web.

Cảnh báo	Huy hiệu	Dấu mảng

Nút	Nhóm nút	Thẻ

Dropdown	Biểu mẫu	Nhóm danh sách

Kiểu chữ	Cửa sổ thoại	Tab

Thanh điều hướng	Trang	Dòng thời gian

Thanh tiến trình	Bảng	Thông báo

Mẹo	Chọn ngày	Spinner

Chân trang	Accordion	Thanh bên

Carousel	Avatar	Đánh giá

Trường nhập	Trường nhập tệp	Trường nhập tìm kiếm

Lựa chọn	Vùng văn bản	Hộp kiểm

Radio	Chuyển đổi	Thanh trượt phạm vi

Nhãn động	Menu Mega	Khung xương

KBD (bàn phím)	Drawer (bảng điều khiển)	Popover

Video	Đầu mục	Đoạn văn

Trích dẫn	Hình ảnh	Danh sách

Liên kết	Văn bản	Đường kẻ ngang (HR)

Điều khiển tốc độ	Bước	Chỉ số

Thanh điều hướng dưới cùng	Biểu ngữ cố định	Thư viện (Masonry)

Jumbotron	Mô phỏng thiết bị