@alicloud/console-components

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

主要内容

主题 css var token

@ali/design-token-xconsole

和 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]
• Collapse
  • 新增 type属性, 不同值对应不同的面板类型
    • default - 默认样式
    • card - 卡片样式
• 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
• Tag
  • 新增 color 值 gray
• Transfer
  • 修改 searchProps.size 属性默认值为 small

样式覆盖

参见设计规范

新增组件

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

删除组件

• Tag.Colored
• Tag.ColoredGroup

设计规范

• XConsole Design V2.1
• XConsole Design V2.5

使用组件库

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

export { Button };

初始化工程

npm run boot

DEV

同步主题

npm run update-theme

本地调试

npm run dev

发布

npm publish