Share Thiết kế các thành phần website chuyên nghiệp với thư viện Mavo

[filiallion]

Language

Tiếng Việt

Hiện nay đã có nhiều thư viện giúp cho các bạn lập trình viên thiết kế, lập trình giao diện website một cách chuyên nghiệp hơn, một trong số đó phải kể đến đó là React, Angular,... Mặc dù React hay Angular đều rất mạnh trong việc lập trình front-end nhưng không phải tất cả các bạn đều có thể sử dụng tốt hoặc trường hợp không cần thiết phải sử dụng cả một bộ framework nặng nề thì các bạn có thể sử dụng cách thiết kế theo cách thông thường. Hiện nay có nhiều thư viện như vậy, ví dụ như Bootstrap, UIkit, Metro... và bài viết này tôi giới thiệu với các bạn một bộ thư viện mạnh mẽ khác đó chính là Mavo.

Thư viện Mavo mô phong cách sử dụng khá giống với Angular nhưng thực tế nó hoạt động hoàn toàn khác, các bạn chỉ việc khai báo các giá trị trong các thuộc tính HTML với các thành phần kèm theo là có thể tạo ra một thành phần web với tính năng cao cấp mà không cần phải viết mã lệnh JavaScript hay CSS gì thêm. Để rõ ràng hơn, các bạn có thể tham khảo ví dụ mà tôi sẽ trình bày với các bạn sau đây nhưng trước tiên các bạn cần phải tải về bộ thư viện Mavo tại địa chỉ https://github.com/mavoweb/mavo và tích hợp vào website với nội dung mã lệnh HTML như sau:

<link href="path/to/mavo.css" rel="stylesheet">
<script src="path/to/mavo.min.js"></script>

Bây giờ, tôi sẽ tạo thành phần slider đơn giản như sau:

<p>Giá trị: [strength]/100</p>
<input type="range" property="strength" title="[strength]%">

Các bạn thử chạy ví dụ trên với thư viện Mavo thì sẽ thấy được thành phần slider hoặc các bạn có thể tìm hiểu thêm về thư viện Mavo tại địa chỉ https://mavo.io/docs.