Ant?Design?組件庫按鈕實現(xiàn)示例詳解

更新時間：2022年08月19日 15:21:23 作者：極智視界

這篇文章主要介紹了Ant?Design?組件庫按鈕實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪</P><P><BR>

1 antd 之 Button API

antd 組件庫是基于 Ant Design 設計體系的 React UI 組件庫，antd 為 Web 應用提供了豐富的基礎 UI 組件，可以用于研發(fā)企業(yè)級中后臺產(chǎn)品。這篇咱們介紹 antd 組件庫之按鈕。

按鈕 Button 是一個比較基礎的 UI 組件，一般在有交互的應用中都會用到。

其 DOM 節(jié)點為 <Button>...</Button>，antd 中的按鈕樣式豐富，可以通過設置 Button 的屬性來產(chǎn)生不同的按鈕樣式。

這些可配置的屬性主要包括：type、shape、size、loading 等，詳細的這里我進行一個整理：

下面做一些實踐。

2 antd 之 Button 示例

先來看 type 屬性的六個簡單的按鈕，上代碼 (JavaScript的)：

import { Button } from 'antd';
import React from 'react';
const App = () => (
  <>
    <Button type="primary">Primary Button</Button>
    <Button>Default Button</Button>
    <Button type="dashed">Dashed Button</Button>
    <br />
    <Button type="text">Text Button</Button>
    <Button type="link">Link Button</Button>
  	<Button type="ghost">Ghost Button</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 = () => (
  <>
    <Tooltip title="search">
      <Button type="primary" shape="circle" icon={<PlayCircleOutlined />} />
    </Tooltip>
    <Button type="primary" shape="circle">
      A
    </Button>
    <Button type="primary" icon={<ZoomInOutlined />}>
      Search
    </Button>
    <Tooltip title="search">
      <Button shape="circle" icon={<RedoOutlined />} />
    </Tooltip>
    <Button icon={<AndroidOutlined />}>Search</Button>
    <br />
    <Tooltip title="search">
      <Button shape="circle" icon={<SearchOutlined />} />
    </Tooltip>
    <Button icon={<SearchOutlined />}>Search</Button>
    <Tooltip title="search">
      <Button type="dashed" shape="circle" icon={<SearchOutlined />} />
    </Tooltip>
    <Button type="dashed" icon={<SearchOutlined />}>
      Search
    </Button>
    <Button icon={<SearchOutlined />}  rel="external nofollow"  rel="external nofollow"  />
    <br />
    <br />
    <Tooltip title="search">
      <Button type="primary" shape="circle" icon={<AppleOutlined />} size="large" />
    </Tooltip>
    <Button type="primary" shape="circle" size="large">
      A
    </Button>
    <Button type="primary" icon={<WechatOutlined />} size="large">
      Search
    </Button>
    <Tooltip title="search">
      <Button shape="circle" icon={<SearchOutlined />} size="large" />
    </Tooltip>
    <Button icon={<EyeOutlined />} size="large">
      Search
    </Button>
    <br />
    <Tooltip title="search">
      <Button shape="circle" icon={<SearchOutlined />} size="large" />
    </Tooltip>
    <Button icon={<ShareAltOutlined />} size="large">
      Search
    </Button>
    <Tooltip title="search">
      <Button type="dashed" shape="circle" icon={<SearchOutlined />} size="large" />
    </Tooltip>
    <Button type="dashed" icon={<SearchOutlined />} size="large">
      Search
    </Button>
    <Button icon={<MessageOutlined />} size="large"  rel="external nofollow"  rel="external nofollow"  />
  </>
);
export default App;

來看效果：

你應該可以發(fā)現(xiàn)，我這里用了很多不同的 icon 圖標，可以這么說：用 antd 的 Button 搭配 antd 的 Icon 圖標，幾乎能實現(xiàn)你想要的所有按鈕樣式。除了按鈕的圖標，上面的示例也演示了按鈕 Size 的調(diào)整，通過 size 可以配置 large 和 small，分別對應將按鈕設置為大尺寸和小尺寸，若不設置 size，則默認為中尺寸。

接著，我們來看按鈕的 disabled 屬性，意思即為按鈕處于不可用的狀態(tài)，上代碼：

import { Button } from 'antd';
import React from 'react';
const App = () => (
  <>
    <Button type="primary">Primary</Button>
    <Button type="primary" disabled>
      Primary(disabled)
    </Button>
    <br />
    <Button>Default</Button>
    <Button disabled>Default(disabled)</Button>
    <br />
    <Button type="dashed">Dashed</Button>
    <Button type="dashed" disabled>
      Dashed(disabled)
    </Button>
    <br />
    <Button type="text">Text</Button>
    <Button type="text" disabled>
      Text(disabled)
    </Button>
    <br />
    <Button type="link">Link</Button>
    <Button type="link" disabled>
      Link(disabled)
    </Button>
    <br />
    <Button danger>Danger Default</Button>
    <Button danger disabled>
      Danger Default(disabled)
    </Button>
    <br />
    <Button danger type="text">
      Danger Text
    </Button>
    <Button danger type="text" disabled>
      Danger Text(disabled)
    </Button>
    <br />
    <Button type="link" danger>
      Danger Link
    </Button>
    <Button type="link" danger disabled>
      Danger Link(disabled)
    </Button>
    <div className="site-button-ghost-wrapper">
      <Button ghost>Ghost</Button>
      <Button ghost disabled>
        Ghost(disabled)
      </Button>
    </div>
  </>
);
export default App;

來看效果：

還有一種按鈕是，點擊后服務器需要響應一會兒，即加載狀態(tài)，這個 Loding... 的狀態(tài)用 antd 的按鈕也可以展現(xiàn)，上代碼：

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 (
    <>
      <Space
        style={{
          width: '100%',
        }}
      >
        <Button type="primary" loading>
          Loading
        </Button>
        <Button type="primary" size="small" loading>
          Loading
        </Button>
        <Button type="primary" icon={<PoweroffOutlined />} loading />
      </Space>
      <Space
        style={{
          width: '100%',
        }}
      >
        <Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
          Click me!
        </Button>
        <Button
          type="primary"
          icon={<PoweroffOutlined />}
          loading={loadings[1]}
          onClick={() => enterLoading(1)}
        >
          Click me!
        </Button>
        <Button
          type="primary"
          icon={<PoweroffOutlined />}
          loading={loadings[2]}
          onClick={() => enterLoading(2)}
        />
      </Space>
    </>
  );
};
export default App;

來看效果：