UNGUESS 设计系统

用于

• 解析平台

技术堆栈

建筑构件

• 🪴 禅桌花园 作为基础设计系统
• ⚛️ 反应 以声明成分为中心的UI
• 📚 故事书 用于开发UI组件 自动生成的文件
• 👩‍🎤 样式组件 用于组件范围型号

维护该系统

• 📦 雅伦 软件包管理
• 📦 国家预防机制 分发
• ✅ 色谱 来防止组件中的 UI 错误( 通过故事本维护者)

为什么

Ungues设计系统将现有的UI组件编码为中央,维护良好的存储器. 它的建立是为了解决一次又一次地将相同的组件粘入多个项目的问题. 这简化了建筑UI与"故事书"的设计模式.

安装

yarn

全球样式

设计系统内的组件假设已经配置出一组全局风格. 根据申请的需要,可以采取以下几种方式:

备选案文1: GlobalStyle 组件

不需要习惯的时候有用 body 应用程序中的样式, 通常会放置在覆盖所有页面的布局组件中, 或是顶层 App 组件.

import { global } from '@storybook/design-system';
const { GlobalStyle } = global;

/* Render the global styles once per page */
<GlobalStyle />

备选案文2:使用 bodyStyles 用于应用样式

当你想在共享的全球造型上更上一层楼的时候就有用.

import { Global, css } from '@storybook/theming';
import { global } from '@storybook/design-system';
const { bodyStyles } = global;

const customGlobalStyle = css`
  body {
    ${bodyStyles}// Custom body styling for the app
  }
`;

const CustomGlobalStyle = () => <Global styles={customGlobalStyle} />;

/* Render the global styles once per page */
<CustomGlobalStyle />