Dynamic list with 2 or 3 columns

Ionic Framework ionic-v3
1

How to make a list with 2 or 3 columns which loads its content dynamically from api service?
any working examples?
thanks

2

It depends, is it 2 or 3 separated lists ?
In that case, you make 3 column and in each columns you can load a different list.

If you want 1 list on 2 or 3 columns, you do this with your css :
file.html

<figure *ngFor="let c of categories.list;" (click)="categories.toggle(c)">
		<img class="font" *ngIf="categories.cat[c].active" src="assets/categories/active/{{categories.cat[c].picto}}" >
		<img class="font" *ngIf="!categories.cat[c].active" src="assets/categories/inactive/{{categories.cat[c].picto}}" >
		<img class="check" *ngIf="categories.cat[c].active" src="assets/categories/check.png" >
		<img class="check" *ngIf="!categories.cat[c].active" src="assets/categories/uncheck.png" >
		<figcaption>{{c}}</figcaption>
	</figure>

file.scss```

margin: 2px;

figure{
	position: relative;
	display: inline-block;
	margin: 2px;
	width: calc(50% - 8px);
	
}

figcaption{
	position: absolute;
	font-size: large;
	font-weight: bold;
	color: white;
	text-shadow: 1px 1px 6px #000;
	bottom: 6px;
	left: 6px;
}

.check{
	position: absolute;
	max-width: 20%;
	top: 5%; right: 5%;
}

.font{
	position: relative;
	width: 100%;
}```
1 Like