ionic 2 ion-listの空白が余りにも多い

Question

私は、あるテキストを線で区切り、その下に読み取り専用のフォームデータを持つイオンカードを作成しようとしています。スクリーンショットにはフォームデータ部分のみが表示されます。

私は

<ion-list> 
    <ion-item> 
     <ion-label><p>Close Date</p></ion-label> 
     <ion-label><p>In 22 Days</p></ion-label> 
    </ion-item> 
    <ion-item> 
     <ion-label><p>Last Activity</p></ion-label> 
     <ion-label><p>In 22 Days</p></ion-label> 
    </ion-item> 
</ion-list> 

のようなコードを使用するが、これは2つの列の間の空白のあまりを残します。

これが望ましいものです。 ページが https://www.dropbox.com/s/ihxh3bckziyfcdp/Screenshot%202017-06-21%2012.40.27.png?dl=0

Answer 1

のように見える私はあなたが近いことを希望している添付のスクリーンショットのどの部分を100％わからないんだけど、イオンはちょうどHTML/JS/CSSであることから、あなたは追加することができるはずですIDまたはクラスを問題の<p>に送信し、その上限を減らします。

イオン3では、.htmlファイルと.tsファイルを持つcomponent.scssファイルが必要です。

あなたは上マージンを減らすために、このようなものを追加することができます。

page-foo { 
    .tight-paragraph { 
    margin-top: 2px; 
    } 
} 

page-fooは.tsファイル内のコンポーネント宣言に確立すべきであるセレクタ。

@Component({ 
    selector: 'page-foo', 
    templateUrl: 'foo.html' 
}) 
export class FooPage { 

Answer 2

<ion-item-group></ion-item-group>外部イオンアイテムを使用してください。

特定のケースでは、同じページの.scssの行間の距離を制御するためにCSSを使用できます。