Je veux utiliser Ionic 3 ion-list (ou tout ce qui fonctionne dans Ionic 3 ) pour afficher une liste horizontale au lieu de la liste verticale typique.
Vous cherchez une solution sans beaucoup de CSS ou du code difficile à maintenir.
<ion-content>
<ion-list >
<ion-item *ngFor="let data of dataArray" (click)="dataDetail(data)">
<ion-thumbnail item-left>
<img src="https://data.url.com/{{data.path}}{{data.photoName}}"/>
</ion-thumbnail>
<h2>{{data.name}}</h2>
<p>{{data.details}}</p>
</ion-item>
</ion-list>
</ion-content>
Toute aide est vraiment appréciée.
Merci Phil
Vous pouvez le faire de cette façon. Cela fonctionne pour moi.
HTML
<ion-grid>
<ion-row>
<ion-col col-33 *ngFor="let post of list">
<div class="card card-1" (click)="ondemand_details(post.product_final_categories_id)">
<img src="{{post.product_final_categories_icon}}">
<p style="font-size: 9px;">{{post.product_final_categories_name}}</p>
</div>
</ion-col>
</ion-row>
Et SCSS c'est:
img1 {
border: 2px solid #BA55D3;
border-radius: 50%;
padding: 5px;
width: 50px;
background-color:#4B0082;
box-shadow: 1px 1px 1px 1px yellow;
}
.card {
background: #1E90FF;
border-radius: 50%;
display: inline-block;
height: 50px;
border: 1px solid #fff;
padding: 7px;
margin: 1rem;
position: relative;
width: 50px;
}
.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
Vous pouvez changer le code selon vos besoins. Si vous rencontrez un problème, veuillez me le faire savoir.
J'espère que ceci vous aidera.
Mettre à jour le défilement horizontal Html:
<ion-content padding>
<ion-item>
<ion-scroll scrollX style="height:100px;">
<div class="scroll-item">
<ion-col col-33 *ngFor="let post of list">
<div class="card card-1" (click)="ondemand_details(post.product_final_categories_id)">
<img src="{{post.product_final_categories_icon}}">
<p style="font-size: 9px;">{{post.product_final_categories_name}}</p>
</div>
</ion-col>
</div>
</ion-scroll>
</ion-item>
</ion-content>
Ajouter SCSS: `
ion-scroll[scrollX] {
white-space: nowrap;
.scroll-item {
display: inline-block;
}}
Je l'ai testé dans mon projet et cela fonctionne très bien. il affichera quelque chose comme ceci.
sample.html:-
<ion-content>
<ion-scroll scrollX style="height:220px;">
<ion-card class="scroll-item" padding *ngFor="let test of testlist"> - you will here dynamic list
<--You will set here your list-->
<ion-row style="font-size: 25px;">
<p *ngIf="test.cust_name"><b> {{test.cust_name}} </b></p>
</ion-row>
<ion-row>
<p *ngIf="test.demo_car_id">{{test.demo_car_id[1]}}</p>
</ion-row>
<ion-row>
<p *ngIf="test.location"> {{test.location}} </p>
</ion-row>
</ion-card>
</ion-scroll>
</ion-content>
In the above list set as per your list. I was used ioncard inside ionscroll.
sample.scss:-
ion-scroll[scrollX] {
white-space: nowrap;
.scroll-item {
display: inline-block;
}
}
Thats all. Enjoy your coding.