React js / Material UI

Ant Design for React js

May 29, 2022

Ant design 5

Installing ANTD ::
Installation OR create-react-app
Installing CSS ::
import antd.css

Component Docs

The first level navigation is inclined left near a logo, and the secondary menu is inclined right.

Layout
Carousel
Menu
Forms
Grid
Data Table
You Can use these tools into your layout
Icons-Icons
Avatar
Typography
Switch

Menu @ ANTD

import { Menu } from "antd";
import React from "react";

function App() {
return (
<div>

<Menu mode="horizontal" items={[
{label:"Home"},
{label:"About"},
{label:"Services"},
{label:"Contact"},
]}>

</Menu>

</div>
);
}

export default App;

Basic Forms in ANTD

import { Form, Input,Button } from 'antd';
import React from 'react';
import { SearchOutlined } from '@ant-design/icons';

function App() {
return (

<div style={{ width: "250px", margin: "25px" }}>

<Form>

<Form.Item
label="username"
name="username"
>
<Input placeholder="plz enter your name" />
</Form.Item>

<Form.Item
name="email"
label="EMail"
>
<Input placeholder="plz enter your email id" />
</Form.Item>

<Form.Item >
<Button htmlType="submit" icon={<SearchOutlined />}>Submit</Button>
</Form.Item>

</Form>

</div>
);
}

export default App;

Forms, Selection, Checkboxs @ ANTD

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

function App() {

return (
<div>

<Form>
<Form.Item label="Name" name={"myName"}>
<Select
placeholder="select your gender"
options={[
{
label: "male",
value: "male",
},
{
label: "female",
value: "male",
},
]}
/>
</Form.Item>

<Form.Item label="Graduated" name={"graduated"}>
<Checkbox />
</Form.Item>

<Form.Item>
<Button block type="primary" htmlType="submit">
Login
</Button>
</Form.Item>
</Form>

</div>
);
}

export default App;

Form Validation @ ANTD
High performance Form component with data scope management. Including data collection, verification, and styles

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

function App() {

function onfinish(e){
console.log(e)
}

return (

<div style={{ width: "250px", margin: "25px" }}>

<Form onFinish={onfinish}>
<Form.Item
label="username"
name="username"
rules={[
{
required: true,
message: "plz enter your name",
},
{ whitespace: true },
{ min: 6 },
]}
hasFeedback
>
<Input placeholder="plz enter your name" />
</Form.Item>

<Form.Item
name="email"
label="EMail"
rules={[
{
required: true,
message: "plz enter your email id",
},
{
type: "email",
message: "plz enter a valid email id",
},
]}
hasFeedback
>
<Input placeholder="plz enter your email id" />
</Form.Item>

<Form.Item>
<Button htmlType="submit">Submit</Button>
</Form.Item>
</Form>

</div>
);
}

export default App;

Carousel @ ANTD

import { Carousel } from "antd";
import React from "react";

function App() {
return (
<div>
<Carousel autoplay dots={true} dotPosition="right">
<div>
<h2 style={{ lineHeight: "200px", backgroundColor: "red" }}>
Slider One
</h2>
</div>
<div>
<h2 style={{ lineHeight: "200px", backgroundColor: "gray" }}>
Slider One
</h2>
</div>
<div>
<h2 style={{ lineHeight: "200px", backgroundColor: "cyan" }}>
Slider One
</h2>
</div>
</Carousel>
</div>
);
}

export default App;

layout @ ANTD

import React from 'react';
import { Avatar, Layout,Menu } from 'antd';
import Title from 'antd/es/skeleton/Title';
const { Header, Footer, Sider, Content } = Layout;

function App() {
return (
<div>
<Layout>
<Header style={{ backgroundColor: "gray" }}>
<Avatar size="large" icon="user" style={{ float: "right" }} />
<Title style={{ color: "white" }} level={3}>
LOGO
</Title>
</Header>

<Layout style={{ backgroundColor: "cyan" }}>
<Sider style={{ backgroundColor: "blue", height: "250px" }}>
Sider
</Sider>
<Content>Content</Content>
</Layout>

<Footer>Footer</Footer>
</Layout>
</div>
);
}

export default App;

React js / Material UI