<br />
<br />
<br />

<p align="center" style="margin-top: 60px; margin-bottom: 40px;">
  <a href="https://b-design.aliyun.com">
    <img width="160" src="https://acd-assets.alicdn.com/acd_work/b-design-doc/b-design-logo.svg" >
  </a>
</p>

<br />

## 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 文件中

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

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

在 less 文件中

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

使用 variable.less

```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

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

引用单个组件样式

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

或者使用 babel-plugin

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

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

lite 主题

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

lite variable 主题

```javascript
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.