What is Ant Design and what are the best components?

In the world of web development there are different ways to carry out the design in our web applications, an alternative is “Ant Design” which is a library that will help us in the construction of our projects through the use of different components.
ReactJs, Angular and VueJs are some of the technologies that have access to this library.
Over time, “Ant Design” has been gaining support from the community thanks to the fact that it is one of the easiest to implement.
Over time, we have used Vortex Software in different projects, in this way some components could be highlighted, which we will divide into categories as in their official documentation.

It is worth clarifying that all the code examples in this post will be used in react

General Components

Button – It is a component whose function is to execute an operation or task.
There are 5 types of buttons (primary, default, dashed, text, link)

Example.

  <Button type=“primary”>Primary Button</Button>

 

Buttons have different ways of implementing them and properties that allow the developer to achieve what they are looking for.

Not only text can be entered to the buttons but also other elements

 

Icons

Example.

     <Button type=“primary” icon={<SearchOutlined />}>

        Search

      </Button>

 

Loading

Example

<Button type=“primary” loading>

          Loading

        </Button>

 

Properties

 

<Button type=“primary” size=”large”>

         Primary

      </Button>

 

      <Button type=“primary” size=”small”>

         Primary

      </Button>

 

Input – It is a text field that allows to obtain the data entry for the user.

 

 

example
<Input placeholder=”Basic Usage” />;

Input Component Uses
Password

 

 

 

 

 

<Input.Password
placeholder=”password”
iconRender={(visible)=>(visible ? <EyeTwoTone/>:<EyeInvisibleOutlined />)}/>

 

Status

 

 

<Input status=”error” placeholder=”Error” />
<Input status=”warning” placeholder=”Warning” />

 

Inputs with loading

 

 

 

<Search placeholder=”input search loading default” loading />

 

TextArea

 

<TextArea showCount maxLength={100} 

style={{ height: 120, marginBottom: 24 }} 

onChange={onChange} placeholder=“can resize” 

/>

 

Modal – It is used to interact with the user to display information through a drop-down pop-up or to perform an action without having to change the page

 

 

 

 

 

 

 

Example

const [isModalOpen, setIsModalOpen] = useState(false);
const showModal = () => {
setIsModalOpen(true);
};
const handleOk = () => {
setIsModalOpen(false);
};
const handleCancel = () => {
setIsModalOpen(false);
};
return(
<>
<Button type=”primary” onClick={showModal}>
Open Modal
</Button>
<Modal title=”Basic Modal” open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
<p>Some contents…</p>
<p>Some contents…</p>
<p>Some contents…</p>
</Modal>
</>
);

 

Table – It is used to display a collection of structured data and some of the functions are:
Sort, paginate, filter data.

 

Example

const columns = [
{
title: ‘Name’,
dataIndex: ‘name’,
key: ‘name’,
},
{
title: ‘Age’,
dataIndex: ‘age’,
key: ‘age’,
},
{
title: ‘Address’,
dataIndex: ‘address’,
key: ‘address’,
},
{
title: ‘Tags’,
key: ‘tags’,
dataIndex: ‘tags’,
},
];
const data = [
{
key: ‘1’,
name: ‘John Brown’,
age: 32,
address: ‘New York No. 1 Lake Park’,
tags: [‘nice’, ‘developer’],
},
{
key: ‘2’,
name: ‘Jim Green’,
age: 42,
address: ‘London No. 1 Lake Park’,
tags: [‘loser’],
},
{
key: ‘3’,
name: ‘Joe Black’,
age: 32,
address: ‘Sidney No. 1 Lake Park’,
tags: [‘cool’, ‘teacher’],
},
];
return <Table columns={columns} dataSource={data} />;

 

Pagination – When a collection of data is too large to display on the page you can split the collection into multiple parts using Pagination, and only one page will load at a time.

 

 

 

Example

const [current, setCurrent] = useState(3);
const onChange = (page) => {
console. log(page);
setCurrent(page);
};
return <Pagination current={current} onChange={onChange} total={50} />;

 

 

Finally, I would like to tell you a little about my experience with this library, which took place during my first project in the company in which we used a large part of the components, such as button, modal, menu, table, pagination, which were of very easy to implement them and their configuration is almost non-existent.