Ant Design Info

#react

A relatively new UI library for React has come out which contains an array of components that are useful for building user interfaces. It is called Ant Design. Made by the well known Alibaba conglomerate, it is the second most popular React UI currently, with an emphasis on user-friendly principles. Ant focuses on developer certainty, rather than relying on what component to use and attempts to guide the developer to user-specific components for a task.

How it works
Below will is an example of Ant Design being used in an app.

To install for your application:

$ npm install antd

In src/App.js we have ant buttons, and in App.css we import ant styling for them (add at the top of file) along with spacing:

// App.css
@import '~antd/dist/antd.css';

Button {
  margin: 10px;
}
------------------------------

// App.js

import React from 'react';
import { Button } from 'antd';
import './App.css';

function App() {
  return (
    <div className="App">
      <Button type="primary">Primary</Button>
      <Button type="default">Default</Button>
      <Button type="dashed">Dashed</Button>
      <Button type="link">Link</Button>
    </div>
  );
}

export default App;

Another example (login Form):

Create a file called Antform.js

// Antform.js

import React from 'react';
import { Form, Input, Button, Checkbox } from 'antd';

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};

export const AntForm = () => {
    const onFinish = values => {
        console.log('Success:', values);
    };

    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };

    return (
        <Form
            {...layout}
            name="basic"
            initialValues={{
                remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
        >
            <Form.Item
                label="Username"
                name="username"
                rules={[
                    {
                        required: true,
                        message: 'Please input your username!',
                    },
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="Password"
                name="password"
                rules={[
                    {
                        required: true,
                        message: 'Please input your password!',
                    },
                ]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item {...tailLayout} name="remember" valuePropName="checked">
                <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                    Submit
        </Button>
            </Form.Item>
        </Form>
    );
};

Then import Antform in App.js.

// App.js

import React from 'react';
import { Button } from 'antd';
import './App.css';
import { AntForm } from './Antform';

function App() {
  return (
    <div className="App">
      <Button type="primary">Primary</Button>
      <Button type="default">Default</Button>
      <Button type="dashed">Dashed</Button>
      <Button type="link">Link</Button>
      <AntForm></AntForm>
    </div>
  );
}

export default App;

There are many other options for styling, layout etc for these components that Antform provides. These are just simple examples of this fun and easy to use UI library.

References