nu-button-react <iframe src="https://codesandbox.io/embed/throbbing-leftpad-juijc?autoresize=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FButton.js" title="throbbing-leftpad-juijc" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
这是 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;
如何自定义样式?
可以查看 nu-button