肠道

麻风病 官方反应设计系统.

一个内部的,有观点的UI图书馆. 主要重点是在我们的产品中提供由一体和统一的UI、UX和无障碍环境.

* 安装

$ npm i @epignosis_llc/gnosis

$ yarn add @epignosis_llc/gnosis

重新推荐的字体家族是 "Mulish", Arial, sans-serif 因此请不要忘记包含它(当然你可以通过自定义主题来改变默认字体家族——下面是更多信息).

请注意: react >= 16.0.0 财务报告和审定财务报表 react-dom >= 16.0.0 是同伴的依赖关系。 而且,情感11正在被使用,这不会在旧的情感项目中起作用.

使用量

开始将您的 App 包装为 ThemeProvider (见下文实例)。 所有其他组件MUST被放入"主题提供",以获得适当的主题上下文.

import { ThemeProvider, Button } from "@epignosis_llc/gnosis";

function App() {
  return (
    <ThemeProvider>
      <Button>My Button</Button>
    </ThemeProvider>
  );
}

要查看每个组件的所有可用道具复制当前重播和运行 npm install 以安装所有依赖,然后 npm start 以全部可用的道具查看故事书中的所有组件.

主题

您可以使用 gnosis 主题默认主题( 颜色, 字体等) 或自定义以适应您的工程需要 。 本节介绍您可以用来修改它的各种选项.

QQ 全球

您可以通过提供序列化样式来添加全局样式, 如下面的例子 :

const globalStyles = {
  "html, body": {
    background: "red",
  },
  h1: {
    fontSize: "5rem",
    textAlign: "center",
  },
  "#my-id": {
    color: "green",
  },
  ".my-css-class": {
    color: "blue",
  },
};

<ThemeProvider globalStyles={globalStyles}></ThemeProvider>;

QQ 主题配置

也可以简单地通过提供一个新的颜色主题来应用自己的品牌和颜色. 只要找到您需要更改的组件的主题配置 - 下面的示例是用于更改成功按钮颜色 - 并创建一个带有您新值的对象 。 新的主题配置会与默认主题合并,而最终合并的主题会将所有的新值应用到成功按钮(或任何其他组件)上. 默认主题的配置文件位于 ./src/theme/default/config/ 目录 - 例如按钮组件的默认主题是 ./src/theme/default/config/button.ts。查看默认主题的配置并创建/配置您的新自定义主题.

const myCustomTheme = {
  button: {
    success: {
      default: {
        background: "pink",
        borderColor: "red",
        color: "white",
      },
      hover: {
        background: "red",
        borderColor: "pink",
        color: "white",
      },
      active: {
        background: "red",
        borderColor: "pink",
        color: "white",
      },
    },
  },
};

<ThemeProvider theme={myCustomTheme}></ThemeProvider>;

图标

您可以使用这样的自定义 Svg 图标 :

import { HomeSVG, CalendarSVG, CircleQuestionSVG } from "@epignosis_llc/gnosis/icons";

<HomeSVG height={32} />
<CalendarSVG height={32} />
<CircleQuestionSVG height={32} />

您可以查看所有可用的图标名称 gnosis/src/icons/index.ts 或者通过检查适当的故事书页.

即将到来的构成部分

• 多选择
• 图表
• 输入日期
• 文件输入