@alicloud/console-components

Alibaba Cloud React Components
ad

项目文档

@alicloud/console-components

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

@ali/design-token-xconsole

  • Balloon
    • 默认使用 v2 版本
    • 修改 animation 属性默认值为 { in: 'fadeIn', out: 'fadeOut' }
  • Balloon.Tooltip
    • 默认使用 v2 版本
    • 修改 delay 属性默认值为 150
    • 修改 popupProps.animation 属性默认值为 { in: 'fadeIn', out: 'fadeOut' }
  • Button
    • 对只包含一个 IconButton 样式做了特殊处理
  • 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
    • directionver 时,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
    • 新增 colorgray
  • 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 };
npm run boot
npm run update-theme
npm run dev
npm publish