English
VietnameseTailwind 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.
1 / 12
Mùa hoa dại nở rộ cao nguyên
Mùa hoa dại nở rộ cao nguyên - Ảnh chụp bởi Lê Giang. Thể loại: #Thiên nhiên
Bình minh rực rỡ ven bờ biển
Bình minh rực rỡ ven bờ biển - Ảnh chụp bởi Tuấn Nguyễn. Thể loại: #Phong cảnh
Thác nước đại ngàn
Thác nước đại ngàn - Ảnh chụp bởi Minh Trí. Thể loại: #Thiên nhiên
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.
1 / 8
Ánh sáng tự nhiên và cảm xúc
Ánh sáng tự nhiên và cảm xúc (800x1200px). Tác giả: Thu Hà. Lượt yêu thích: 928
Bình minh rực rỡ ven bờ biển
Bình minh rực rỡ ven bờ biển (1200x800px). Tác giả: Tuấn Nguyễn. Lượt yêu thích: 342
Thác nước đại ngàn
Thác nước đại ngàn (800x1200px). Tác giả: Minh Trí. Lượt yêu thích: 512
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 đó.