Emooa UI

灵活丰富的 UI 组件设计语言和 React 组件库。

✨ 特点

• 🛡 用 TypeScript 编写，具有可预测的静态类型。
• ⚙️ 整套设计资源和开发工具。

🖥 环境支持

• 现代浏览器
• 版本

| Chrome | Edge | Firefox | Safari | Electron | | :-: | :-: | :-: | :-: | :-: | | 51+ | 15+ | 55+ | 12.1+ | last 2 versions |

安装

npm install @emooa/ui
// or
yarn add @emooa/ui

用法

简单的例子

import { Button, GeoJSON, Image, Space } from "@emooa/ui";

export default () => (
  <>
    <Space>
      <Button type="primary">Primary Button<Button/>
      <Button>Secondary Button<Button/>
    <Space/>
    <Image url="https://api.emooa.com/aimg" />
    <GeoJSON
      data={{
        type: 'Feature',
        geometry: {
          type: 'LineString',
          coordinates: [
            [102.0, 0.0],
            [103.0, 1.0],
            [104.0, 0.0],
            [105.0, 1.0],
          ],
          properties: {
            strokeStyle: 'green',
          },
        },
        properties: {
          name: '线',
        },
      }}
    />
  </>
);

组件

目前已经实现 Button、Icon、Image、GeoJSON、Space 等常见组件，并在逐步扩充，具体见 Emooa UI Components。

Licensed

MIT Licensed
Copyright (c) 2023 Emooa

常见问题

• 无法解析源映射。

  • WARNING in ./node_modules/@emooa/ui/lib/image/index.js

    Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

    Failed to parse source map from '/xxx/node_modules/@emooa/ui/src/image/index.tsx' file: Error: ENOENT: no such file or directory, open '/xxx/node_modules/@emooa/ui/src/image/index.tsx'

  • Actually, CRA with Webpack 5.x cause it. They are working on resolving. https://github.com/facebook/create-react-app/pull/11752

  • 您可以通过将 GENERATE_SOURCEMAP=false 添加到 .env 文件来删除警告。阅读更多

    "scripts": {
      "start": "GENERATE_SOURCEMAP=false && react-scripts start",
    }