No Result
View All Result
Cloud Reports
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • PC & Laptop
  • Technology & Digital
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • PC & Laptop
  • Technology & Digital
No Result
View All Result
Cloud Reports
No Result
View All Result

Antd Basic – How to use Ant Design components

npn by npn
July 22, 2020
in Ant Design tutorial, React, The Basics, Web development
Reading Time: 3min read
A A
0
Antd Basic – How to use Ant Design components

Through the previous study, you should have completed the scaffolding and understood the basic concepts of React. In this section, we will learn to use the Ant Design component library to create a card component (card).

READ ALSO

Javascript developer should stop for … in for now

Javascript developer should stop for … in for now

December 31, 2020
13
How to display colors (color, bgcolor) in console.log () for javascript developers!

How to display colors (color, bgcolor) in console.log () for javascript developers!

December 29, 2020
9

Introduce Antd

Ant Design is a design system that serves enterprise-level products. The component library is its React implementation. Antd is released as an npm package for developers to install and use.

In umi, you can open the Antd plugin by configuring Antd in the plugin set umi-plugin-react. The Antd plugin will help you import Antd and implement on-demand compilation.

export default {
  plugins: [
    ['umi-plugin-react', {
      antd:true 
    }],
  ],
  // ...
}

If you use our scaffolding, Ant Design already comes with it, otherwise you need to install it yourself.

# The directory where the scaffold is located
$ npm install antd --save

Use antd

In the previous chapters, we have initialized a scaffold based on umi. You can start it in the following ways:

# Actually executed umi dev
$ npm run dev

Open the browser and visit http://localhost:8000/helloworld . You should see hello world displayed.

ADVERTISEMENT

The source code corresponding to this page is here page/helloworld.js, and the existing code is probably as follows.

export default ()=>{  
  return <div>hello world</div>;
}

Next, we start to introduce Ant Design components for this page. First, add a line to the head of the page.

import { Card } from'antd';    

This line of code represents the introduction of the Card component from antd.

Next, change the default hello world output by the module to the following:

export default ()=>{  
  const style = {
    width: '400px',
    margin: '30px',
    boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2)',
    border: '1px solid #e8e8e8',
  };

  return (
    <Card style={style} actions={[<a>Cancel</a>, <a>OK</a>]}>
    </Card>
  );
}

In the above code, we introduced the Card component, and customized its style and the two buttons below. The display effect of the page is as bellow:

Ant design empty card

Next, in <Card> the write internal components of a sub-assembly <Card.Meta>, which is provided by antd, specific API can view the official documentation. The complete code is as follows.

import { Card }from'antd';    

export default ()=>{  
  const style = {
    width: '400px',
    margin: '30px',
    boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2)',
    border: '1px solid #e8e8e8',
  };
  
  return (
    <Card style={style} actions={[<a>Cancel</a>, <a>OK</a>]}>
      <Card.Meta
        avatar={<img 
          alt=""
          style={{ width: '64px', height: '64px', borderRadius: '32px' }}
          src="https://cloudreports.net/wp-content/uploads/2019/07/cloudreports-logo-small.png"
        />}
        title="Cloud Reports"
        description="Developer ideas, tips and stories..."
      />
    </Card>
  );
}
Tags: Ant designant design componentantd card
ShareTweetShare
Previous Post

Hotmail Email Account Sign In, Msn Hotmail Login Mail @Outlook.Com @Hotmail.Com @Live.Com

Next Post

Antd Basic – Controlled and Uncontrolled components

npn

npn

Related Posts

Javascript developer should stop for … in for now
Javascript

Javascript developer should stop for … in for now

December 31, 2020
13
How to display colors (color, bgcolor) in console.log () for javascript developers!
Javascript

How to display colors (color, bgcolor) in console.log () for javascript developers!

December 29, 2020
9
What is Unit Test? Introduction and Example about Unit Test
Web development

What is Unit Test? Introduction and Example about Unit Test

December 24, 2020
6
If you want to learn React JS within 3 months, the following 8 basics must first be known
Javascript

If you want to learn React JS within 3 months, the following 8 basics must first be known

December 22, 2020
5
Accelerate your Continuous Integration pipelines with Directed Acyclic Graph (DAG)
Web development

Accelerate your Continuous Integration pipelines with Directed Acyclic Graph (DAG)

December 22, 2020
3
ReactJs Setup tutorial for Beginner – ReactJs tutorial [P1]
React

Pathway to learn javascript to reactjs

December 21, 2020
10
Next Post

Antd Basic - Controlled and Uncontrolled components

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

No Result
View All Result

Categories

  • Android (1)
  • Ant Design tutorial (7)
  • Javascript (21)
  • Layout and Routing (2)
  • Linux (3)
  • PC & Laptop (41)
  • React (17)
  • SQL (2)
  • Technology & Digital (132)
  • The Basics (5)
  • Web development (38)

Search

No Result
View All Result
No Result
View All Result
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • PC & Laptop
  • Technology & Digital