Ant Design 按钮和图标的使用

这是我参与8月更文挑战的第四天 活动详情查看：8月更文挑战

1.安装

很简单npm安装一下包就可使用。

命令：

npm install antd --save
 或
 yarn add antd
复制代码

在package.json文件中能够找到对应的依赖，最新版本是4.16.10

2.引入按钮组件

首先须要引入Ant Design 的样式

import "antd/dist/antd.css";
复制代码

接下来咱们须要引入咱们想用到的按钮组件（这是一种解构的写法）

import { Button } from "antd";
复制代码

咱们点击 "antd"而且按住ctrl键，就能跳入antd的源码中

一样的方法继续点击 “button”，就能一层一层看到具体是怎么写的。若是想深刻了解能够看一看。

3.按钮

经过设置 Button 的属性来产生不一样的按钮样式，推荐顺序为：type -> shape -> size -> loading -> disabled。

3.1 type

有七种：

• default ：能够不写type属性，默认的样式。白色背景，文字黑色，鼠标悬停变边框和文字变为蓝色。
• primary ：蓝色背景，文字白色。
• dashed ：与default不一样的是 边框为虚线
• text：文本黑色，没有背景。
• link：文本蓝色，没有背景。为点击文本跳转使用
• ghost：虽然算是一种type可是与以上几种不一样，type="ghost"无效。须要讲ghost写出属性<Button ghost>,幽灵按钮将按钮的内容反色，背景变为透明，经常使用在有色背景上。也可和其它的类型一块儿使用。
• danger：在其余样式框架中（如elementUI）中都是做为type的一种类型，只是颜色变成了红色。可是在Ant Design中被做为一种属性。可是我也把它放到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, );
复制代码

<Button type="primary" ghost>Primary</Button>
    <Button ghost>Primary</Button>
    <Button type="dashed" ghost>dashed</Button>
复制代码

<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>
复制代码

3.2 shape

• 默认是矩形
• circle是圆形
• round圆角矩形

<Button>Default</Button>
<Button type="primary" shape="round">Round</Button> 
<Button type="primary" shape="circle">Circle</Button> 
复制代码

3.3 size

• small：小
• 不写：默认
• large：大

<Button size="small">Small</Button>
<Button >Default</Button>
<Button size="large">Large</Button>
复制代码

3.4 按钮使用图标

这也就是图标的使用

图标的使用请看另外一篇文章

SearchOutlined是搜索的图标 🔍

import { SearchOutlined } from '@ant-design/icons';
复制代码

能够为Button添加icon属性或者在Button内部写入Icon(能控制图标的位置)

<Button icon={<SearchOutlined/>}>
 <Button><SearchOutlined/></Button>
复制代码

3.5 禁止按钮 disabled

<Button type="dashed" disabled> Dashed(disabled) </Button>
复制代码

3.6 Block按钮

就是适应父元素的大小

<Button type="primary" block> Primary </Button>
复制代码

3.7 loading按钮

loading默认为true,能够赋值true/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>
复制代码

4. 官网代码

4.1 点击 large、default、small 按钮变换全部按钮的大小

import { Button, Radio } from 'antd';
// 引入的图标
import { DownloadOutlined } from '@ant-design/icons';

class ButtonSize extends React.Component {
  // 在state中定义变量size 用于改变按钮大小
  state = {
    size: 'large',
  };
  // 改变 size
  handleSizeChange = e => {
    this.setState({ size: e.target.value });
  };

  render() {
    // 定义变量(解构) 如下使用size 不须要写 this.state.size
    const { size } = this.state;
    return (
      <> {/* 放到单选按钮组中 只能点击其中的一个按钮 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 /> {/* 下面的按钮的size属性都是这个变量，按钮点击后size变量改变，属性也就改变了 */} <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);
复制代码

4.2 按钮点击后加载，六秒后结束

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

class App extends React.Component {
  // 存放三个按钮状态因此是数组
  state = {
    loadings: [],
  };

  enterLoading = index => {
    this.setState(({ loadings }) => {
      // 更新newLoadings的值
      const newLoadings = [...loadings];
      // 根据索引index 改变 newLoadings的值
      newLoadings[index] = true;

      return {
        loadings: newLoadings,
      };
    });
    // 延时六秒执行
    setTimeout(() => {
      // setState改变loadings的值
      this.setState(({ loadings }) => {
        const newLoadings = [...loadings];
        newLoadings[index] = false;

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

  render() {
    const { loadings } = this.state;
    return (
      <> {/* loading是loadings数组的第一个值 点击按钮调用enterLoading方法并把索引0做为参数*/} <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);
复制代码