组件库

目录结构

|-- .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'|'success' |'warning'|'danger' | 'default' | | fill | 填充模式 | 'solid' |'outline' |'none' | 'solid' | | size | 大小 | 'mini' | 'samll' | 'middle' | 'large' | 'middle' | | block | 是否是块级元素 | boolean | false | | disabled | 是否禁用 | boolean | false | | type | 原生 button 元素的 type 属性 | 'submit'| 'reset' |'button' | 'button' | | onClick | 点击事件 | event | - | | shape | 按钮的形状 | 'default' | 'rounded' | 'rectangular' | 'default' |

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 |

示例

import React from 'react'
import Button from 'rollup-project-test';

export default () =>{
    return (
        <>
            color<br/>
            <Button></Button>  &nbsp;
            <Button color='danger'>danger</Button>  &nbsp;  
            <Button color='success'>success</Button>  &nbsp;  
            <Button color='warning'>warning</Button>  &nbsp;  
            <Button color='primary'>primary</Button>  &nbsp;  

            <br/><br/>block<br/>
            <Button block color='primary'>block</Button>

            <br/><br/>disabled<br/>
            <Button disabled color='primary'>disabled</Button>

            <br/><br/>fill<br/>  
            <Button color='primary' fill='solid'>solid</Button>  &nbsp;  
            <Button color='primary' fill='outline'>outline</Button>  &nbsp;  
            <Button color='primary' fill='none'>none</Button>

            <br/><br/>size<br/>  
            <Button color='primary' size='mini'>mini</Button>  &nbsp;
            <Button color='primary' size='small'>small</Button>  &nbsp;
            <Button color='primary' size='middle'>middle</Button>  &nbsp;
            <Button color='primary' size='large'>large</Button>

            <br/><br/>shape<br/>  
            <Button color='primary' shape='default'>default</Button>  &nbsp;
            <Button color='primary' shape='rounded'>rounded</Button>  &nbsp;
            <Button color='primary' shape='rectangular'>rectangular</Button>

            <br/><br/>type<br/>  
            <Button color='primary' type='button'>button</Button>  &nbsp;
            <Button color='primary' type='reset'>reset</Button>  &nbsp;
            <Button color='primary' type='submit'>submit</Button>
            
            <br/><br/>onClick<br/>
            <Button color='primary' onClick={()=>{alert('hello')}}>onClick</Button>
        </>
    )
};

结果

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) | null | null | | header | 顶部区域 | React.ReactNode | - | | image | 图片 url | string | - | | maskClassName | Modal 遮罩类名 | string | - | | maskStyle | Modal 遮罩样式 | React.CSSProperties | - | | onAction | 点击操作按钮时触发 | (action: Action, index: number) => void | Promise<void> | - | | 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<void> | - | | primary | 是否为主要状态 | boolean | false | | style | Action 样式 | React.CSSProperties | - |

全局变量

方法一：在 CSS 文件中设置

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

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

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

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

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

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

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

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

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

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