@1hive/tecommons-ui 中文文档教程

Question

Overview

这个库是用于构建用户界面的 aragonUI 库的一个分支。 该库的主题是为从现在开始在 TokenEngineer 项目中使用而定制的。 它提供构建感觉与 TEC 生态系统集成的体验所需的组件，并且可以在客户端或服务器端使用。

可以在 aragonUI 网站 上找到完整的文档。

Getting Started

如果您不熟悉 aragonUI，我们建议您从入门页面开始。 如果您只想知道如何将 aragonUI 添加到您的项目中，请查看快速设置：

Quick setup

将 tecUI 与 npm 中的样式组件一起

npm install --save @tecommons/ui styled-components

安装：将其资产复制到您的公共目录中：

npx copy-aragon-ui-assets ./public

使用 Main< 包装您的应用程序/code> 组件：

import React from 'react'
import { Main } from '@aragon/ui'

function App() {
  return (
    <Main>
      <h1>Hello aragonUI!</h1>
    </Main>
  )
}

您的项目现在可以使用 TEC-UI。 ????

打开 https://ui.aragon.org/ 查看可用组件的列表并了解如何使用它们。

Assets

TEC-UI 需要一些资产（例如字体）才能正常工作。 这些需要复制到库可以访问的地方，例如使用 public/ 目录/blob/master/packages/react-scripts/template/README.md#adding-assets-outside-of-the-module-system">创建 React 应用程序。

使用提供的 copy-aragon-ui-assets 命令复制这些资产：

npx copy-aragon-ui-assets ./public

默认情况下，它将在指定目录中创建一个名为 aragon-ui 的目录。

该安置通过

组件与库通信。 默认路径是 ./aragon-ui/，但您可以使用 assetsUrl 属性更改它：

import { Main } from '@aragon/ui'

const App = () => (
  <Main assetsUrl="http://example.com/aragon-ui-assets/">
    <h1>Hello aragonUI!</h1>
  </Main>
)

您可能还想将它添加为项目中的构建步骤，这样tecUI就可以升级而不必担心这个了。

"scripts": {
  "sync-assets": "copy-aragon-ui-assets ./public",
  "build": "npm run sync-assets && react-scripts build",
  "start": "npm run sync-assets && react-scripts start"
}

有关详细信息，请参阅 copy-aragon-ui-assets -h。

Build and Develop

请查看 CONTRIBUTING.md。

License

麻省理工学院，请参阅 LICENSE。