Tailwind CSS v4 & SSR Zero-CLSBase UI & Ark UI Compatible

Photo Album

Bộ thành phần trưng bày bộ sưu tập ảnh chuyên nghiệp với 3 thuật toán bố cục hàng đầu (Rows Dynamic Programming DAG, Columns Balanced Partition, Masonry Waterfall), cơ chế SSR Container Queries chống giật CLS triệt để, và khả năng tích hợp trơn tru với Lightbox.

Interactive Playground

Tùy biến trực tiếp bố cục, khoảng cách và trải nghiệm nhấp mở Lightbox toàn màn hình.

Khoảng cách (Spacing): 16px

Đệm ảnh (Padding): 0px

Chiều cao hàng: 240px

Số lượng ảnh: 12 ảnh

Tích hợp Lightbox Trình chiếu Toàn màn hình

Chỉ với prop `onClick`, mỗi bức ảnh trong album liên kết tự nhiên với `Lightbox` để zoom, vuốt chuyển ảnh, phát slideshow và duyệt thumbnails.

SSR Zero-CLS với CSS Container Queries

Component <SSR breakpoints=3006009001200> sinh các khối layout HTML sẵn từ server kèm quy tắc @container(min-width: ...). Trình duyệt hiển thị ngay lập tức theo đúng kích thước khung chứa mà không cần đợi JavaScript tải về (Zero Layout Shift).

Custom Renderers & Lớp phủ Thông tin (Extras)

Sử dụng prop render.photo hoặc render.extras để thêm các huy hiệu (Badge), nút tương tác (Like, Download, View) và thông tin tác giả lên từng ảnh.

So sánh Bố cục: Columns (Cân bằng) vs Masonry (Thác nước)

Columns sử dụng quy hoạch động phân hoạch để cân bằng tối ưu tổng chiều cao giữa các cột, trong khi Masonry xếp ảnh theo thứ tự xuất hiện vào cột ngắn nhất.

Columns (Balanced Partition)3 cột cân bằng

Masonry (Shortest Column First)3 cột thác nước

Infinite Scroll & Tái sử dụng DOM (Offscreen)

Tải thêm từng lô ảnh mượt mà khi cuộn xuống với <InfiniteScroll />, kèm cơ chế <Offscreen /> giúp giải phóng bộ nhớ DOM khi phần tử cuộn ra ngoài tầm nhìn.

Infinite Scroll + Lightbox Toàn màn hình

Kết hợp <InfiniteScroll /> với <Lightbox />. Nhấp vào bất kỳ ảnh nào để mở trình chiếu toàn màn hình — bao gồm cả ảnh từ các lô đã tải trước đó.

Notifications

Photo Album

Interactive Playground

Mùa hoa dại nở rộ cao nguyên

Bình minh rực rỡ ven bờ biển

Thác nước đại ngàn