用react自己实现一个button组件

2019-01-04 本文已影响79人全栈弄潮儿

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>