पंक्ति में आयनिक 2 एकाधिक आयन-आइटम

Question

मैं अपनी ion-list पंक्ति में 4 ion-items दिखाना चाहता हूं।

जब से मैं बूटस्ट्रैप उपयोग कर रहा हूँ, मैं करने की कोशिश की:

<button class="col-sm-3" ion-item *ngFor="let player of players"> 
    <ion-avatar item-left> 
     <img [src]="user.photoURL"> 
    </ion-avatar> 
    {{ user.name }} 
    </button> 

लेकिन यह काम नहीं किया।

Answer 1

आप मैन्युअल स्पष्ट कॉलम प्रतिशत का उपयोग करके प्रत्येक कॉलम की चौड़ाई निर्धारित कर सकते हैं इस तरह गुण:

<ion-row> 
    <ion-col width-25> 
     <!-- item 1 --> 
    </ion-col> 
    <ion-col width-25> 
     <!-- item 2 --> 
    </ion-col> 
    <ion-col width-25> 
     <!-- item 3 --> 
    </ion-col> 
    <ion-col width-25> 
     <!-- item 4 --> 
    </ion-col> 
</ion-row> 

या बस गतिशील ion-col जोड़ते हैं और वे भरने के लिए विस्तार होगा उनके पंक्ति, और अतिरिक्त कॉलम फिट करने के लिए आकार बदल जाएगी, जैसे:

<ion-row> 
    <ion-col *ngFor="let player of players"> 
     <ion-item> 
      <ion-avatar item-left> 
       <img [src]="user.photoURL"> 
      </ion-avatar> 
      {{ user.name }} 
     </ion-item> 
    </ion-col> 
</ion-row> 

आप स्पष्टीकरण के बारे में अधिक जानकारी प्राप्त कर सकते हैं कॉलम प्रतिशत गुण here।

<ion-row> 
    <ion-col col-3> 
     <!-- item 1 --> 
    </ion-col> 
    <ion-col col-3> 
     <!-- item 2 --> 
    </ion-col> 
    <ion-col col-3> 
     <!-- item 3 --> 
    </ion-col> 
    <ion-col col-3> 
     <!-- item 4 --> 
    </ion-col> 
</ion-row> 

तो width-25 विशेषता col-3 द्वारा प्रतिस्थापित किया जा करने की जरूरत है:

अद्यतन

Ionic 3.0.0 के रूप में, जिस तरह से नए ग्रिड के साथ एक ही प्राप्त करने के लिए कुछ इस तरह होगा।

Answer 2

प्रयास करें:

<ion-item> 
<ion-row> 
<ion-col *ngFor="let player of players"> 
    <ion-avatar item-left> 
     <img [src]="user.photoURL"> 
    </ion-avatar> 
    {{ user.name }} 
    </ion-col> 
</ion-row> 
</ion-item> 

आप वास्तव में न इस के लिए bootstrap की जरूरत है। चेक this tutorial और here