AntD 的 Descriptions 组件实现“ 右对齐效果 ”

1. 背景

Descriptions 是 AntD 组件,默认的样式 label 是居左对齐的,而我想要 右对齐的效果。比如这样:

AntD 的 Descriptions 组件实现“ 右对齐效果 ”_第1张图片
image.png

关键是样式要怎么调整呢?

2.知识

先简单介绍下 Descriptions 组件。

Descriptions 组件是描述列表。用于成组展示多个只读字段,常见于详情页的信息展示。

比如展示用户信息:

AntD 的 Descriptions 组件实现“ 右对齐效果 ”_第2张图片
image.png
AntD 的 Descriptions 组件实现“ 右对齐效果 ”_第3张图片
image.png

如上图,使用 chrome 的检查功能,分析代码发现 对应的样式名是 ant-descriptions-item-label ,它使用了 flex 布局。这就好办了。

3. 调整Descriptions 组件样式: 右对齐

如下图所示,Descriptions 的属性 labelStyle 可以接受一个样式设置,写上 “justifyContent: 'flex-end',minWidth:100” 即可。

AntD 的 Descriptions 组件实现“ 右对齐效果 ”_第4张图片
image.png

代码见:


          {entity.driverName}
          {entity.telephone}
      

4.参考:

https://ant.design/components/descriptions-cn/#components-descriptions-demo-sizehttps://www.jianshu.com/p/4290522e1560

你可能感兴趣的:(java,vue,css,html,javascript)