@_nu/react-button
TypeScript icon, indicating that this package has built-in type declarations

1.4.6 • Public • Published

NuButton

npm package npm downloads github
npm package npm downloads github

没有 UI 依赖的按钮组件.

<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>

做了啥?

  • props 上有 href 时,会用 a 替换 button;
  • 默认为 button 添加 type="button";
  • 当元素标签不是 button 时会默认添加 role="button"

安装

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

二次封装

/* @/components/Button/index.js */
import NuButton from "@_nu/react-button";         // import
import "@_nu/css-button";                         // core style
import "@_nu/css-button/css/skins/bootstrap.css"; // skin of bootstrap
import './style.css';                             // custome style
const Button = React.forwardRef(function Button(props, ref) {
  return <NuButton classNames="nu_btn" ref={ref} {...props} />;
});

export default Button;

⚠️:注意这里 classNamesclassName的区别, 见底部 API

index.d.ts

import { ComponentProps } from '@_nu/react-button';
declare const _default: (props?: ComponentProps) => JSX.Element;
export default _default;

⚠️:二次封装之后,代码提示会丢失,需要额外添加 index.d.ts 维持代码提示!

使用

import Button from '@/components/Button';

// 这里省略了其它代码

<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">hello</button>
<strong class="nu_btn _fill" role="button">hello</strong>
<button class="nu_btn _fill" type="button"><strong>hello</strong></button>
<button class="nu_btn _fill" type="button" disabled>hello</button>
<button class="nu_btn _fill _primary" type="button">hello</button>
<a class="nu_btn _fill _primary" role="button" href="." title="hello">hello</a>

⚠️:这里是在定义了 classNames="nu_btn" 的状况之下

Api

属性 类型 默认值 功能
href string ' ' href for a
Component string | func | object 'button' tagName
className string '-' className
classNames string 'nu_btn' 会添加到 className 之前

⚠️:classNames 主要是用于在二次封装到时候,添加默认的 className

如何修改样式?

查看样式组件 @_nu/css-button

Package Sidebar

Install

npm i @_nu/react-button

Weekly Downloads

1

Version

1.4.6

License

MIT

Unpacked Size

23.8 kB

Total Files

14

Last publish

Collaborators

  • ziven27
  • nanasun