@pitrix/lego-ui
v0.3.2
Published
QingCloud UI Component
Downloads
10
Readme
Lego-UI
React & CSS UI Framework.
文档
安装
npm install @pitrix/lego-ui --save
使用示例
import { LocaleProvider, Button } from '@pitrix/lego-ui';
import { Locales } from './locales';
const App = () => (
<LocaleProvider locales={locales}>
<Button>Button</Button>
</LocaleProvider>
);
ReactDOM.render(<App />, mountNode);
lego-ui 部分组件有使用
locale
,LocaleProvider
默认会加载 lego-ui 的本地化文件,你也可以在你的项目中使用,只需要自定你的locales
, 关于国际化请查看 LocaleProvider。
引入样式
如果没有定制需求,可以直接引入 css 样式文件:
import '@pitrix/lego-ui/lib/scss/lego-ui.min.css';
或者引入 scss 样式文件:
import '@pitrix/lego-ui/lib/scss/index.scss';
这样可以直接使用 lego-ui 的默认主题样式。
定制主题
lego-ui 设计规范上支持一定程度的样式定制,以满足不同产品的多样化视觉需求,包括但不限于主色、圆角、边框和部分组件的视觉定制。
样式变量
定制方式
建立一个单独的 scss 文件如下,然后再引入这个文件:
// 引入默认主题
@import '~@pitrix/lego-ui/lib/scss/themes/default';
// 引入 SVG 图标组件的样式
@import '~@pitrix/lego-ui/lib/scss/base/icon';
// 在这里定义你要覆盖的变量
// $primary: blue;
// $button-color: #ccc;
// 引入核心的 Bulma 样式与组件样式
@import '~@pitrix/lego-ui/lib/scss/core.scss';
- 注意:这种方式已经载入了所有组件的样式。
目录结构
|-- build/ _____________________ # 构建脚本
|-- config/ _____________________ # 构建环境配置
|-- dist/ _____________________ # 文档站点构建输出目录
|-- lib/ _____________________ # npm 发布代码目录
|-- mock/ _____________________ # mock 脚本
|-- site/ _____________________ # 文档站点
| |-- assets/ _____________________ # 静态资源文件
| |-- layout/ _____________________ # 页面布局
| |-- pages/ _____________________ # 文档内容
| |-- routes/ _____________________ # 站点路由
| |-- scss/ _____________________ # 样式文件
|-- src/ _____________________ # 源码
| |-- assets/ _____________________ # 静态资源文件
| |-- components/ _____________________ # 组件源码
| |-- locales/ _____________________ # 本地化文件
| |-- scss/ _____________________ # 样式
| `-- utils/ _____________________ # 工具类
|-- static/ _____________________ # 静态资源
脚本说明
# 运行本地开发服务,默认端口 3000
npm run dev
# 构建文档站点
npm run build
# 代码检查
npm run lint
# js,jsx, markdown 文件代码检查
npm run eslint
# scss 文件代码检查
npm run stylelint
# 代码格式化
npm run formatter
# 构建 npm 发布需要的代码
npm run build:lib
# 单独构建 scss 文件
npm run build:sass
# 单独构建 icon
npm run build:icon
# 构建 版本的 badge 图标
npm run build:badge
# 发布新版
npm run release
关于图标库
如需要向图标库中添加图标
- 复制图标到对应的目录,例如
/src/assets/icons/object
- 构建
npm run build:icon
; - 将新图标添加到
site/pages/docs/components/icon.md
⚠️ 注意:svg 图片大小、颜色(#324558)。
git commit 提交规范
Commit Message 需要遵循以下格式:
type(scope?): subject #scope is optional
其中:
- type: 用于定义这次提交的类型,可选值包括:feat / fix / perf / refactor / revert / build / ci / chore / style / test / docs。
- scope: 用于定义这次提交的改动范围关键字,小写,可选。
- subject: 用于描述这次提交的改动内容,建议统一中文。
提交的过程中会做 eslint 检查,不通过则不能提交。
编码规范
版本发布流程
标准版本:
npm run release
qnpm publish
构建发布到仓库中所需的文件,standard-version 会生成 changelog,打上 tag 并提交 commit;
你也可以指定版本
qnpm run release -- --release-as 1.1.0
预发布版本:
预发布版本不希望生成 changelog, 所以可以在 package.json 中 手动调整版本号,例如 0.1.5-xx,发布时需要指定 tag 为 next。
qnpm publish --tag=next
文档站点
http://172.16.60.3:8080/view/f2e/job/lego-ui/