1. 背景
Descriptions 是 AntD 组件,默认的样式 label 是居左对齐的,而我想要 右对齐的效果。比如这样:
关键是样式要怎么调整呢?
2.知识
先简单介绍下 Descriptions 组件。
Descriptions 组件是描述列表。用于成组展示多个只读字段,常见于
详情页
的信息展示。
比如展示用户信息:
如上图,使用 chrome 的检查功能,分析代码发现 对应的样式名是 ant-descriptions-item-label ,它使用了 flex 布局。这就好办了。
3. 调整Descriptions 组件样式: 右对齐
如下图所示,Descriptions 的属性 labelStyle 可以接受一个样式设置,写上 “justifyContent: 'flex-end',minWidth:100” 即可。
代码见:
<Descriptions column={1} labelStyle={{justifyContent: 'flex-end',minWidth:100}}>
<Descriptions.Item label="姓名">{entity.driverName}</Descriptions.Item>
<Descriptions.Item label="联系方式">{entity.telephone}</Descriptions.Item>
</Descriptions>
4.参考:
https://ant.design/components/descriptions-cn/#components-descriptions-demo-size
https://www.jianshu.com/p/4290522e1560