CloudReports
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • QR Code Scanner
No Result
View All Result
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • QR Code Scanner
No Result
View All Result
CloudReports
No Result
View All Result
Home Ant Design tutorial

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: 3 mins read
0
Antd Basic – How to use Ant Design components
532
VIEWS
Share on FacebookShare on Twitter
Rate this post

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).

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.

ADVERTISEMENT
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.

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
Previous Post

Hotmail Sign in, www.hotmail.com, Hotmail Email Login – Hotmail.com

Next Post

Antd Basic – Controlled and Uncontrolled components

npn

npn

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)
  • App/Game (2)
  • Javascript (16)
  • Layout and Routing (2)
  • Linux (9)
  • PC & LAPTOP (6)
  • PERSONAL FINANCES (1)
  • React (13)
  • SQL (2)
  • TECHNOLOGY & DIGITAL (7)
  • The Basics (5)
  • Web development (37)

Search

No Result
View All Result
  • About Us
  • Documentation
Together We Learn!

© 2021 Cloudreports - Developer ideas, tips and stories...

No Result
View All Result
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • QR Code Scanner

© 2021 Cloudreports - Developer ideas, tips and stories...