Ant Design 组件库按钮实现示例详解

目录

• 1 antd 之 Button API
• 2 antd 之 Button 示例

1 antd 之 Button API

antd 组件库是基于 Ant Design 设计体系的 React UI 组件库，antd 为 Web 应用提供了丰富的基础 UI 组件，可以用于研发企业级中后台产品。这篇咱们介绍 antd 组件库之 按钮。

按钮 Button 是一个比较基础的 UI 组件，一般在有交互的应用中都会用到。

其 DOM 节点为 ...，antd 中的按钮样式丰富，可以通过设置 Button 的属性来产生不同的 按钮样式。

这些可配置的属性主要包括：type、shape、size、loading 等，详细的这里我进行一个整理：

下面做一些实践。

2 antd 之 Button 示例

先来看 type 属性的六个简单的按钮，上代码 (JavaScript的)：

import { Button } from 'antd';
import React from 'react';
const App = () => (
  <>
    Primary Button
    Default Button
    Dashed Button
    

    Text Button
    Link Button
  	Ghost Button
  
);
export default App;

来看效果：

接下来看一波带 icon 图标的按钮，上代码：

import { SearchOutlined, PlayCircleOutlined,
  ZoomInOutlined, RedoOutlined, AndroidOutlined,
  AppleOutlined, WechatOutlined, EyeOutlined, 
  ShareAltOutlined, MessageOutlined} from '@ant-design/icons';
import { Button, Tooltip } from 'antd';
import React from 'react';
const App = () => (
  <>
    
      } />
    
    
      A
    
    }>
      Search
    
    
      } />
    
    }>Search
    

    
      } />
    
    }>Search
    
      } />
    
    }>
      Search
    
    } href="https://www.google.com" rel="external nofollow"  rel="external nofollow"  />
    

    

    
      } size="large" />
    
    
      A
    
    } size="large">
      Search
    
    
      } size="large" />
    
    } size="large">
      Search
    
    

    
      } size="large" />
    
    } size="large">
      Search
    
    
      } size="large" />
    
    } size="large">
      Search
    
    } size="large" href="https://www.google.com" rel="external nofollow"  rel="external nofollow"  />
  
);
export default App;

来看效果：

你应该可以发现，我这里用了很多不同的 icon 图标，可以这么说：用 antd 的 Button 搭配 antd 的 Icon 图标，几乎能实现你想要的所有按钮样式。除了按钮的图标，上面的示例也演示了 按钮 Size 的调整，通过 size 可以配置 large 和 small， 分别对应将按钮设置为 大尺寸和 小尺寸，若不设置 size， 则默认为中尺寸。

接着，我们来看按钮的 disabled 属性，意思即为按钮处于不可用的状态，上代码：

import { Button } from 'antd';
import React from 'react';
const App = () => (
  <>
    Primary
    
      Primary(disabled)
    
    

    Default
    Default(disabled)
    

    Dashed
    
      Dashed(disabled)
    
    

    Text
    
      Text(disabled)
    
    

    Link
    
      Link(disabled)
    
    

    Danger Default
    
      Danger Default(disabled)
    
    

    
      Danger Text
    
    
      Danger Text(disabled)
    
    

    
      Danger Link
    
    
      Danger Link(disabled)
    
    

      Ghost
      
        Ghost(disabled)
      
    
  
);
export default App;

来看效果：

还有一种按钮是，点击后服务器需要响应一会儿，即加载状态，这个 Loding... 的状态用 antd 的按钮也可以展现，上代码：

import { PoweroffOutlined } from '@ant-design/icons';
import { Button, Space } from 'antd';
import React, { useState } from 'react';
const App = () => {
  const [loadings, setLoadings] = useState([]);
  const enterLoading = (index) => {
    setLoadings((prevLoadings) => {
      const newLoadings = [...prevLoadings];
      newLoadings[index] = true;
      return newLoadings;
    });
    setTimeout(() => {
      setLoadings((prevLoadings) => {
        const newLoadings = [...prevLoadings];
        newLoadings[index] = false;
        return newLoadings;
      });
    }, 6000);
  };
  return (
    <>
      
        
          Loading
        
        
          Loading
        
        } loading />
      
      
         enterLoading(0)}>
          Click me!
        
        }
          loading={loadings[1]}
          onClick={() => enterLoading(1)}
        >
          Click me!
        
        }
          loading={loadings[2]}
          onClick={() => enterLoading(2)}
        />
      
    
  );
};
export default App;

来看效果：

好了，以上分享了 Ant Design 组件库之按钮。希望我的分享能对你的学习有一点帮助。

更多关于Ant Design 组件库按钮的资料请关注脚本之家其它相关文章！