@28stoneconsulting/design-system 中文文档教程

Question

28Stone Design System

28Stone Design System 是一个可重用的组件库，可以帮助 28Stone 员工更快地构建内部应用程序 UI。 目标是使构建持久的 UI 更加高效和令人满意。

最新版本发布在此处。

Install

28SDS组件是用React编写的，它的故事是用Component Story Format编写的。

将 28SDS 添加到您的项目中。

npm install --save @28stoneconsulting/design-system 或者 yarn add @28stoneconsulting/design-system

Use

28SDS 正在使用 material-ui 主题化方法和情感符号。 将以下导入添加到 ts/js 文件中：

import CssBaseline from '@material-ui/core/CssBaseline/CssBaseline';
import { StylesProvider, MuiThemeProvider } from '@material-ui/core/styles';
import { ThemeProvider } from '@emotion/react';
import { themeDark as theme, Button, Badge } from '@28stoneconsulting/design-system';

并像这样使用它们

const example = () => (
  <StylesProvider injectFirst>
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      <ThemeProvider theme={theme}>
        <div>
          <Button appearance="primary" onClick={() => {}}>
            Do something
          </Button>
          <Badge onClick={() => {}}>Cool</Badge>
        </div>
      </ThemeProvider>
    </MuiThemeProvider>
  </StylesProvider>
);

可以访问 codesandbox 示例 此处

Run and develop 28SDS locally

克隆28SDS GitHub 项目，然后启动 Storybook。

<代码>纱线 && 纱线故事书

Resources

• GitHub repository