Uih-design-token1 NPM

一套企业级 UI 设计语言和 React 组件库。

✨ 特性

🌈 提炼自企业级中后台产品的交互语言和视觉风格。
⚙️ 全链路开发和设计工具体系。

🖥 兼容环境

IE / Edge	Firefox	Chrome	Safari
IE11,Edge last 2 versions	last 2 versions	last 2 versions	last 2 versions

🔍 依赖

样式库是基于ant-design组件库进行设计的，使用本样式库请确保项目已经安装antd、antd-style库.

npm install antd --save
npm install antd-style -D

# or

pnpm install antd --save
pnpm install antd-style -D

# or

yarn add antd
yarn add antd-style -D

📦 安装

npm install uih-design-token --force

# or

pnpm install uih-design-token --force

# or

yarn add uih-design-token --force

💻 使用

建议在Layout或main中添加如下代码切换明暗主题

import { ThemeProvider } from 'antd-style';
import { useState } from 'react';
import {
  UIHDesignTokenStyle,
  UIHDesignToken,
  UIHDarkAlgorithm,
  UIHLightAlgorithm,
} from 'uih-design-token';
// 所有算法使用与Ant Design一致

// 引入样式标签&明暗模式算法
// 必须要先引用 UIHDesignToken, UIHDesignTokenStyle才能生效
export default function Layout() {
  const [theme, setTheme] = useState('dark');
  return (
    <ThemeProvider
      theme={{
        algorithm: theme === 'dark' ? UIHDarkAlgorithm : UIHLightAlgorithm,
        token: UIHDesignToken,
      }}
    >
      <>
        <UIHDesignTokenStyle />
        <Outlet />
      </>
    </ThemeProvider>
  );
}