@alicloud/console-components
v2.2.35
Published
Alibaba Cloud React Components
Downloads
1,594
Keywords
Readme
@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
- 400pxsmall
- 600pxmedium
- 800pxlarge
- 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