通过本地python端的安装实现gee ui在本地的使用
Getting started
安装
-
git clone git@:gee-lab/
-
cd gee-ui
-
yarn install
开发
yarn dev发布
yarn build启动 storybook
storybook 是组件的文档工具，你可以启动它来在线查看组件如何使用，以及组件的 demo
yarn docs现在你可以在浏览器中打开http://localhost:6006, 查看组件使用文档
组件
组件实现
在 src/components 目录下新建一个组件目录，比如 button。现在 components 目录下多了一个 button 目录。
在 button 目录下新建文件，用来编写 button 组件的 js 部分
-
import React from "react";
-
const AntButton = require("antd/lib/button");
-
-
export default class Button extends {
-
render() {
-
const props = { type: "danger", ... };
-
return <AntButton {...props} className="gee-button" />;
-
}
-
}
我们引入了 antd 的 button 组件require("antd/lib/button")作为被包装组件，因为我们需要在它的基础上去实现我们的 button 组件。这里我们没有使用import button from 'antd/lib'是因为 import 会把整个 antd 组件库引入，增加了代码量。
组件的样式同样也需要先引入antd/lib/button的样式，再重写定义自己的样式。在 button 目录下新建style/和style/两个文件，看下style/的内容
-
import "antd/lib/button/style";
-
import "./";
第一行是引入 antd button 的样式，第二行是引入自定义样式文件，你可以在 写样式来覆盖 antd button 的默认样式。
组件用例
用例编写
编写组件用例，提供给 storybook 生成使用文档，服务于 gee-ui 的使用者。 新建button\examples目录，继续新建一个文件，编写用例组件展示说明 button 组件的 danger 状态，你也可以新建其他用例组件来说明 button 组件的剩余状态，比如 primary,disabled 等。
-
//
-
import React, { Component } from "react";
-
import "../style";
-
import Button from "../index";
-
-
const sectionStyle = {
-
display: "flex",
-
flexDirection: "column"
-
};
-
-
const articleStyle = {
-
display: "flex",
-
margin: "5px 0px"
-
};
-
-
const buttonStyle = {
-
marginRight: "5px"
-
};
-
-
export default class extends Component {
-
render() {
-
return (
-
<section style={sectionStyle}>
-
<article style={articleStyle}>
-
<Button style={buttonStyle} type="danger">
-
danger
-
</Button>
-
<Button type="danger" disabled={true}>
-
danger disabled
-
</Button>
-
</article>
-
</section>
-
);
-
}
-
}
连接 storybook
为了用例能被 storybook 使用，需要在docs/文件下做以下配置
-
= [
-
{
-
name: "Button",
-
component: getDefaultExport(require("../src/components/button")),
-
examplesContext: (
-
"../src/components/button/examples",
-
true,
-
/\.jsx?$/
-
),
-
examplesContextRaw: (
-
"!!raw-loader!../src/components/button/examples",
-
true,
-
/\.jsx?$/
-
)
-
},
-
{
-
name: "Modal",
-
component: getDefaultExport(require("../src/components/modal")),
-
examplesContext: (
-
"../src/components/modal/examples",
-
true,
-
/\.jsx?$/
-
),
-
examplesContextRaw: (
-
"!!raw-loader!../src/components/modal/examples",
-
true,
-
/\.jsx?$/
-
)
-
}
-
];
我们在数组中新增了一个 button 相关的配置项，这样就完成了组件用例与 storybook 的连接。打开http://localhost:6006 网页侧边栏应该多了一个 Button 项，可以开始查看关于 Button 组件的使用实例。
组件测试
新建button\文件...