3
Good afternoon guys, I’m having a little problem and so far I’ve done a lot of research, but I haven’t found a satisfactory answer. How do I develop a tabelinha of products, in this style :
1 answer
0
your-html file.
<ion-header>
<ion-navbar>
<ion-title>Seu Título</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-grid no-padding>
<ion-row>
<ion-col>Entrada</ion-col>
<ion-col>Saída</ion-col>
<ion-col>Tempo</ion-col>
</ion-row>
<div *ngFor="let item of lista">
<ion-row>
<ion-col>{{ item.descricao }}</ion-col>
<ion-col>{{ item.qtd_valor }}</ion-col>
<ion-col>{{ item.total }}</ion-col>
</ion-row>
</div>
</ion-grid>
</ion-content>
your-file.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage({ name: 'page-suaPagina' })
@Component({
selector: 'page-sua',
templateUrl: 'sua.html',
})
export class SuaPage {
lista = [];
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.lista = [
{descricao:'Carne 1,5kg',qtd_valor:'1 x 22,95',total: 22,95},
{descricao:'Tomate Vermelho 0,5kg',qtd_valor:'0,5 x 5,00',total: 2,25}
];
}
}
Browser other questions tagged html css ionic ionic3 ionic2
You are not signed in. Login or sign up in order to post.
What is the question, more specifically? Do you want to know how to display a table using CSS only? Or are you having doubts about a specific feature of this image table? Please post what you already have today, HTML and CSS, if you have.
– Pedro Gaspar