@alicloud/console-components NPM

@alicloud/console-components

console-components 是针对 阿里云控制台场景 的 React 组件库，基于 Alibaba Fusion 组件库实现。由于 Fusion 配套的 DSM 系统无法做到对组件的完全样式自定义，所以需要通过属性、样式的覆盖来实现一些设计规范。

主要内容

和 Fusion API 的差异

Balloon
- 默认使用 v2 版本
- 修改 animation 属性默认值为 { in: 'fadeIn', out: 'fadeOut' }
Balloon.Tooltip
- 默认使用 v2 版本
- 修改 delay 属性默认值为 150
- 修改 popupProps.animation 属性默认值为 { in: 'fadeIn', out: 'fadeOut' }
Button
- 对只包含一个 Icon 的 Button 样式做了特殊处理
Card
- 覆盖了部分样式
- 增加了以下子组件，由于历史依赖关系，暂时保留，但不推荐使用
  - Card.DropdownActions
  - Card.CollapsableHead
  - Card.CollapsableTail
CascaderSelect
- 修改 popupProps.align 属性默认值为 tl bl
- 修改 popupProps.offset 属性默认值为 [0, 4]
DatePicker
- 修改 format 属性默认值为 moment().localeData().longDateFormat('ll')
Dialog
- 新增 size 属性，不同 size 会设置不同 style.width 默认值
  - mini - 400px
  - small - 600px
  - medium - 800px
  - large - 1200px
- 修改 shouldUpdatePosition 属性默认值为 true
Drawer
- 覆盖了部分属性默认值
Form
- 修改 labelTextAlign 属性默认值为 left
Icon
- 无改动，但建议替换为 @ali/xconsole-icons
MenuButton
- 修改 popupProps.align 属性默认值为 tl bl
- 修改 popupProps.offset 属性默认值为 [0, 4]
Nav
- 当 direction 为 ver 时，activeDirection 默认值为 right
Pagination
- 修改 shape 属性默认值为 normal
- 修改 pageSizePosition 属性默认值为 end
Range
- 修改 marksPosition 属性默认值为 below
Rating
- 修改 allowClear 属性默认值为 true
Search
- 覆盖了 filterProps 属性默认值
  - 修改 popupProps.align 属性默认值为 tl bl
  - 修改 popupProps.offset 属性默认值为 [0, 4]
Select
- 修改 popupProps.align 属性默认值为 tl bl
- 修改 popupProps.offset 属性默认值为 [0, 4]
- 修改 autoWidth 属性默认值为 false
SplitButton
- 修改 popupProps.align 属性默认值为 tl bl
- 修改 popupProps.offset 属性默认值为 [0, 4]
Step
- 修改 stretch 属性默认值为 true
Table
- 替换 Table 为 Table.StickyLock，两者 API 一致
- 修改 hasBorder 属性默认值为 false
Transfer
- 修改 searchProps.size 属性默认值为 small

样式覆盖

参见设计规范

新增组件

Skeleton
- 使用了 react-loading-skeleton
SlidePanel
- 使用了 @alicloud/console-components-slide-panel

删除组件

Tag.Colored
Tag.ColoredGroup

设计规范

使用组件库

import { Button } from '@alicloud/console-components'; // 纯组件，无样式
// 如果你使用了 @ali/xconsole，可以替换为
// import { Button } from '@ali/xconsole/ui';
import '@alicloud/console-components/dist/xconsole.css'; // 样式文件

export { Button };

DEV

Install

npm install

同步主题

npm run update-theme

本地调试

npm run dev

发布

npm publish

@alicloud/react-hook-controllable @alifd/next classnames dayjs hoist-non-react-statics react-loading-skeleton

@linkdesign/iot-components @linkdesign/iot-screen @infinitebrahmanuniverse/nolb-_aliclo @everything-registry/sub-chunk-43 pont-ui @alicloud/gatsby-theme-console-doc @alicloud/xconsole @alicloud/xconsole-rc-step @alicloud/xconsole-welcome @alicloud/console-components-lib-documenter @alicloud/console-components-utils @linkdesign/components @iotx/components-utils @iotx/rc-master-data @wssgryx/npm-test @zalastax/nolb-_alicl

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

8 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

11 months ago

10 months ago

11 months ago

10 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago