[英]How to remove the padding around ion-item?
I want to remove padding
from my ion-item so that it can occupy the full width
of the page.我想从我的 ion-item 中删除
padding
,以便它可以占据页面的整个width
。
Please look in the dev tools to see the padding
around the ion-item.请查看开发工具以查看 ion-item 周围的
padding
。
<ion-content padding> <ion-list> <ion-item> <ion-thumbnail> <img class="imgmg" src="..."> </ion-thumbnail> <h2>Text</h2> </ion-item> </ion-list> </ion-content>
The ion-item has a padding of 16px, when I inspect the ion-item and also on the class="scroll-content" there I found scss in the inspector with离子项目的填充为 16px,当我检查离子项目和 class="scroll-content" 时,我在检查器中找到了 scss
ion-app.md [padding] .scroll-content {
padding: 16px;
}
If I remove this padding then ion-item can occupy the whole width by removing this padding, but When I use this in my scss file the padding is not removed.如果我删除此填充,则 ion-item 可以通过删除此填充来占据整个宽度,但是当我在我的 scss 文件中使用它时,填充不会被删除。
You can solve ion-item
padding different way...您可以以不同的方式解决
ion-item
填充...
First: Using ion-no-padding class第一:使用 ion-no-padding 类
<ion-item class="ion-no-padding">
<ion-thumbnail>
<img class="imgmg" src="...">
</ion-thumbnail>
<h2>Text</h2>
</ion-item>
Second: Using css or inline style第二:使用css或内联样式
<ion-item style="padding:0px !important;">
<ion-thumbnail>
<img class="imgmg" src="...">
</ion-thumbnail>
<h2>Text</h2>
</ion-item>
Edit : As Ionic 5.X we must use CSS utilities by class instead of attributes ( ionic/BREAKING.md ).编辑:作为 Ionic 5.X,我们必须按类而不是属性( ionic/BREAKING.md )使用 CSS 实用程序。
For those who are using ionic 4, you should use Ionic CSS Utilties for padding对于那些使用 ionic 4 的人,你应该使用Ionic CSS Utilties 进行填充
In short, you have to code this:简而言之,您必须对此进行编码:
<ion-item class="ion-no-padding">
<ion-thumbnail>
<img class="imgmg" src="...">
</ion-thumbnail>
<h2>Text</h2>
</ion-item>
If you want to remove inner paddding, use ion-item custom CSS properties :如果要删除内部填充,请使用 ion-item 自定义 CSS 属性:
ion-item {
--padding-end: 0px;
--inner-padding-end: 0px;
// here other custom CSS from documentation
}
I had to use custom CSS properties for ion-item我不得不为ion-item使用自定义CSS 属性
ion-item {
--inner-padding-bottom: 0;
--inner-padding-end: 0;
--inner-padding-start: 0;
--inner-padding-top: 0;
}
Also had the same maddening problem.也有同样令人抓狂的问题。 It turns out that ion-item has a few --inner-padding rules that need to be overridden to stop padding appearing on it's children
事实证明 ion-item 有一些 --inner-padding 规则需要被覆盖以停止填充出现在它的孩子身上
As well as adding the以及添加
class="ion-no-padding"
I also needed to add the following css style rule我还需要添加以下 css 样式规则
--inner-padding-end: 0 !important;
Making the final element制作最终元素
<ion-item *virtualItem="let section" lines="none" class="ion-no-padding" style="--inner-padding-end: 0 !important;">
...
If you prefer not to add no-padding to every ion-item, and remove it for the whole app.如果您不想为每个 ion-item 添加 no-padding,请在整个应用程序中将其删除。
For ionic v4 , you can add this to global.scss:对于ionic v4 ,您可以将其添加到 global.scss :
ion-item {
--padding-start: 0;
}
Source: https://ionicframework.com/docs/api/item#css-custom-properties来源: https : //ionicframework.com/docs/api/item#css-custom-properties
Removing padding from the content of the page solves the problem从页面内容中去除padding解决问题
<ion-content>
<ion-list>
<ion-item>
<ion-thumbnail>
<img class="imgmg" src="...">
</ion-thumbnail>
<h2>Text</h2>
</ion-item>
</ion-list>
</ion-content>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.