内容简介:Ant Design 3.0.0 正式发布,Ant Design 是蚂蚁金服开发和正在使用的一套企业级的 UI 设计语言和 React 实现。 主要变化 全新的色彩系统, 组件主色由 『#108EE9』 改为 『#1890FF』,新主色我们称之为“拂晓蓝”。...
Ant Design 3.0.0 正式发布,Ant Design 是蚂蚁金服开发和正在使用的一套企业级的 UI 设计语言和 React 实现。
主要变化
全新的色彩系统, 组件主色由 『
#108EE9
』 改为 『#1890FF
』,新主色我们称之为“拂晓蓝”。全新的视觉样式和组件尺寸,更现代更美观。
基础字体大小由
12px
增大到14px
。默认语言由中文改为英文。
全面支持 React 16。
更友好的 TypeScript 支持。
新的 List 组件。
新的 Divider 组件。
新增 30 个图标。
不兼容改动
Card 的
noHovering
属性重命名为hoverable
,且默认值改为true
。调整了 Grid 的响应式断点值。详见 #7230
Form
getFieldDecorator
的exclusive
参数被移除,此类场景应该由 Radio.Group、Checkbox.Group 之类的组件来完成。新增
Form.createFormField
方法,mapPropsToFields
返回的字段都需要由该方法创建。import { Form } from 'antd'; Form.create({ mapPropsToFields() { return { - name: { value: 'antd' }, + name: Form.createFormField({ value: 'antd' }), }; }, })
优化了全局的重置样式,如果升级后你的全局样式有问题,可以引入我们提供的 2.x 兼容样式。
import 'antd/style/v2-compatible-reset';
或者在 less 里引入
@import '~antd/style/v2-compatible-reset.css';
由于默认语言改为英文,如果你需要显示中文,现在需要配置
LocalProvider
。import { LocaleProvider } from 'antd'; import zhCN from 'antd/lib/locale-provider/zh_CN'; ReactDOM.render( <LocaleProvider locale={zhCN}><YourApp /></LocaleProvider>, document.getElementById('root') );
Form 下的表单控件不再默认为 size="large"。
以下在 2.x 中废弃的特性被移除
移除了 DatePicker.Calendar, 请直接使用 Calendar 组件。
移除了 DatePicker 的
toggleOpen
属性, 请使用onOpenChange
代替。移除了 Form 的
inline
、horizontal
、vertical
属性,请使用layout
代替。移除了 Select 的
multiple
、tags
、combobox
属性,请使用mode
代替。移除了 Input 对
type='textarea'
的支持,请直接使用Input.TextArea
组件。移除了 Mention 的
toEditorState
方法,请使用toContentState
代替。
新增功能及改进
Tabs 新增
size="large"
。Row 的
gutter
属性新增响应式断点的支持,可以使用诸如gutter={{ sm: 16, lg: 32 }}
的设置。Input.Search 新增
enterButton
用于设置自定义的搜索图标。#7596Mention 新增
placement
, 用于设置下拉框的弹出方向。Carousel 新增
next()
、prev()
、goTo(slideNumber)
方法,用于控制面板展示。Button 新增链接支持,当提供
href
时会自动渲染为<a>
。#8343Steps 进行了重构,首次渲染的时候不会再闪烁。 #6010
Switch 新增
loading
属性,用于表现加载中的状态。Menu
新增
subMenuOpenDelay
和subMenuCloseDelay
,用于设置子菜单打开和关闭的延迟。新增
forceSubMenuRender
,用于强制渲染子菜单。#5586Form
新增显示验证信息时的动画效果。
新增按条件渲染表单项的支持。#react-component/117
Message
duration
允许可选 #7857 @monkindeyBadge
新增
offset
属性,用于设置状态点的位置偏移。status
允许与children
同时使用。#8164Card
DatePicker
TimePicker
新增
hourStep
、minuteStep
、secondStep
,用于设置时间步长。例子新增
focusOnOpen
,用于设置在打开面板的时候是否聚焦输入框。Table
新增
components
属性,用于覆盖表格元素的默认标签。// 支持覆盖的元素 const components = { table: MyTable, header: { wrapper: HeaderWrapper, row: HeaderRow, cell: HeaderCell, }, body: { wrapper: BodyWrapper, row: BodyRow, cell: BodyCell, }, }; <Table components={components} columns={columns data={data}} />
新增
onRow
属性,用于设置表格列的属性。新增
onHeaderRow
,用户设置表格头部列的属性。新增
column[onCell]
,用户设置单元格的属性。新增
column[onHeaderCell]
,用于设置头部单元格的属性。新增
column[align]
,用于设置列内文字的对其方向。新增
rowSelection[fixed]
,用于固定选择列。废弃
getBodyWrapper
,请使用components
属性代替。废弃以下属性
onRowClick
,onRowDoubleClick
、onRowContextMenu
、onRowMouseEnter
、onRowMouseLeave
,请使用onRow
代替。<Table onRow={(record) => ({ onClick: () => {}, onDoubleClick: () => {}, onContextMenu: () => {}, onMouseEnter: () => {}, onMouseLeave: () => {}, })} />
Select
默认和多选模式下 Option 的值允许使用 number。
新增
maxTagCount 和
maxTagPlaceholder`,用与设置最多可显示的选中项。新增
showAction
,用于设置出发下拉框打开的事件。新增
onMouseEnter
和onMouseLeave
事件回调。LocaleProvider
新增冰岛语。#7561 @paunovic-stefan
新增埃及语。#7888 @mohamed-seada-1994
Bug 修复
Form
修复输入框的图标会被验证图标覆盖的问题。
修复使用大尺寸输入框时,验证图标不居中的问题。
修复 Menu 按键时的报错。#8089
其他
在 TypeScript 中使用时不再需要设置
allowSyntheticDefaultImports
。从
peerDependencies
中移除了react@0.14
和react@15
,虽然目前 antd 3.0.0 依然可以在旧版本的 React 上使用,但是我们在未来有可能使用 React 16 的新特性,所以强烈建议升级到 React 16,见升级文档。全面支持 ES Module ,antd 及其依赖的底层 react-component 组件全部提供了 ES Module 的构建版本,如果你使用 webpack 3,可以把
babel-import-plugin
的libraryDirectory
设置为es
,以获得 Tree Shaking 的优化效果。最后,我们会继续维护 2.x 的分支到明年 6 月份。
更多内容见 Ant Design 3.0 发布公告!
【声明】文章转载自:开源中国社区 [http://www.oschina.net]
以上所述就是小编给大家介绍的《Ant Design 3.0.0 正式发布,大量修复和改进》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- FreeBSD 13.0-RC1 发布:改进 TCP 性能、修复和改进 SCTP
- PhpStorm 2017.3.5 发布,错误修复和改进
- Ubuntu 18.04.1 发布,安全修复和改进
- WebStorm 2018.2.2 发布,功能改进和修复
- PhpStorm 2017.3.4 发布,修复错误和功能改进
- Tomcat 7.0.88 发布,Bug 修复和改进
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。