@_nu/react-switch

Switch

无 UI 依赖的 Swith 组件。

功能

• When got href tagName will replace by a;
• When tagName is button will got type="button" as default;
• When children is <string> and title will be children as default;
• When tagName is not button will got role="button"

Install

yarn add @_nu/react-button @_nu/css-button

• @_nu/react-button: Login only
• @_nu/css-button: UI Just

Custom

/* @components/Button/index.js */
import "@_nu/css-button";                         // core style
import "@_nu/css-button/css/skins/bootstrap.css"; // skin of bootstrap
import './style.css';                             // custome style
import NuButton from "@_nu/react-button";         // import

// Add default class
NuButton.defaultProps.onBeforeReturn = ({className='', props})=> ({
  className:`nu_btn ${className}`
  ...props
});

export default NuButton;

Use

<Button className="_fill _primay">Button</Button>
<Button className="_fill _primay" href="/nu-button">Link Button</Button>
<Button component="strong" className="_fill _primay">Button</Button>

Api

Prop	type	Default	Function
href	string	' '	href for a
Component	string | func | object	'button'	tagName

<Button className="_fill">hello</Button>
<Button className="_fill" component="strong">hello</Button>
<Button className="_fill"><strong>hello</strong></Button>
<Button className="_fill" disabled>hello</Button>
<Button className="_fill _primary">hello</Button>
<Button className="_fill _primary" href="." title="hello">hello</Button>

=>

<button class="nu_btn _fill" type="button" title="hello">hello</button>
<strong class="nu_btn _fill" role="button" title="hello">hello</strong>
<button class="nu_btn _fill" type="button"><strong>hello</strong></button>
<button class="nu_btn _fill" type="button" disabled title="hello">hello</button>
<button class="nu_btn _fill _primary" type="button" title="hello">hello</button>
<a class="nu_btn _fill _primary" role="button" href="." title="hello">hello</a>

defaultProps	type	Default	Function
onBeforeReturn	function	(props)=> props	custom props on before return

Custom style？

Go to @_nu/css-button

test

// How to start
npm test

// generate coverage report
npm run test:coverage