为什么Ionic 5的内容填充（padding）不起作用？

Question

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

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

有任何修复方案吗？

- Kaima Abbas

Answer 1

在 Ionic v4 中的故事：

属性的使用在 Ionic v4 中被弃用了。如果你在开发者控制台中留意到，Ionic 4 会发出使用这些属性进行样式设置的警告。

在 Ionic v5 中的故事：

在 Ionic v5 中，这些属性被永久性地移除，并被 CSS 类所替代。因此，即使你的代码中仍有这些属性，也不会产生任何效果。

根据 Breaking Changes（链接）：

我们最初添加了 CSS 实用属性来为组件设置样式，因为这是一种快速简便的方法，可以对文本进行包装或向元素中添加填充。随着我们的“面向所有人的 Ionic”方法中添加多个框架的支持，我们很快确定使用 CSS 属性与使用 JSX 和 TypeScript 的框架存在问题。为了解决这个问题，我们添加了 CSS 类。与其在某些框架中支持 CSS 属性，在其他框架中支持类，我们决定删除 CSS 属性，并支持在所有框架中都能工作的类以保持一致性。除此之外，改用以 ion 为前缀的类可以避免与原生属性和用户 CSS 发生冲突。在最新版本的 Ionic 4 中，在控制台中打印出废弃警告，以展示新类是什么，并在添加对类的支持后更新了文档，以消除对属性的所有引用。

解决方案：

你需要将所有属性替换为 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>

- Shashank Agrawal

Answer 2

试试这个：

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

- Bhautik Dobariya

Answer 3

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

--padding-bottom 内容底部填充

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

--padding-start 如果方向是从左到右，则为左填充，如果方向是从右到左，则为右填充

--padding-top 内容顶部填充

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

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

这将在内容区域内添加填充。

- Ahmed

---

这个答案/解决方案肯定有效，但作者所问的基本上是 Ionic v5 中的一个重大变化。因此，正确的解决方案是使用新属性 ion-padding。 - Shashank Agrawal

Answer 4

在 Ionic 4 和 Ionic 5 中，使用填充的方式如下：

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

看一下https://ionicframework.com/docs/layout/css-utilities

- Ranjeet Sharma

---

在这里，将代码示例添加到您的答案中，而不是依赖链接内容，是最佳实践。这样，如果站点URL更改或停用，答案仍然有效。 - codewario

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;
    }

- Mayur Bhesaniya