Ant Design: Thư viện UI React tốt nhất mà tôi đã từng sử dụng

Giới thiệu ngắn gọn về Ant Design

Ant Design, còn được biết đến với tên là Ant Antdio là một thư viện thành phần cho ReactJS. Nó có nguồn mở bởi một công ty Trung Quốc tên là Ant Ant Design (thuộc sở hữu của Tập đoàn Alibaba). Trong những năm qua, Ant Design đã thu hút được rất nhiều sự chú ý từ cộng đồng nguồn mở với hơn 35 nghìn sao trên GitHub. Mặc dù đến từ Trung Quốc nhưng nhờ có cộng đồng, nó cũng có tài liệu tiếng Anh.

Các tính năng nổi bật của Ant Design:
 . Hỗ trợ hầu hết tất cả các trình duyệt hiện đại (Bao gồm IE 9+)
 . Ngôn ngữ thiết kế cấp doanh nghiệp cho các ứng dụng web
 . Một bộ các thành phần React chất lượng cao ra khỏi hộp
 . Được viết tốt trong Typecript với hệ thống loại hoàn thành

Ant Design Grid + Bố trí hệ thống

Nếu bạn đã làm việc với Bootstrap trước đó, thì bạn sẽ cảm thấy như đang ở nhà với hệ thống lưới của Antdật. Hệ thống lưới của Antd Cảnh dựa trên các hàng và Cols, giống như bất kỳ thư viện UI nào khác. Nhưng thay vì 12 cols, hệ thống lưới của Antd Cảnh phân chia khu vực màn hình của bạn thành 24 cols có thể làm cho khu vực hiển thị của bạn trở nên tùy biến hơn.

Chỉ định máng xối giữa các cols thật dễ dàng:

Không chỉ vậy, hệ thống lưới của Ant Antio cũng hỗ trợ 6 điểm dừng khác nhau để bạn có thể làm cho trang web của mình phản hồi nhanh và trông đẹp trên mọi thiết bị:

Nếu bạn cảm thấy hệ thống lưới là một chi phí nhỏ để bố trí một trang, thì Ant Antio có một hệ thống Bố cục có thể giúp bạn xử lý bố cục tổng thể của trang một cách dễ dàng. Bố cục của Antd Bố trí cung cấp Header, Sider, Content, Footer chỉ là các thành phần bao bọc cho nội dung của bạn để bạn có thể bố trí trang của mình bằng mọi cách bạn có thể tưởng tượng.

Và mã cho hình ảnh trên là:

Một tập hợp các biểu tượng chất lượng cao

Không có gì thay đổi, ngay lập tức, Antd Cảnh đi kèm với một số lượng lớn các biểu tượng có thể đáp ứng bất kỳ yêu cầu ứng dụng nào của bạn. Các biểu tượng của Antden được thiết lập với 2 tùy chọn chính: Các biểu tượng được phác thảo và các biểu tượng Đầy. Họ thậm chí làm việc trên các biểu tượng Tùy chỉnh tại thời điểm viết bài này:

Sử dụng các biểu tượng đó thật dễ dàng như chỉ định biểu tượng nào bạn muốn sử dụng dưới dạng chuỗi:

Hỗ trợ mạnh mẽ cho thành phần Form

Nếu bạn đã làm việc với web, bạn chắc chắn đã làm việc với biểu mẫu. Chúng ta đều biết rằng hình thức là một phần không thể thiếu của web.

Cấm Antd cung cấp cho chúng tôi một thành phần Form là trình bao bọc cho FormItems của bạn. Đối với mỗi FormItem, bạn có thể sử dụng Input, TextArea, Checkbox, Radio hoặc thậm chí Date / TimePicker.

Với phần mềm Antd Cảnh, chúng tôi không còn cần Kiểm soát-Thành phần nữa vì api của nó có thể xử lý việc này cho chúng tôi. Nhưng vũ khí mạnh nhất của hình thức Antd tinh ranh là hệ thống xác nhận của nó. Tất cả bạn phải làm là chỉ định quy tắc cho FormItem của bạn. Ví dụ: loại giá trị phải là chuỗi hoặc số, giá trị tối thiểu hoặc tối đa của số đầu vào hoặc trường này có bắt buộc hay không và thậm chí hoàn thành Quy tắc hoặc quy tắc xác thực tùy chỉnh nào bạn có thể nghĩ đến (Bao gồm xác thực không đồng bộ với phía máy chủ). Nếu FormItem đã không thực hiện bất kỳ quy tắc xác thực nào của bạn, sẽ có thông báo nhắc nhở và trạng thái xác thực.

Thành phần phản hồi toàn cầu

Hãy tưởng tượng nếu ứng dụng của bạn có thể cung cấp thông báo tức thì cho các hành động của người dùng giống như trên Facebook khi ai đó gắn thẻ bạn vào trạng thái? Bạn có thể dễ dàng đạt được điều này với Thông báo Antd, Tin nhắn và nhiều thành phần Phản hồi khác. Đây là cách nó trông:

Ant Design, theo tôi, là một trong những thư viện UI React tốt nhất trong số đó có thể so sánh với thư viện UI của Google Material cho React. Hãy đọc các tài liệu để tìm hiểu thêm những điều thú vị về nó và HAPPY CODING !!!!