rollup-project-test v1.2.11

组件库

目录结构

|-- .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

属性

CSS变量

示例

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

属性

CSS变量

示例

结果

Modal

属性

action

全局变量

方法一：在 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;
}