1.0.7 • Published 1 year ago
cherry-rc-ui v1.0.7
:metal: 在线演示
https://nywgithub.github.io/components/
:zap: 安装
使用 npm
npm i cherry-rc-ui --save
使用 yarn
yarn add cherry-rc-ui
:book: 如何使用
- 按需引入
import React from "react"
import { Alert } from "cherry-rc-ui"
import "cherry-rc-ui/lib/alert/style/index.css"
class Page extends React.Component {
render(){
return (
<Alert
kind="warning"
closeable
close={<span>x</span>}
// duration={3000}
onClose={onClose}
>
<div>这是一条警告提示?</div>
</Alert>
)
}
}
// .babelrc.js
module.exports = {
plugins: [
["babel-plugin-import", {
"libraryName": "cherry-rc-ui",
"libraryDirectory": "es",
"style": true
},'cherry-rc-ui'],
]
}
// 多个组件库
module.exports = {
plugins: [
["babel-plugin-import", {
"libraryName": "cherry-rc-ui",
"libraryDirectory": "es",
"style": true
},'cherry-rc-ui'],
["babel-plugin-import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": true
},'antd'],
]
}
:unamused: 设计规范
借鉴Ant-Design React-Component
:package: 参考轮子
:wrench: 本地开发
git clone git@github.com:nywgithub/components.git
cd components
npm i
安装依赖
如果无法科学上网 可 使用 淘宝镜像 npm --registry https://registry.npm.taobao.org
启动开发服务器
基于 dumi1.0
npm run dev
开发组件
参考
components/alert
在 components
新建一个组件(组件名与文件名对应) 以 alert
组件目录结构为例
- components
- button //组件文件夹
-
demo
//demo文件夹 -index.tsx
-button.ts
//组件逻辑 -index.ts
//组件入口 -interface.ts
//ts类型style
//样式文件夹style.less
index.ts
然后 在 docs/components
目录下 新建一个 alert.md
- docs
- components
-
alert.md
// dumi 的文档文件
- components
-
编写demo在dev中测试
//alert/demo/index.tsx
import React from 'react'
import Alert from '..'
import ConfigProvider from '../../common-provider/context'
import '../style'
export default () => {
const onClose = () => {
console.log('关闭中')
}
return (
<ConfigProvider locale={'asd'}>
<Alert
kind="warning"
closeable
close={<span>delete</span>}
// duration={3000}
onClose={onClose}
>
<div>这是一条警告提示?</div>
</Alert>
</ConfigProvider>
)
}
这样就完成了 dumi
会将你写好的组件 添加到页面上, 并且会自动生成说明文档 (其实本质上就是一个 webpack 的 dev-server)
最后的最后, 在src根目录的index.ts
导出组件,以便于发布
export { default as Alert } from "./alert";