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/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。

前端最火框架排行榜——小程序二维码