@b-design/antd

About

B-Design 是阿里云推出的一套面向企业服务领域的设计系统，为阿里云生态及合作伙伴的 SaaS 系统上云提供标准化的设计规范和产品解决方案。作为云计算生态的一部分，B-Design 开放给所有阿里云伙伴和客户，帮助企业完成自己的产品设计与构建。

Note

目前组件库处于内测期 (beta)，请留意版本的变化与迭代。

Install

npm install antd @b-design/antd --save

Usage

引用 B-Design 组件的情况

import {Button} from '@b-design/antd'

引用 css 样式

在 javascript 文件中

import '@b-design/antd/dist/b-design-antd.css';

引用 less 样式 (不建议与 antd.less 同时使用)

在 less 文件中

@import '~@b-design/antd/dist/b-design-antd.less';
@import '<your-own-less>.less';

使用 variable.less

@import '~@b-design/antd/lib/style/components.less';
@import '~@b-design/antd/lib/style/variable.less';
@import '<your-own-less>.less';

其他主题使用

• color 可选为 red、purple、orange、magenta、cold-green、blue-purple、blue、azure

@import '~@b-design/antd/dist/b-design-antd.less';
@import '~@b-design/antd/theme/<color>.less';

引用单个组件样式

import '@b-design/antd/lib/button/style/index.js';

或者使用 babel-plugin

extraBabelPlugins: [
	[
		'babel-plugin-import',
		{
			style: true,
			libraryName: '@b-design/antd',
			libraryDirectory: 'es'
		}
	]
];

仅引用 B-Design css 样式的情况

lite 主题

import '@b-design/antd/dist/b-design-antd.lite.css';
import '@b-design/antd/dist/iconfont.css';

lite variable 主题

import '@b-design/antd/dist/b-design-antd.liteVariable.css';
import '@b-design/antd/dist/iconfont.css';

版本说明

• B-Design 3 Last version --- 3.0.0-beta.0 起，适配 antd 4.20.x
• B-Design 3 Last version --- 3.0.0-alpha.0 起，组件 class 类名前缀为 b-design-。目前仅兼容 antd 4.18
• B-Design 2 Last version --- 2.3.2 组件 class 类名前缀默认为 ant-
• Alpha version --- 2.3.2-alpha.0，组件 class 类名前缀为 b-design-

更换前缀 prefix

在组件中使用 ConfigProvider

在 less 中替换所有 @ant-prefix 的值

使用 Vite 的情况

由于 Webpack 和 Vite 对 less 中@import 的路径解析不同，使用 vite 时需要在 vite.config.ts 加上

resolve: {
  alias: [{ find: /^~/, replacement: '' }]
},

参考：https://github.com/vitejs/vite/issues/2185#issuecomment-784637827

Build Process

• npm i to install packages.
• npm start to start development.
• npm run dist to build dist for release.
• npm run compile to build compile for release.
• npm run docs to build for the doc preview site.
• npm run docs:local to build the doc preview site for local preview.
• npm run transpile to generate docs.
• npm run add:comp <ComponentName> to add a component.
• npm run variable to open a viewers that shows a map of all component variables.