Ant Design 組件庫按鈕實現示例詳解

Posted on by

1 antd 之 Button API

antd 組件庫是基於 Ant Design 設計體系的 React UI 組件庫，antd 為 Web 應用提供瞭豐富的基礎 UI 組件，可以用於研發企業級中後臺產品。這篇咱們介紹 antd 組件庫之 按鈕。

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

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

這些可配置的屬性主要包括：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 />} href="https://www.google.com" 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" 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 = () => (
  <>
    <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;

來看效果：

還有一種按鈕是，點擊後服務器需要響應一會兒，即加載狀態，這個 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 (
    <>
      <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;

來看效果：

好瞭，以上分享瞭 Ant Design 組件庫之按鈕。希望我的分享能對你的學習有一點幫助。

更多關於Ant Design 組件庫按鈕的資料請關註WalkonNet其它相關文章！

推薦閱讀：