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

Question

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

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

有什么修复吗？

Answer 1

Ionic v4 中的故事：

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

Ionic v5 中的故事：

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

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

我们最初为样式组件添加了 CSS 实用程序属性，因为它是一种快速简便的包装文本或向元素添加填充的方法。一旦我们添加了对多个框架的支持作为我们“每个人的 Ionic”方法的一部分，我们很快就确定在使用 JSX 和 Typescript 的框架中使用 CSS 属性存在问题。为了解决这个问题，我们添加了 CSS 类。与其在某些框架中支持 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>

Answer 2

尝试这个，

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

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

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

Answer 4

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

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

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

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