简单UI

简单UI 是一个组件库,旨在帮助开发人员为使用 EasyPost 的托运人创造最佳经验.

开始

1. 使用 Easy UI 安装 无 或您的项目软件包管理器 :

npm install @easypost/easy-ui --save

2. 将 Easy UI CSS 文件包含在您的应用条目中 :

import "@easypost/easy-ui/style.css";

3. 在Easy UI里播放您的应用程序 Provider数字 :

import { Provider as EasyUIProvider } from "@easypost/easy-ui/Provider";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <EasyUIProvider>
    <App />
  </EasyUIProvider>,
);

4. 使用 Easy UI 组件 :

import { VerticalStack } from "@easypost/easy-ui/VerticalStack";
import { Button } from "@easypost/easy-ui/Button";

function App() {
  return (
    <VerticalStack>
      <Button>Click me!</Button>
    </VerticalStack>
  );
}

看我们的 故事书 详细组成部分文件.

字体

简单UI Poppins 字体。 你可以自己主持,也可以使用Google字体. 由于自己主持, Poppins 包含在 .storybook/public/fonts/poppins。 。 。 .

如果托管您自己, 请在样式表内包含此声明, 用字体所在位置替换路径 :

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src:
    url("/fonts/poppins/poppins-v20-latin-300.woff2") format("woff2"),
    url("/fonts/poppins/poppins-v20-latin-300.woff") format("woff");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url("/fonts/poppins/poppins-v20-latin-400.woff2") format("woff2"),
    url("/fonts/poppins/poppins-v20-latin-400.woff") format("woff");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:
    url("/fonts/poppins/poppins-v20-latin-500.woff2") format("woff2"),
    url("/fonts/poppins/poppins-v20-latin-500.woff") format("woff");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:
    url("/fonts/poppins/poppins-v20-latin-600.woff2") format("woff2"),
    url("/fonts/poppins/poppins-v20-latin-600.woff") format("woff");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    url("/fonts/poppins/poppins-v20-latin-700.woff2") format("woff2"),
    url("/fonts/poppins/poppins-v20-latin-700.woff") format("woff");
}

服务器渲染

当服务器渲染一个使用 Easy UI 和 React < 18 的应用程序时, 您的应用程序必须被一个 React Aria 的单实例所包裹 SSRProvider。如果一个应用程序正在使用附加版本的 React Aria,确保只有一个版本的 @react-aria/ssr 利用国家预防机制 overrides 或者亚恩的 resolutions 属性.

发展

我们用"故事书"来创建一个简单的,热量重载的游乐场,用于开发这些组件.

图标