react實現一個button組件

npm地址

github地址

---

About

a sweet button component of react

技術棧

react + sass + classnames + webpack

Install

npm i react-sweet-button -S
複製代碼

Usage

import { SweetButton, DimensionButton } from 'react-sweet-button';
複製代碼

• SweetButton

<SweetButton className="m-t" type="light" size="xlarge" onClick={()=>{alert('我是超大按鈕')}}>
  xlarge
</SweetButton>
<SweetButton className="m-l" type="primary" size="large">
  large
</Sweet
<SweetButton className="m-l" type="secondary" size="medium" outline>
  medium
</SweetButton>
<SweetButton className="m-l" type="danger" size="small" outline>
   small
</SweetButton>
<SweetButton className="m-l" type="dark" size="xsmall">
   xsmall
</SweetButton>
<SweetButton size="large" block>
  block button
</SweetButton>
複製代碼

• DimensionButton

<DimensionButton className="m-t" type="light" size="xlarge" onClick={()=>{alert('我是超大按鈕')}}>
  xlarge
</DimensionButton>
<DimensionButton className="m-l" type="primary" size="large">
  large
</DimensionButton>
<DimensionButton className="m-l" type="secondary" size="medium">
   medium
</DimensionButton>
<DimensionButton className="m-l" type="danger" size="small">
   small
</DimensionButton>
<DimensionButton className="m-l" type="dark" size="xsmall">
   xsmall
</DimensionButton>
複製代碼

效果預覽

API

經過設置 Button 的屬性來產生不一樣的按鈕樣式，推薦順序爲：type -> size -> outline(僅適用於SweetButton) ->block(僅適用於SweetButton)

按鈕的屬性說明以下：

• type: 設置按鈕類型，可選值爲 light primary secondary danger dark或者不設 默認值爲 primary

• size: 設置按鈕大小，可選值爲 xlarge large medium small xsmall或者不設 默認值large

• outline: 設置按鈕樣式(僅帶邊框按鈕)

• block: 設置按鈕樣式(block button)

---

開源組件github地址

更多angular1/2/4/五、ionic1/2/三、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目，請關注微信公衆號——全棧弄潮兒。

前端最火框架排行榜——小程序二維碼