Element-React Button按鈕

常用的操作按鈕。

基礎(chǔ)用法

基礎(chǔ)的按鈕用法。 Button 組件默認(rèn)提供7種主題，由type屬性來定義，默認(rèn)為default。

render() {
  return (
    <div>
      <Button>默認(rèn)按鈕</Button>
      <Button type="primary">主要按鈕</Button>
      <Button type="text">文字按鈕</Button>
    </div>
  )
}

禁用狀態(tài)

按鈕不可用狀態(tài)。 你可以使用disabled屬性來定義按鈕是否可用，它接受一個Boolean值。

render() {
  return (
    <div>
      <Button plain={true} disabled={true}>默認(rèn)按鈕</Button>
      <Button type="primary" disabled={true}>主要按鈕</Button>
      <Button type="text" disabled={true}>文字按鈕</Button>
    </div>
  )
}

有顏色傾向

不同的顏色傾向代表不同的提示

樸素按鈕同樣設(shè)置了不同的type屬性對應(yīng)的樣式（可選值同上），默認(rèn)為info。設(shè)置plain屬性，它接受一個Boolean。注意，在該情況下，type雖然可以為text，但是是沒有意義的，會顯示為text button的樣式。

render() {
  return (
    <div className="intro-block">
      <div className="block">
        <span className="demonstration">默認(rèn)顯示顏色</span>
        <span className="wrapper">
          <Button type="success">成功按鈕</Button>
          <Button type="warning">警告按鈕</Button>
          <Button type="danger">危險按鈕</Button>
          <Button type="info">信息按鈕</Button>
        </span>
      </div>
      <div className="block">
        <span className="demonstration">hover 顯示顏色</span>
        <span className="wrapper">
          <Button plain={true} type="success">成功按鈕</Button>
          <Button plain={true} type="warning">警告按鈕</Button>
          <Button plain={true} type="danger">危險按鈕</Button>
          <Button plain={true} type="info">信息按鈕</Button>
        </span>
      </div>
    </div>
  )
}

圖標(biāo)按鈕

帶圖標(biāo)的按鈕可增強辨識度(有文字)或節(jié)省空間(無文字)。

設(shè)置icon屬性即可，icon 的列表可以參考 Element 的 icon 組件，也可以設(shè)置在文字右邊的 icon ，只要使用i標(biāo)簽即可，可以使用自定義圖標(biāo)。

render() {
  return (
    <div>
      <Button type="primary" icon="edit"></Button>
      <Button type="primary" icon="share"></Button>
      <Button type="primary" icon="delete"></Button>
      <Button type="primary" icon="search">搜索</Button>
      <Button type="primary">上傳<i className="el-icon-upload el-icon-right"></i></Button>
    </div>
  )
}

按鈕組

以按鈕組的方式出現(xiàn)，常用于多項類似操作。 使用Button.Group標(biāo)簽來嵌套你的按鈕。

render() {
  return (
    <div>
      <Button.Group>
          <Button type="primary" icon="arrow-left">上一頁</Button>
          <Button type="primary">下一頁<i className="el-icon-arrow-right el-icon-right"></i></Button>
      </Button.Group>
      <Button.Group>
          <Button type="primary" icon="edit"></Button>
          <Button type="primary" icon="share"></Button>
          <Button type="primary" icon="delete"></Button>
      </Button.Group>
    </div>
  )
}

加載中

點擊按鈕后進(jìn)行數(shù)據(jù)加載操作，在按鈕上顯示加載狀態(tài)。

要設(shè)置為 loading 狀態(tài)，只要設(shè)置loading屬性為true即可。

render() {
  return <Button type="primary" loading={true}>加載中</Button>
}

不同尺寸

Button 組件提供除了默認(rèn)值以外的三種尺寸，可以在不同場景下選擇合適的按鈕尺寸。 額外的尺寸：large、small、mini，通過設(shè)置size屬性來配置它們。

render() {
  return (
    <div>
      <Button type="primary" size="large">大型按鈕</Button>
      <Button type="primary">正常按鈕</Button>
      <Button type="primary" size="small">小型按鈕</Button>
      <Button type="primary" size="mini">超小按鈕</Button>
    </div>
  )
}

Attributes

Button-Group Attributes

Button-Group Slots