web-dev-qa-db-ja.com

イオンアイテムの周りのパッドを取り除く方法は？

イオンアイテムからpaddingを削除して、ページのwidth全体を占めるようにします。

イオンアイテムの周りの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>

Ion-itemには16pxのパディングがあります。ion-itemを検査し、class = "scroll-content"でもインスペクターでscssを見つけました。

ion-app.md [padding] .scroll-content {
    padding: 16px;
}

このパディングを削除すると、イオンアイテムはこのパディングを削除することで幅全体を占有できますが、scssファイルでこれを使用しても、パディングは削除されません。

htmlcssionic-frameworkionic2ionic3
5
Aditya

ion-item別の方法でパディング...

最初：パディングなしを使用

<ion-item no-padding>
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

2番目：cssまたはインラインスタイルの使用

<ion-item style="padding:0px !important;">
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>
15
Utpaul

ionic 4を使用している場合は、 パディング用のイオンCSSユーティリティー

つまり、これをコーディングする必要があります。

<ion-item class="ion-no-padding">
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

内側のパディングを削除する場合は、ion-item カスタムCSSプロパティ を使用します。

ion-item {
  --padding-end: 0px;
  --inner-padding-end: 0px;
  // here other custom CSS from documentation
}
7
massi

イオンアイテムにパディングを与えないで、パディングを削除します

<ion-item no-padding>
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

ionic docs を参照してください

5
Abinesh Joyel

すべてのイオン項目にパディングなしを追加したくない場合は、アプリ全体から削除します。

ionic v4の場合、これをglobal.scssに追加できます。

ion-item {
    --padding-start: 0;
}

ソース： https://ionicframework.com/docs/api/item#css-custom-properties

1
Dylan w