This is my fourth day of the August Challenge

1. Install

Very simple NPM installation package can be used.

Command:

NPM install ANTd -- Save or yarn add ANTdCopy the code

The dependencies can be found in the package.json file, the latest version is 4.16.10

2. Introduce the button component

First, you need to introduce the Ant Design style

import "antd/dist/antd.css";
Copy the code

Next we need to introduce the button component that we want to use (this is a deconstructive way of writing)

import { Button } from "antd";
Copy the code

We can jump into the antD source code by clicking “antd” and holding down the CTRL key

Click on “Button” in the same way, and you can see how it’s written layer by layer. Take a look if you want to dig deeper.

3. The button

To generate different Button styles, set Button properties in the following order: type -> shape -> size -> Loading -> Disabled.

3.1 type

There are seven:

  • Default: you can not write the type attribute, the default style. The background is white, the text is black, and the mouseover changes the border and the text to blue.
  • Primary: Blue background, text white.
  • Err: Unlike default, the border is dotted
  • Text: Black with no background.
  • Link: The text is blue with no background. Used for clicking text jump
  • Ghost: Although it is a type but different from above, type=”ghost” invalid. I need to tell ghost to write the properties<Button ghost>The ghost button inverts the content of the button and makes the background transparent. It is usually used on a colored background. It can also be used with other types.
  • Danger: In other style frameworks (such as elementUI) it is a type of type, but the color is red. However, it is treated as an attribute in Ant Design. But I also put it in type,<Button danger>

import { Button } from 'antd'; 
ReactDOM.render( 
<> 
    {/* primary */}
    <Button type="primary">Primary Button</Button> 
    {/* default */}
    <Button>Default Button</Button> 
    {/* dashed */}
    <Button type="dashed">Dashed Button</Button> <br /> 
    {/* text */}
    <Button type="text">Text Button</Button> 
    {/* link */}
    <Button type="link">Link Button</Button> 
    
</>, mountNode, );
Copy the code

    <Button type="primary" ghost>Primary</Button>
    <Button ghost>Primary</Button>
    <Button type="dashed" ghost>dashed</Button>
Copy the code

  <Button type="primary" danger> Primary </Button> 
  <Button danger>Default</Button> 
  <Button type="dashed" danger> Dashed </Button> 
  <Button type="text" danger> Text </Button> 
  <Button type="link" danger> Link </Button>
Copy the code

3.2 shape

  • The default is rectangle
  • Circle is the circle
  • Round Rectangle

<Button>Default</Button>
<Button type="primary" shape="round">Round</Button> 
<Button type="primary" shape="circle">Circle</Button> 
Copy the code

3.3 the size

  • Small: small
  • Do not write: default
  • Large:

<Button size="small">Small</Button>
<Button >Default</Button>
<Button size="large">Large</Button>
Copy the code

3.4 Button Icon

This is the use of ICONS

See another article for the use of ICONS

SearchOutlined is a search icon 🔍

import { SearchOutlined } from '@ant-design/icons';
Copy the code

You can add an icon property to a Button or write an icon inside a Button (which controls the position of the icon)

 <Button icon={<SearchOutlined/>} ><Button><SearchOutlined/></Button>
Copy the code

3.5 Disable Button Disabled

<Button type="dashed" disabled> Dashed(disabled) </Button>
Copy the code

3.6 the Block button

Is to fit the size of the parent element

<Button type="primary" block> Primary </Button>
Copy the code

3.7 loading button

Loading The default value is true and can be true or false

<Button type="primary" size="small" loading> Loading </Button>
<Button type="primary" size="small" loading={true}> Loading </Button>
<Button type="primary" size="small" loading={false}> Loading </Button>
Copy the code

4. Official website code

4.1 Click the large, Default and Small buttons to change the size of all buttons


import { Button, Radio } from 'antd';
// The imported icon
import { DownloadOutlined } from '@ant-design/icons';

class ButtonSize extends React.Component {
  // Define the variable size in state to change the size of the button
  state = {
    size: 'large'};/ / change the size
  handleSizeChange = e= > {
    this.setState({ size: e.target.value });
  };

  render() {
    You don't need to write this.state.size to use size below
    const { size } = this.state;
    return (
      <>{/* when placed in a group of radio buttons, only one button can be clicked onChange */}<Radio.Group value={size} onChange={this.handleSizeChange}>
          <Radio.Button value="large">Large</Radio.Button>
          <Radio.Button value="default">Default</Radio.Button>
          <Radio.Button value="small">Small</Radio.Button>
        </Radio.Group>
        <br />
        <br />{/* the size attribute of the button below is this variable. When the button is clicked, the size variable changes, and the property changes */}<Button type="primary" size={size}>
          Primary
        </Button>
        <Button size={size}>Default</Button>
        <Button type="dashed" size={size}>
          Dashed
        </Button>
        <br />
        <Button type="link" size={size}>
          Link
        </Button>
        <br />
        <Button type="primary" icon={<DownloadOutlined />} size={size} />
        <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
        <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
        <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
          Download
        </Button>
        <Button type="primary" icon={<DownloadOutlined />} size={size}>
          Download
        </Button>
      </>
    );
  }
}
ReactDOM.render(<ButtonSize />, mountNode);
Copy the code

4.2 Click the button to load, six seconds after the end


import { Button } from 'antd';
import { PoweroffOutlined } from '@ant-design/icons';

class App extends React.Component {
  // Store three button states, so it's an array
  state = {
    loadings: [],}; enterLoading =index= > {
    this.setState(({ loadings }) = > {
      // Update the newLoadings value
      const newLoadings = [...loadings];
      // Change the value of newLoadings based on index
      newLoadings[index] = true;

      return {
        loadings: newLoadings,
      };
    });
    // Delay execution for six seconds
    setTimeout(() = > {
      SetState changes the value of loadings
      this.setState(({ loadings }) = > {
        const newLoadings = [...loadings];
        newLoadings[index] = false;

        return {
          loadings: newLoadings,
        };
      });
    }, 6000);
  };

  render() {
    const { loadings } = this.state;
    return (
      <>{/* loading is the first value of the loadings array.<Button type="primary" loading={loadings[0]} onClick={()= > this.enterLoading(0)}>
          Click me!
        </Button>
        <Button
          type="primary"
          icon={<PoweroffOutlined />}
          loading={loadings[1]}
          onClick={() => this.enterLoading(1)}
        >
          Click me!
        </Button>
        <Button
          type="primary"
          icon={<PoweroffOutlined />}
          loading={loadings[2]}
          onClick={() => this.enterLoading(2)}
        />
      </>
    );
  }
}

ReactDOM.render(<App />, mountNode);
Copy the code