用 Ant Design 组件做设计,你可能不知道的细节

目录

一、AntD 还是 AntDV?

Ant Design 和 Ant Design Vue 不一样
Ant Design 和 Ant Design Vue 不一样
Ant Design 和 Ant Design Vue 的组件样式不一样
Image for post
Image for post
AntD 组件的版本之间部分组件样式会有区别

二、全局样式

许多重复的色值、字号、圆角需要逐一标注、验收
许多重复的色值、字号、圆角需要逐一标注、验收
许多重复的色值、字号、圆角需要逐一标注、验收
直接向开发交付一份样式表,提高双方工作效率
直接向开发交付一份样式表,提高双方工作效率
直接向开发交付一份样式表,提高双方工作效率

三、字体家族

AntD 的字体解决方案
AntD 的字体解决方案
AntD 的字体解决方案

1. 检索是否存在子字体样式

2. 等宽字体

默认设定的等宽字体
默认设定的等宽字体
默认设定的等宽字体
禁用等宽字体
禁用等宽字体
禁用等宽字体

3. 分页器字体

AntD Vue 里会默认将页码的字体设置为 Arial
AntD Vue 里会默认将页码的字体设置为 Arial
AntD Vue 里会默认将页码的字体设置为 Arial

四、弹窗

1. 位置

AntD 提供了垂直居中展示弹窗的 API
AntD 提供了垂直居中展示弹窗的 API
AntD 提供了垂直居中展示弹窗的 API

2. 离开方式

3. 气泡确认框

根据具体情况调整气泡确认框的位置
根据具体情况调整气泡确认框的位置
根据具体情况调整气泡确认框的位置

五、表格

没有设置恰当的列宽度,导致不必要的换行
没有设置恰当的列宽度,导致不必要的换行
没有设置恰当的列宽度,导致不必要的换行
整理出来的列宽表
整理出来的列宽表
整理出来的列宽表

广州 · LRD.IM

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store