- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

Google Earth Engine APP——gee-ui geetemp 前端团队组件库

此星光明发表于 2022/07/25 11:23:54 2022/07/25

【摘要】通过本地python端的安装实现gee ui在本地的使用Getting started安装git clone git@git.i.com:gee-lab/gee-ui.git开发yarn dev发布yarn build启动 storybookstorybook 是组件的文档工具，你可以启动它来在线查看组件如何使用，以及组件的 demoyarn docs现在你可以在浏览器中打开http://l...

通过本地python端的安装实现gee ui在本地的使用

Getting started

安装

git clone git@git.i.com:gee-lab/gee-ui.git

开发

yarn dev

发布

yarn build

启动 storybook

storybook 是组件的文档工具，你可以启动它来在线查看组件如何使用，以及组件的 demo

yarn docs

现在你可以在浏览器中打开http://localhost:6006, 查看组件使用文档

组件

组件实现

在 src/components 目录下新建一个组件目录，比如 button。现在 components 目录下多了一个 button 目录。

在 button 目录下新建index.js文件，用来编写 button 组件的 js 部分

import React from "react";

我们引入了 antd 的 button 组件require("antd/lib/button")作为被包装组件，因为我们需要在它的基础上去实现我们的 button 组件。这里我们没有使用import button from 'antd/lib'是因为 import 会把整个 antd 组件库引入，增加了代码量。

组件的样式同样也需要先引入antd/lib/button的样式，再重写定义自己的样式。在 button 目录下新建style/index.js和style/index.less两个文件，看下style/index.js的内容

import "antd/lib/button/style";

第一行是引入 antd button 的样式，第二行是引入自定义样式文件，你可以在 index.less 写样式来覆盖 antd button 的默认样式。

组件用例

用例编写

编写组件用例，提供给 storybook 生成使用文档，服务于 gee-ui 的使用者。新建button\examples目录，继续新建一个danger.js文件，编写用例组件展示说明 button 组件的 danger 状态，你也可以新建其他用例组件来说明 button 组件的剩余状态，比如 primary,disabled 等。