@_nu/react-button
v1.4.6
Published
No UI dependency Button of react
Downloads
175
Readme
NuButton
| npm package | npm downloads | github | | ------------------------------------ | ------------------------------------------ | ------------------------------- | | | | |
没有 UI 依赖的按钮组件.
做了啥?
- 当
props
上有href
时,会用a
替换button
; - 默认为
button
添加type="button"
; - 当元素标签不是
button
时会默认添加role="button"
;
安装
yarn add @_nu/react-button @_nu/css-button
- @_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;
⚠️:注意这里
classNames
和className
的区别, 见底部 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