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);
複製代碼