jingzhi-ui v0.0.3

jingzhi react ui

为新旧项目能顺利的满足标准UE规范做努力

⚙️ 安装

使用 npm 或 yarn 安装

推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

$ npm install jingzhi-ui --save

$ yarn add jingzhi-ui

如果你的网络环境不佳，推荐使用 cnpm。

⚙️ 项目中引入

示例

import { DatePicker } from 'jingzhi-ui';

ReactDOM.render(<DatePicker />, mountNode);

引入样式

import 'jingzhi-ui/dist/jingzhi-ui.css'; // or 'jingzhi-ui/dist/jingzhi-ui.less'

⚙️ 开发

• 基于antd4.22.0
• 基于react17+、ts4+、less4+开发
• 基于UE4.0规范

建议使用typescript、hook写法

🍥 添加组件

组件放置在components文件夹下

|-- |-- button
|-- |-- demo
|-- |-- |-- base.md // 解析成页面里的组件
|-- |-- style // 样式一定放在这 JS不用引用
|-- |-- |-- index.less
|-- |-- index.tsx // 入口
|-- |-- button.tsx // 其他模块
|-- |-- index.md // 文档展示入口

组件的出口

添加完组件后在 packages/antd-yongyou/components/index.tsx添加相应的导出即可

// ...
export {default as TableEmpty} from './biz-empty';

🧩 样式定义

变量及样式分为三层: 全部通用样式 -> 组件之间通用样式 -> 组件样式 样式写在对应的style文件夹下便可支持babel-import的按需加载

• 基础变量 文件路径: antd-yongyou/components/style/themes/default.less

    @import '../color/colors';
    @import './config';
  
    // 尺寸单位
    @P: 4px;
    @p: 4px;
  
    // -------- Colors -----------
    @primary-color: @red-6;

• 组件样式变量 文件路径antd-yongyou/components/style/themes/components/button.less

    @import '../default.less';
  
    @btn-primary-bg: @primary-color;

• 组件样式

    @import '../../style/themes/index';
    @import '../../style/mixins/index';
    @import './mixin';
  
    &-background-ghost&-primary {
        .button-variant-ghost(@btn-primary-bg);
    }