组件库

目录结构

|-- .babelrc  					#babel配置
|-- .eslintignore
|-- .eslintrc				#eslint配置
|-- .gitignore
|-- package-lock.json
|-- package.json
|-- README.md				    #说明文档
|-- rollup.config.dev.js	    #开发环境打包配置
|-- rollup.config.js			#生产环境打包配置
|-- dist						#打包产物
|-- dumi
|   |-- .dumirc.js				#dumi配置
|   |-- .dumi
|   |-- docs					#组件库文档目录
|   |   |-- index.md		    #组件库文档首页
|   |-- src						#组件库目录结构
|       |-- index.js
|       |-- Button
|           |-- index.jsx
|           |-- index.md
|-- public						#测试用
|   |-- App.jsx
|   |-- bundle.js
|   |-- index.html
|   |-- index.js
|-- src							#组件库源码
    |-- index.js				#入口
    |-- components			    #组件
    |   |-- Button
    |   |   |-- index.jsx
    |   |   |-- index.less
    |   |-- Swtich
    |-- global					#全局样式
    |   |-- default.less
    |   |-- index.js
    |   |-- index.less
    |-- tools					#工具
        |-- class.js

scripts

  "scripts": {
    "dev": "cross-env NODE_ENV=development rollup --config rollup.config.dev.js -w",
    "build": "cross-env NODE_ENV=production rollup --config rollup.config.js --bundleConfigAsCjs" ,
    "pub": "rollup --config rollup.config.js --bundleConfigAsCjs && npm version patch && npm publish",
    "dumi": "cross-env APP_ROOT=dumi dumi dev",
    "dumi-build": "cross-env APP_ROOT=dumi dumi build"
  }
  npm run dev	#在开发环境下测试组件
  npm run build	#生成打包文档
  npm run pub	#打包上传至npm的快捷命令
  npm run dumi	#在线浏览组件库文档
  npm run dumi-build	#打包组件库文档

Button

属性

属性	说明	类型	默认值
color	按钮的颜色	`'default'	'primary'
fill	填充模式	`'solid'	'outline'
size	大小	`'mini'	'samll'
block	是否是块级元素	boolean	false
disabled	是否禁用	boolean	false
type	原生 button 元素的 type 属性	`'submit'	'reset'
onClick	点击事件	event	-
shape	按钮的形状	`'default'	'rounded'

CSS变量

属性	说明	默认值	全局变量
--text-color	文字颜色	var(--gao-color-text)	--gao-button-text-color
--background-color	背景颜色	var(--gao-color-white)	--gao-button-background-color
--border-radius	圆角大小	4px	--gao-button-border-radius
--border-width	边框宽度	1px	--gao-button-border-width
--border-style	边框样式	solid	--gao-button-border-style
--border-color	边框颜色	var(--gao-border-color)	--gao-button-border-color

示例

1import React from 'react'
2import Button from 'rollup-project-test';
3
4export default () =>{
5    return (
6        <>
7            color<br/>
8            <Button></Button>  &nbsp;
9            <Button color='danger'>danger</Button>  &nbsp;  
10            <Button color='success'>success</Button>  &nbsp;  
11            <Button color='warning'>warning</Button>  &nbsp;  
12            <Button color='primary'>primary</Button>  &nbsp;  
13
14            <br/><br/>block<br/>
15            <Button block color='primary'>block</Button>
16
17            <br/><br/>disabled<br/>
18            <Button disabled color='primary'>disabled</Button>
19
20            <br/><br/>fill<br/>  
21            <Button color='primary' fill='solid'>solid</Button>  &nbsp;  
22            <Button color='primary' fill='outline'>outline</Button>  &nbsp;  
23            <Button color='primary' fill='none'>none</Button>
24
25            <br/><br/>size<br/>  
26            <Button color='primary' size='mini'>mini</Button>  &nbsp;
27            <Button color='primary' size='small'>small</Button>  &nbsp;
28            <Button color='primary' size='middle'>middle</Button>  &nbsp;
29            <Button color='primary' size='large'>large</Button>
30
31            <br/><br/>shape<br/>  
32            <Button color='primary' shape='default'>default</Button>  &nbsp;
33            <Button color='primary' shape='rounded'>rounded</Button>  &nbsp;
34            <Button color='primary' shape='rectangular'>rectangular</Button>
35
36            <br/><br/>type<br/>  
37            <Button color='primary' type='button'>button</Button>  &nbsp;
38            <Button color='primary' type='reset'>reset</Button>  &nbsp;
39            <Button color='primary' type='submit'>submit</Button>
40            
41            <br/><br/>onClick<br/>
42            <Button color='primary' onClick={()=>{alert('hello')}}>onClick</Button>
43        </>
44    )
45};

结果

Switch

属性

参数	说明	类型	默认值
checked	指定当前是否打开	boolean	false
defaultChecked	初始是否打开	boolean	false
loading	加载状态	boolean	false
disabled	禁用状态	boolean	false
onChange	变化时回调函数	function	-
checkedText	选中时的内容	ReactNode	-
uncheckedText	非选中时的内容	ReactNode	-

CSS变量

属性	说明	默认值
--checked-color	填充颜色	var(--gao-color-primary)
--width	宽度	51px
--height	高度	31px
--border-width	边框宽度	2px

示例

结果

Modal

属性

属性	说明	类型	默认值
actions	操作按钮列表	Action[]	[]
afterClose	Modal 完全关闭后的回调	() => void	-
afterShow	完全展示后触发	() => void	-
bodyClassName	Modal 内容类名	string	-
bodyStyle	Modal 内容样式	React.CSSProperties	-
closeOnAction	点击操作按钮后后是否关闭	boolean	false
closeOnMaskClick	是否支持点击遮罩关闭弹窗	boolean	false
content	弹窗内容	React.ReactNode	-
destroyOnClose	不可见时卸载内容	boolean	false
disableBodyScroll	背景蒙层是否禁用 body 滚动	boolean	true
forceRender	被隐藏时是否渲染 DOM 结构	boolean	false
getContainer	自定义弹窗的父容器	`HTMLElement	(() => HTMLElement)
header	顶部区域	React.ReactNode	-
image	图片 url	string	-
maskClassName	Modal 遮罩类名	string	-
maskStyle	Modal 遮罩样式	React.CSSProperties	-
onAction	点击操作按钮时触发	`(action: Action, index: number) => void	Promise`
onClose	关闭时触发	() => void	-
showCloseButton	是否在右上角显示关闭图标按钮	boolean	false
stopPropagation	阻止某些事件的冒泡	PropagationEvent[]	['click']
title	弹窗标题	React.ReactNode	-
visible	显示隐藏	boolean	false

action

属性	说明	类型	默认值
className	Action 类名	string	-
danger	是否为危险状态	boolean	false
disabled	是否为禁用状态	boolean	false
key	唯一标记	`string	number`
onClick	点击时触发	`() => void	Promise`
primary	是否为主要状态	boolean	false
style	Action 样式	React.CSSProperties	-

全局变量

方法一：在 CSS 文件中设置

给 Button组件加一个自定义的 className：

<Button className='test'></Button> 

然后在 CSS 文件中设置 CSS 变量

.test{
    --border-radius: 1000px;
}

方法二：直接通过 style 属性设置

直接通过组件的 style 属性，适合小范围的调整：

1<Button style={{
2  '--border-radius': '2px'
3}}/>

方法三：通过全局变量进行设置

假如需要对整个项目中所有的 Button 都进行样式的调整，那么对每一个按钮进行 CSS 变量的设置显然是不现实的。在这种情况下，可以通过"全局 CSS 变量"（也就是上面表格中的最后一列）进行统一的设置：

1:root:root {
2  --gao-button-border-radius: 1000px;
3}