@28stoneconsulting/design-system 中文文档教程
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
28Stone Design System
28Stone Design System is a reusable component library that helps 28Stone employees to build internal application UIs faster. The goal is to make building durable UIs more productive and satisfying.
The latest version is published here.
Install
28SDS components are written in React, and its stories are written in Component Story Format.
Add 28SDS to your project.
npm install --save @28stoneconsulting/design-system or yarn add @28stoneconsulting/design-system
Use
28SDS is using material-ui theming approach and emotion for syling. Add the following imports into the ts/js file:
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';
and use them like so
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>
);
The codesandbox example can be accessed here
Run and develop 28SDS locally
Clone the 28SDS GitHub project then start Storybook.
yarn && yarn storybook
