Forge Dialog … Tính năng Tuỳ biến Ví dụ Hỏi đáp Demo Tài liệu GitHub EN VI

Mã nguồn mở · Giấy phép MIT · Không phụ thuộc lúc chạy

Hộp thoại biết cư xử.

Forge Dialog là thư viện hộp thoại TypeScript không phụ thuộc, xây trên phần tử <dialog> của trình duyệt. Dễ tiếp cận từ đầu, tuỳ biến được tới từng thành phần, và nhẹ tới mức bản chỉ có alert vẫn dưới 6 KB sau gzip.

Đọc tài liệu
npm install forgedialog

Bạn nhận được gì

Mọi thứ dưới đây đều nằm trong gói đã phát hành — không plugin phải cài, không peer dependency phải thoả mãn.

Dễ tiếp cận từ đầu

Tiêu điểm được giữ trong hộp thoại rồi trả về chỗ cũ, Escape và click nền đã nối sẵn, vai trò ARIA được đặt giúp bạn. Bộ dò tiêu điểm bỏ qua những phần tử chỉ trông như nhận được tiêu điểm.

Tạo kiểu theo từng thành phần

Màu và độ mờ riêng cho nền, tiêu đề, nội dung, và viền. Bo góc theo từng góc. Đổ bóng ghép từ góc chiếu, khoảng cách, độ nhoè, và độ đậm.

Hover, kéo thả, và cử chỉ

Đổi kiểu khi hover (tự chọn bật) kèm nhấc lên và phóng to. Hộp thoại kéo được, có khoá trục, giới hạn vùng, di chuyển bằng bàn phím, và nhớ vị trí. Bottom sheet vuốt để đóng.

Nhiều hơn alert

Drawer, bottom sheet, lightbox, trạng thái tải, toast, bảng lệnh, và wizard phân nhánh có lưu trạng thái — tất cả từ cùng một lõi.

Kích thước trung thực

Các điểm vào tree-shake được, có hạn mức gzip bắt buộc. Import forgedialog/alert thì bạn trả cho một alert, không phải cả thư viện.

Hợp với stack của bạn

ESM, CJS, và biến toàn cục cho trình duyệt, kèm adapter cho React, Vue, Svelte, và Web Components. Có kiểu đầy đủ, an toàn với SSR, và chạy sạch dưới CSP nghiêm ngặt.

Bảng tuỳ biến

Đổi bất cứ thứ gì bên dưới và hộp thoại đổi kiểu ngay. Đoạn mã cập nhật theo — chép nó là bạn có đúng hộp thoại đó trong ứng dụng của mình.

Ví dụ

The everyday calls. Each returns a promise, so there is no callback nesting.

Thay thế hàm dựng sẵn của trình duyệt

import { alert, confirm, prompt } from 'forgedialog';
import 'forgedialog/style.css';

await alert('Saved successfully.', { title: 'Success' });

const ok = await confirm('Delete this item?');

const name = await prompt('What is your name?', {
  validate: (value) => value.trim() ? true : 'Name is required',
});

Tự dựng hộp thoại

import { open } from 'forgedialog';

const dialog = open({
  title: 'Custom dialog',
  content: (container) => container.append(renderForm()),
  buttons: [
    { text: 'Cancel', onClick: (i) => i.close(null) },
    { text: 'Save', role: 'primary', onClick: (i) => i.close(read()) },
  ],
});

const result = await dialog.whenClosed();

Chỉ trả cho phần bạn dùng

// Just an alert, and nothing else.
import { alert } from 'forgedialog/alert';
import 'forgedialog/style/core.css';

// Opt into the richer appearance options on a focused entry.
import 'forgedialog/appearance';

Ngoài hộp thoại

import { drawer, toast, wizard } from 'forgedialog';

// A duration of 0 keeps the toast until dismiss() is called.
const upload = toast('Uploading…', { duration: 0 });

drawer({ title: 'Settings', side: 'right', content: renderSettings });

const data = await wizard({ steps }).result;

Tóm tắt nhanh

Bản ngắn gọn, thuần dữ kiện — các con số lấy từ hạn mức kích thước được kiểm tra ở mỗi pull request.

Tên Forge Dialog
Gói npm forgedialog
Giấy phép MIT
Phụ thuộc lúc chạy Không có
Kích thước ≈15 KB sau gzip cho bản đầy đủ; ≈5.5 KB cho bản chỉ có alert
Viết bằng TypeScript, có kiểu cho cả ESM lẫn CommonJS
Trình duyệt Chrome/Edge 88+, Firefox 78+, Safari 15.4+
Node.js 20 trở lên, cho công cụ đóng gói và import phía máy chủ
Framework Chạy độc lập; có adapter cho React, Vue, Svelte, và Web Components
Mã nguồn github.com/cmm-cmm/ForgeDialog

Câu hỏi thường gặp

Forge Dialog là gì?

Forge Dialog là thư viện TypeScript mã nguồn mở để dựng hộp thoại trên web: alert, confirm, prompt, drawer, bottom sheet, lightbox, trạng thái tải, toast, bảng lệnh, và wizard nhiều bước. Nó không có phụ thuộc lúc chạy và được phát hành trên npm với tên forgedialog.

Forge Dialog nặng bao nhiêu?

Bản đầy đủ khoảng 15 KB sau gzip. Ứng dụng chỉ import forgedialog/alert thì chỉ tốn khoảng 5,5 KB sau gzip, vì mọi điểm vào đều tree-shake được và đều có hạn mức kích thước được kiểm tra tự động ở mỗi pull request.

Forge Dialog có cần framework không?

Không. Nó chạy độc lập bằng JavaScript thuần, và có sẵn adapter cho React, Vue, Svelte, và Web Components nếu bạn muốn dùng.

Forge Dialog có dễ tiếp cận không?

Có. Nó dùng phần tử <dialog> của trình duyệt, giữ tiêu điểm bên trong hộp thoại rồi trả về phần tử đã mở nó, xử lý Escape và click nền, và tự đặt role="dialog" hoặc role="alertdialog" tuỳ loại.

Nó khác gì window.alert, confirm, và prompt?

Các hàm dựng sẵn của trình duyệt chặn luồng chính, không tạo kiểu được, và chỉ có ba hình dạng cố định. Forge Dialog trả về promise thay vì chặn, tạo kiểu được tới từng thành phần, và còn có drawer, bottom sheet, biểu mẫu, và wizard.

Có tuỳ biến được giao diện không?

Có. Màu và độ mờ đặt riêng cho nền, tiêu đề, nội dung, và viền; bo góc theo từng góc; đổ bóng ghép từ góc chiếu, khoảng cách, độ nhoè, và độ đậm; cùng hiệu ứng hover tự chọn có nhấc lên và phóng to.

Hỗ trợ những trình duyệt và môi trường nào?

Chrome và Edge 88+, Firefox 78+, Safari 15.4+, cùng Node.js 20 trở lên cho công cụ đóng gói và import phía máy chủ. Bản build không chứa eval hay new Function, nên chạy được dưới Content Security Policy nghiêm ngặt.

Forge Dialog có dùng thương mại miễn phí không?

Có. Forge Dialog phát hành theo giấy phép MIT, cho phép dùng thương mại, sửa đổi, và phân phối lại.

Forge Dialog so với SweetAlert2 và Bootstrap modal thì thế nào?

Forge Dialog xây trên phần tử <dialog> của trình duyệt, nên việc giữ tiêu điểm, lớp trên cùng, và vô hiệu hoá nền là do nền tảng lo chứ không phải JavaScript. Nó không có phụ thuộc lúc chạy, trong khi Bootstrap modal cần CSS và JavaScript của Bootstrap. Mọi điểm vào đều tree-shake được, nên ứng dụng chỉ cần alert chỉ tốn khoảng 5,5 KB sau gzip thay vì cả thư viện. Nó viết bằng TypeScript và có kiểu cho cả ESM lẫn CommonJS.