@_nu/react-button
Advanced tools
+15
-6
| { | ||
| "name": "@_nu/react-button", | ||
| "version": "0.0.4", | ||
| "version": "0.0.6", | ||
| "description": "NU 「 no-ui 」 组件库系统 nu-system,按钮组件 React 实现", | ||
@@ -16,3 +16,7 @@ "main": "lib/index.js", | ||
| "lib", | ||
| "umd" | ||
| "umd", | ||
| "CHANGELOG.md", | ||
| "README.md", | ||
| "LICENSE", | ||
| "package.json" | ||
| ], | ||
@@ -26,3 +30,5 @@ "scripts": { | ||
| "test:coverage": "nwb test-react --coverage", | ||
| "test:watch": "nwb test-react --server" | ||
| "test:watch": "nwb test-react --server", | ||
| "log": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0", | ||
| "commitizenInit": "commitizen init cz-conventional-changelog --yarn --dev --exact" | ||
| }, | ||
@@ -34,9 +40,12 @@ "dependencies": { | ||
| "peerDependencies": { | ||
| "react": "16.x" | ||
| "react": "16.x", | ||
| "@_nu/css-button": "^0.0.3" | ||
| }, | ||
| "devDependencies": { | ||
| "@_nu/vanilla-button": "^0.0.1", | ||
| "@_nu/css-button": "^0.0.3", | ||
| "nwb": "0.23.x", | ||
| "react": "^16.8.6", | ||
| "react-dom": "^16.8.6" | ||
| "react-dom": "^16.8.6", | ||
| "conventional-changelog-cli": "^2.0.23", | ||
| "cz-conventional-changelog": "3.0.2" | ||
| }, | ||
@@ -43,0 +52,0 @@ "keywords": [ |
+11
-13
@@ -1,11 +0,9 @@ | ||
| # nu-react-button | ||
| # Button | ||
| [![npm package][npm-badge]][npm] | ||
| [](https://www.npmjs.org/package/@_nu/react-button) | ||
| [](https://github.com/nu-system/react-button) | ||
| [npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square | ||
| [npm]: https://www.npmjs.org/package/@_nu/react-button | ||
| <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 实现。 | ||
| 组件库母版系统 [NU-system](https://nu-system.github.io/) 按钮组件 React 实现。 | ||
@@ -15,3 +13,3 @@ ## 怎么用? | ||
| ``` | ||
| yarn add @_nu/react-button @_nu/vanilla-button | ||
| yarn add @_nu/react-button @_nu/css-button | ||
| ``` | ||
@@ -24,4 +22,4 @@ | ||
| import NuButton from "@_nu/react-button"; | ||
| import "@_nu/vanilla-button"; // 样式组件 | ||
| import "@_nu/vanilla-button/css/skins/bootstrap.css"; // bootstrap 皮肤 | ||
| import "@_nu/css-button"; // 样式组件 | ||
| import "@_nu/css-button/css/skins/bootstrap.css"; // bootstrap 皮肤 | ||
| // import './style.css'; // 你自定义的css样式 | ||
@@ -34,3 +32,3 @@ NuButton.defaultProps.color = "primary"; // 自定义默认颜色 | ||
| 因为 `NuButton` 是纯逻辑组件本身不会输出任何样式,在实际项目中使用需要二次封装。 | ||
| 这里采用的是 [nu-button](https://nu-system.github.io/vanilla/button/) 里面的 bootstrap 皮肤。 | ||
| 这里采用的是 [nu-button](https://nu-system.github.io/css/button/) 里面的 bootstrap 皮肤。 | ||
@@ -101,4 +99,4 @@ ### 使用 | ||
| import { Link } from "@reach/router"; | ||
| import NuButton from "@y-fe/nu-button-react"; | ||
| import "@y-fe/nu-button"; | ||
| import NuButton from "@_nu/react-button"; | ||
| import "@_nu/css-button"; | ||
| import './style.css'; | ||
@@ -116,3 +114,3 @@ | ||
| 想要自定义样式,只需要围绕对应选择器进行开发即可, 样式定义规则可以查看 [nu-button](https://nu-system.github.io/vanilla/button/)。 | ||
| 想要自定义样式,只需要围绕对应选择器进行开发即可, 样式定义规则可以查看 [nu-button](https://nu-system.github.io/css/button/)。 | ||
@@ -119,0 +117,0 @@ | props | class | |
15718
2.69%4
33.33%6
50%130
-1.52%