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

Posted 2023-03-04

【中文标题】为啥 Ionic 5 内容填充不起作用？

【英文标题】：Why Ionic 5 content padding is not working?为什么 Ionic 5 内容填充不起作用？

【发布时间】：2020-05-28 16:44:25

【问题描述】：

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

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

有什么解决办法吗？

【参考方案1】：

在 ionic 4 和 Ionic 5 中使用 padding 如下：

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

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

【讨论】：

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

【参考方案2】：

    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;
    

【参考方案3】：

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>

【参考方案4】：

试试这个，

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

【参考方案5】：

根据官方文档，您可以使用这些 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;

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

【讨论】：

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