Skip to main content

Introduction to Ant Design

ant design

Introduction

In a discussion about top frontend design languages, Material Design by Google is one of the most popular contenders for the favorite spot, but there is a close, maybe lesser-known, competitor, that is Ant Design. With some of the big players in their respective industries like Alibaba, Tencent, Baidu all using Ant Design, let’s explore some of the key features that make Ant Design special compared to others.

The design principles of Ant Design

Ant design, according to its own design values page, focusses on a user experience that is:
  • Natural — a visual interaction that is devoid of complexity and feels natural to use
  • Certain —  establish design rules such that it avoids low-efficiency & difficult-to-maintain products
  • Meaningful —  design interfaces keeping the needs of the end-user in mind
  • Growing — design interfaces that improve the discoverability of functions and values of the product

Strongly opinionated

While providing guides on most of the styling needs for user interface design like colors, layout, font, icons, Ant Design also lays down certain best practices with respect to several visual design principles and clearly marks out the good from the badones. Here are a couple of examples from their reference docs:

Text alignment

alignment

Contrast

contrast

Iconography & typography

Ant Design also provides full-fledged in-house support for iconsand typography and it’s quite easy to incorporate in the project too. For instance, in order to use the provided icons in your project, all that needs to be done is:
npm install --save @ant-design/icons
to install the icon pack:
import { HomeOutlined } from '@ant-design/icons'
ReactDOM.render(<div><HomeOutlined /></div>, mountNode);

Layout support

Ant Design provides its own alternatives to CSS Flexbox implementation for laying out UI items and to maintain a fluid and responsive user interface. For the same purpose, Ant Design provides row and column components that can be used as alternatives to equivalent divs with flex-direction row and column respectively. For managing size, it accepts a span prop similar to what Bootstrap does:
<Row>
  <Col span={12}>col-12</Col>
  <Col span={12}>col-12</Col>
</Row>
In addition to that, Ant design provides some of the most common layouts, with Navigation Bar, Side Menu, BreadCrumbs, and the main layout area (with different styles) as standard boilerplate that one can use straight away in the project. For example, the layout below can be easily achieved by copying the boilerplate code from their official docs page.

Extensive component support

 Common components

Some of the most widely used form elements are of course available for use with a huge variety of customization options. Here are a few examples along with the code to create generic versions of them.

Text input

text input 
// component code
<Input 
  size="large" 
  value={this.state.inputVal}
  placeholder="large size"
  onChange={(e) => this.setState({ inputVal: e.target.value })}
  prefix={<UserOutlined />} // prefixes the user image at the beginning
/>

Checkbox

check box

// on change handler
onChange = e => {
  this.setState({
    checked: e.target.checked,
  });
};
// checkbox component
<Checkbox
checked={this.state.checked}
disabled={this.state.disabled} // can be managed via state independently
onChange={this.onChange}
>
{label}
</Checkbox>

Radio buttons

radio buttons
// on change handler
onChange = e => {
  this.setState({
    value: e.target.value,
  });
};

// radio component, manage the ‘disabled’ boolean separately
<>
  <Radio value={1} disabled={this.state.disabled}>
    Value 1
  </Radio>
  <br />
  <Radio value={2} disabled={this.state.disabled}>
    Value 2
  </Radio>
</>

Slider

slider
// on change handler
onChange = value => {
  this.setState({
    inputValue: value,
  });
};

// slider component
<Slider
  min={1} // define a range
  max={20}
  disabled={this.state.disabled} // manage ‘disabled’ separately 
  onChange={this.onChange}
  value={typeof inputValue === 'number' ? inputValue : 0}
/>
And, the best part is, all the code for using any variation of these components is available on the same page. You can easily access it by clicking the <> button like so:
select

Compound components

In addition to the basic components mentioned above, there is also a broad range of compound components that Ant Design provides, which supports rapid prototyping and development. These are the components which are widely used in modern user interfaces but take quite an effort to code from scratch. Here are some examples along with Ant Design equivalent code:

Comment

comment
<Comment
  actions={actions} // the action button settings
  author={<a>Han Solo</a>} // the name of comment author
  avatar={
    <Avatar src="source_for_avatar.png" alt="Han Solo"/>
  }
  content={// content here} // main comment
/>

Card

cards

<div className="site-card-border-less-wrapper"> // the css class
  <Card title="Card title" bordered={false} style={{ width: 300 }}>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </Card>
</div>

 Carousel

carousel
// Carousel with autoplay enabled
<Carousel autoplay> 
  <div>
    <h3>1</h3>
  </div>
  <div>
    <h3>2</h3>
  </div>
  <div>
    <h3>2</h3>
  </div>
</Carousel>

Timeline

timeline
<Timeline>
  <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
  <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
  <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
  <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>

React support & documentation

The Ant design framework is designed from the ground up keeping in mind the React methodologies. All the components mentioned above have direct support for incorporation with React components available. Also, support for other popular frameworks like Angular and Vue are being developed by the community.

Comments

Post a Comment

Popular posts from this blog

4 Ways to Communicate Across Browser Tabs in Realtime

1. Local Storage Events You might have already used LocalStorage, which is accessible across Tabs within the same application origin. But do you know that it also supports events? You can use this feature to communicate across Browser Tabs, where other Tabs will receive the event once the storage is updated. For example, let’s say in one Tab, we execute the following JavaScript code. window.localStorage.setItem("loggedIn", "true"); The other Tabs which listen to the event will receive it, as shown below. window.addEventListener('storage', (event) => { if (event.storageArea != localStorage) return; if (event.key === 'loggedIn') { // Do something with event.newValue } }); 2. Broadcast Channel API The Broadcast Channel API allows communication between Tabs, Windows, Frames, Iframes, and  Web Workers . One Tab can create and post to a channel as follows. const channel = new BroadcastChannel('app-data'); channel.postMessage(data); And oth...
Post a Comment
Read more

Certbot SSL configuration in ubuntu

  Introduction Let’s Encrypt is a Certificate Authority (CA) that provides an easy way to obtain and install free  TLS/SSL certificates , thereby enabling encrypted HTTPS on web servers. It simplifies the process by providing a software client, Certbot, that attempts to automate most (if not all) of the required steps. Currently, the entire process of obtaining and installing a certificate is fully automated on both Apache and Nginx. In this tutorial, you will use Certbot to obtain a free SSL certificate for Apache on Ubuntu 18.04 and set up your certificate to renew automatically. This tutorial will use a separate Apache virtual host file instead of the default configuration file.  We recommend  creating new Apache virtual host files for each domain because it helps to avoid common mistakes and maintains the default files as a fallback configuration. Prerequisites To follow this tutorial, you will need: One Ubuntu 18.04 server set up by following this  initial ...
Post a Comment
Read more

Working with Node.js streams

  Introduction Streams are one of the major features that most Node.js applications rely on, especially when handling HTTP requests, reading/writing files, and making socket communications. Streams are very predictable since we can always expect data, error, and end events when using streams. This article will teach Node developers how to use streams to efficiently handle large amounts of data. This is a typical real-world challenge faced by Node developers when they have to deal with a large data source, and it may not be feasible to process this data all at once. This article will cover the following topics: Types of streams When to adopt Node.js streams Batching Composing streams in Node.js Transforming data with transform streams Piping streams Error handling Node.js streams Types of streams The following are four main types of streams in Node.js: Readable streams: The readable stream is responsible for reading data from a source file Writable streams: The writable stream is re...
Post a Comment
Read more