<>Dividers là các đường hoặc không gian giúp phân tách nội dung trong giao diện người dùng, tạo sự rõ ràng và tổ chức bố cục hợp lý.
/Các loại Dividers phổ biến
📌 1. Horizontal Dividers (Đường phân tách ngang)
– Chia các phần nội dung theo chiều ngang.
Dùng cho:
– Phân tách giữa các mục trong danh sách (menu, settings).
– Ngăn cách nội dung trong card, section.
– Ví dụ: Đường kẻ giữa các bài đăng trên Facebook.
📌 2. Vertical Dividers (Đường phân tách dọc)
– Chia nội dung theo chiều dọc, thường dùng trong bố cục nhiều cột.
Dùng cho:
– Dashboard, bảng điều khiển.
– Layout có nhiều cột thông tin.
– Ví dụ: Đường phân cách giữa sidebar và nội dung chính trong admin pan
📌 3. Text Dividers (Divider có nội dung chữ)
– Kết hợp một đường phân cách với tiêu đề hoặc nội dung.
Dùng cho:
– Chia nhóm nội dung trong form hoặc danh sách.
– Ví dụ: “Hoặc đăng nhập bằng” trong form login.
📌 4. Spacing Dividers (Khoảng cách thay cho đường kẻ)
– Không sử dụng đường kẻ mà dùng khoảng trắng để phân tách.
Dùng cho:
– Giao diện tối giản, tránh quá nhiều đường kẻ gây rối mắt.
– Ví dụ: Khoảng cách giữa các bài đăng trên Instagram.
/Best Practices khi sử dụng Dividers
✅ Sử dụng hợp lý – Chỉ thêm dividers khi cần thiết để tránh giao diện bị rối.
✅ Dùng màu sắc nhẹ – Không nên quá nổi bật, thường dùng màu xám nhạt (#E0E0E0) hoặc độ mờ thấp.
✅ Ưu tiên khoảng trắng thay vì quá nhiều đường kẻ – Khoảng trắng giúp UI thoáng hơn.
✅ Đồng bộ độ dày và chiều dài – Giữ sự thống nhất về kích thước trong cả hệ thống UI.
