为什么 Ionic 5 内容填充不起作用？

Question

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

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

有任何修复吗？

Answer 1

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

--padding-bottom Bottom padding of the content

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

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

--padding-top Top padding of the content

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

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

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

Answer 2

试试这个，

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

Answer 3

在 ionic 4 和 Ionic 5 中使用这样的填充：

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

并查看 https://ionicframework.com/docs/layout/css-utilities

Answer 4

Ionic v4 中的故事：

在 Ionic v4 中不推荐使用属性，如果您在开发人员控制台中注意到，Ionic 4 会发出使用这些属性设置样式的警告。

Ionic v5 中的故事：

在 Ionic v5 中，这些属性被永久删除并替换为 CSS 类。因此，即使您的代码中存在这些属性，也不会产生任何影响。

根据重大变更 https://github.com/ionic-team/ionic/blob/v5.0.0/BREAKING.md#css：

We originally added CSS utility attributes for styling components because it was a quick and easy way to wrap text or add padding to an element. Once we added support for multiple frameworks as part of our "Ionic for everyone" approach, we quickly determined there were problems with using CSS attributes with frameworks that use JSX and Typescript. In order to solve this we added CSS classes. Rather than support CSS attributes in certain frameworks and classes in others, we decided to remove the CSS attributes and support what works in all of them, classes, for consistency. In addition to this, changing to classes prefixed with ion avoids conflict with native attributes and user's CSS. In the latest version of Ionic 4, there are deprecation warnings printed in the console to show what the new classes are, and the documentation has been updated since support for classes was added to remove all references to attributes

解决方案：

您需要将所有属性替换为 CSS 类。例如：

之前

<ion-header text-center></ion-header>
<ion-content padding></ion-content>

之后

<ion-header class="ion-text-center"></ion-header>
<ion-content class="ion-padding"></ion-content>

对于你的情况，替换

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

到

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

Answer 5

    ion-item {
      --padding-start: 10px;
      --padding-end: 10px;
      --padding-top: 0px;
      --padding-bottom: 0px;
      --inner-padding-top: 0px;
      --inner-padding-bottom: 0px;
      --inner-padding-start: 0px;
      --inner-padding-end: 0px;
      --border-width: 0;
      --inner-border-width: 0;
      --border-color: transparent;
    }
    ion-header {
      --min-height: auto;
    }

为什么 Ionic 5 内容填充不起作用？

Why Ionic 5 content padding is not working?

ionic-framework

ionic5

Ionic v4 中的故事：

Ionic v5 中的故事：

解决方案：