Tạo các phần tử tự động thay đổi kích thước với Scalable.js

Nếu bạn cần làm cho các yếu tố linh hoạt tự động điền vào thùng chứa của họ Tôi rất muốn giới thiệu khả năng mở rộng. Tập lệnh JS mã nguồn mở miễn phí này là hoàn hảo để tạo ra một thiết kế trôi chảy mà không có nhiều căng thẳng.

Mọi thứ trong thư viện Scalable.js đều có thể uốn được để bạn có thể thay đổi kiểu dáng, kích thước, vị trí và nội dung bên trong của mọi người. Cần các yếu tố liên kết với đầu hoặc cuối trang? Khả năng mở rộng có các tùy chọn cho điều đó.

Hãy xem qua repo GitHub để tìm hiểu thêm về cách thức hoạt động của nó.

Ở dạng cơ bản nhất, tập lệnh này có một phần tử trang đích cùng với một số tùy chọn để tùy chỉnh màn hình. Đây là một số mã mẫu được lấy thẳng từ GitHub:

var scalable = new Scalable (containerEl, tùy chọn);

Đương nhiên, tham số đầu tiên là bất kỳ yếu tố chứa nào bạn đang nhắm mục tiêu (lý tưởng là

hoặc một cái gì đó tương tự).

Tham số tùy chọn sẽ lấy một mảng các cặp khóa => giá trị. Các tùy chọn này bao gồm giá trị chiều cao của container, chiều rộng tối thiểu và tối đa, cùng với tỷ lệ tối thiểu và tối đa (tức là nó có thể mở rộng bao nhiêu với các yếu tố bên trong).

Có một cái nhìn qua trang dự án chính cho một bản demo có thể sử dụng. Bạn có thể kéo các góc của container để tự động thay đổi kích thước mục linh hoạt bên trong. Điều này khá tuyệt vì bên dưới khu vực đó bạn sẽ tìm thấy mã có thể sử dụng lấy trực tiếp từ trang.

Có nhiều cách để xử lý các yếu tố linh hoạt chỉ với CSS thuần túy. Tuy nhiên, các phương thức này có thể cảm thấy lỗi thời và chúng không cung cấp nhiều quyền kiểm soát như JavaScript.

Nếu bạn muốn dùng thử, chỉ cần lấy một bản sao từ GitHub và xem bạn nghĩ gì.

Khả năng mở rộng vẫn đang được phát triển tích cực nhưng đó là một kịch bản dễ dàng để chỉnh sửa cho nhu cầu của bạn.