欢迎使用Functional UI Kit

Functional UI Kit是一个专业设计系统，面向设计和开发团队以及个人。我们提供了每个项目中需要的核心组件，专注于可访问性、开发体验和统一的设计师-开发者体验。

我们确保了Figma变量和CSS变量可以无缝协同工作。它们共享相同的名称、用法和继承结构。这不仅仅是一个额外的功能；这是核心方法。

每个Figma变量在CSS中都有直接对应，因此不会混淆。在进入开发阶段时，您的设计理念保持清晰明了。

• 网站: www.functional-ui-kit.com (opens new window)
• Figma库: https://www.figma.com/community/file/1338456115232271694 (opens new window)
• Storybook: https://functional-ui.github.io/functional-ui-kit (opens new window)
• Github: www.github.com/functional-ui/functional-ui-kit (opens new window)
• Npm: [www.npmjs.com/package/functio ## 安装

安装最新版本的 functional-ui-kit 从 NPM。

npm install functional-ui-kit

设置 CSS

将 functional-ui-kit 的 CSS 文件导入到您的项目中的 CSS 文件中

@import 'functional-ui-kit/style';

html {
  ...

您也可以直接将 CSS 文件导入到您的主 React 应用程序文件中

import React, { Component } from 'react'
import 'functional-ui-kit/style';

class App extends Component {
  ...

自定义主题

您可以通过覆盖 CSS 变量来自定义主题。您可以在主题文件 (opens new window)中找到变量列表。

:root {
  --fui-color-brand: var(--fui-color-green-700);
}

[data-theme="dark"],
[data-theme="dark"] * {
  --fui-color-brand: var(--fui-color-green-500);
}
...

使用组件

您可以通过将它们导入到您的 React 应用程序文件中来使用组件

import React, { Component } from 'react'
import { FuiBadge } from 'functional-ui-kit/fui-badge';

function App() {
  return (
    <div>
      <FuiBadge label='label' />
    </div>
  );
}