@y-fe/nu-button-react NPM

nu-button-react

这是 NU 「 no-ui 」组件库系统 nu-system，按钮组件 React 实现。

怎么用？

npm i @y-fe/nu-button-react @y-fe/nu-button

yarn add @y-fe/nu-button-react @y-fe/nu-button

二次封装

/* @components/Button/index.js */
import NuButton from "@y-fe/nu-button-react";
import "@y-fe/nu-button";     // 样式组件
import "@y-fe/nu-button/css/skins/bootstrap.css"; // bootstrap 皮肤 
// import './style.css'; // 你自定义的css样式
NuButton.defaultProps.color = "primary";  // 自定义默认颜色
NuButton.defaultProps.variant = "ghost";  // 自定义默认变体
export default NuButton;

因为 @y-fe/nu-button-react 是纯逻辑组件本身不会输出任何样式，在实际项目中使用需要二次封装。这里采用的是 nu-button 里面的 bootstrap 皮肤。

使用

import Button from "./components/Button";

const Page=()=>{    
    return (
     <div>
        <Button ghost large>一个大的幽灵按钮</Button>                
        <Button href="/nu-button" ghost large>一个大的幽灵主按钮</Button>
     </div>     
    );
};

export default Page;

DOM 结构

<Button>hello</Button>
<Button href="." title="hello">hello</Button>

上面的代码会被渲染成如下的 HTML 结构。

<button class="nu_button" type="button" ><span>hello</span></button>
<a class="nu_button" href="." title="hello"><span>hello</span></a>

Api

props	类型	默认值	功能
baseClass	string	'nu_btn'	按钮默认选择器
href	string	-	跳转链接
type	string	'button'	按钮类型
component	string \| func \| object	'button'	外壳组件
disabled	boolean	-	不可用按钮
loading	boolean	-	loading按钮
capsule	boolean	-	圆角按钮
circle	boolean	-	正圆按钮
block	boolean	-	占一行的按钮
color	'default' \| 'primary' \| 'secondary' 'warning' \| 'success' \| 'danger'	'default'	按钮颜色
primary	boolean	-	主按钮
secondary	boolean	-	次级按钮
warning	boolean	-	警告按钮
success	boolean	-	成功按钮
danger	boolean	-	危险按钮
variant	'fill' \| 'ghost' \| 'link'	'fill'	按钮变体
fill	boolean	-	实心按钮
ghost	boolean	-	幽灵按钮
link	boolean	-	链接按钮
large	boolean	-	大按钮
middle	boolean	-	中号按钮
small	boolean	-	小按钮

并且除了上表中的属性，其它属性都会直接传到原生 button 上。

如何配合路由组件使用

import { Link } from "@reach/router";
import NuButton from "@y-fe/nu-button-react";
import "@y-fe/nu-button";
import './style.css';

// 自定义标签
NuButton.defaultProps.component = Link;

export default NuButton;