为什么Ionic 5内容填充无法正常工作?

问题描述

升级到Ionic 5后，填充属性不再像Ionic 4中那样起作用:

When upgraded to Ionic 5, the padding attribute is not working anymore as in Ionic 4:

<ion-content color="primary" padding></ion-content>

任何修复程序?

推荐答案

根据官方文档，您可以使用以下CSS自定义属性来设置ion-content组件的填充:

According to the official documentation, you can use these CSS custom properties to set padding of ion-content component:

-padding-end如果方向是内容的从左到右，则为右填充；如果方向是内容的从右到左，则为左填充

--padding-end Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content

-padding-start如果内容的方向是从左到右，则为左填充；如果方向是内容的从右至左，则为右填充

--padding-start Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content

-padding-top内容的顶部填充

--padding-top Top padding of the content

在与您的组件关联的SCSS文件中，添加:

In the SCSS file associated with your component, add:

ion-content {
  --padding-bottom: 10px;
  --padding-end: 10px;
  --padding-start: 20px;
  --padding-top: 20px;
}

这应该在内容区域内添加填充.

This should add padding inside the content area.

这篇关于为什么Ionic 5内容填充无法正常工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！