提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

Ant Design 按钮和图标的使用

2023-03-07 09:01:45 时间

theme: smartblue highlight: vs2015

这是我参与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);

相关文章