[Front-End] Cùng tìm hiểu về Ant Design, một thư viện đắc lực của Front-End

Trong quá trình phát triển ứng dụng trên máy tính, thiết kế và xử lý giao diện đa số phức tạp và đa dạng, gây khó khăn cho nhà thiết kế và lập trình viên. Đội ngũ Ant UED đã ra mắt Ant Design – một thư viện thiết kế giao diện dành cho ứng dụng, nhằm nhất quán hóa giao diện người dùng và giảm thời gian triển khai ý tưởng.

Công năng chính của Ant Design

Ant Design cung cấp một đánh giá thực tế về các thiết kế đẹp cho cả các nhà thiết kế và người dùng. Đồng thời, nó xây dựng một nền tảng với nguyên tắc và mẫu thiết kế nhằm đưa ra hướng dẫn và giải pháp chung cho thiết kế.

Bạn đang xem: [Front-End] Cùng tìm hiểu về Ant Design, một thư viện đắc lực của Front-End

Sự tự nhiên

Thiết kế tự nhiên ảnh hưởng đến hành vi của người dùng, vì vậy nhà thiết kế cần áp dụng nguyên tắc này vào công việc hàng ngày. Ant Design tập trung vào việc tạo ra trải nghiệm sản phẩm tốt hơn thông qua việc tinh chỉnh các quy luật thiết kế khách quan và áp dụng chúng vào giao diện.

Sự chắc chắn

Xem thêm : Cách theo dõi lịch sử duyệt web của người dùng chung qua WiFi cực dễ

Ant Design giúp nhà thiết kế tạo ra các sản phẩm chất lượng cao, phù hợp với nhu cầu doanh nghiệp. Đồng thời, nó tạo ra sự linh hoạt và ổn định cho giao diện người dùng bằng cách áp dụng các quy tắc thiết kế và tóm lược chúng thành các “đối tượng”. Điều này giúp giảm bớt sự chủ quan và không ổn định của hệ thống.

Sử dụng Ant Design

Ant Design dễ dàng sử dụng trong ứng dụng React bằng cách import các component. Ví dụ: để sử dụng Layout component của Ant Design, bạn chỉ cần import như sau:

import { Layout, Menu, Icon } from 'antd';
const { Header, Sider, Content } = Layout;

class SiderDemo extends React.Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }

  render() {
    return (
      
        
          

          
            
              
              nav 1
            
            
              
              nav 2
            
            
              
              nav 3
            
          
        
        
          

            
          
          
            Content
          
        
      
    );
  }
}

ReactDOM.render(, mountNode);

Ant Design Grid + Hệ thống layout

Ant Design cung cấp hệ thống grid tương tự bootstrap, nhưng chia thành 24 cột thay vì 12. Điều này giúp giao diện trở nên linh hoạt hơn.

import { Row, Col } from 'antd';

ReactDOM.render(
  

    
      col-12
      col-12
    
    
      col-8
      col-8
      col-8
    
    
      col-6
      col-6
      col-6
      col-6
    
  
,
  mountNode,
);

Sử dụng npm hoặc yarn

npm install antd -save

yarn add antd

Tạo form với Ant Design

Xem thêm : 1.1.1.1 là gì? Nó tăng tốc Internet và bảo mật dữ liệu như thế nào khi duyệt web?

Ant Design cung cấp các component giúp tạo form như Input, TextArea, Checkbox, Radio, DatePicker và nhiều hơn nữa. Bạn cũng có thể tạo validation linh hoạt cho form thông qua Ant Design.

Feedback Component

Nếu ứng dụng của bạn cần hiển thị thông báo cho các hành động của người dùng, Ant Design cung cấp các component như Alert, Message, Notification và nhiều hơn nữa.

Ant Design là một thư viện UI React tuyệt vời, có thể sánh ngang với Google Material UI. Hãy tham khảo tài liệu tại https://ant.design/ để tìm hiểu thêm về Ant Design.

Nguồn: https://ispacedanang.edu.vn
Danh mục: Học tập