首页 文章

离子2网格 Headers 没有排列列数据

提问于
浏览 次
1

目前我正在尝试创建一个包含多个数据字段的简单列表 . 我选择网格而不是简单的离子列表的原因是我有多个数据字段，我想要 Headers 排列 . 每行应该是一个可点击的细节，然后通过.push（）命令将您带到另一个页面 . 由于在网格开始之后与离子网格或离子项之后没有任何直接的样式，列 Headers 不与列数据对齐 . 如果我将 Headers 部分设为按钮离子项，它们会匹配 . 有没有办法解决这个问题？或者我必须基本上重新创建离子行对象上的按钮样式？

<ion-grid>
  <ion-row align-items-start>
   <ion-col width-10 text-left no-border no-padding>Work Order</ion-col>
   <ion-col width-10 text-left no-border no-padding>Line</ion-col>
   <ion-col width-10 text-left no-border no-padding>Job Code</ion-col>
   <ion-col width-10 text-left no-border no-padding>Vehicle</ion-col>
   <ion-col width-25 text-left no-border no-padding>Description</ion-col>
   <ion-col width-10 text-left no-border no-padding>Time</ion-col>
   <ion-col width-10 text-left no-border no-padding>Code</ion-col>
   <ion-col width-10 text-left no-border no-padding>Repair Type</ion-col>
 </ion-row>



 <button ion-item no-margin *ngFor="let job of jobs" ngDefaultControl no-border no-padding>
  <ion-row align-items-start>
   <ion-col width-10 text-left no-border no-padding>{{job.wo}}</ion-col>
   <ion-col width-10 text-left no-border no-padding>{{job.lineNumber}}</ion-col> 
   <ion-col width-10 text-left no-border no-padding>{{job.vmrs_maj}} - {{job.vmrs_int}} - {{job.vmrs_min}}</ion-col>
   <ion-col width-10 text-left no-border no-padding>{{job.vehicle}}</ion-col>
   <ion-col width-25 text-left no-border no-padding>{{job.description}}</ion-col>
   <ion-col width-10 text-left no-border no-padding>{{job.hoursWorked}}:{{job.minutesWorked}}</ion-col>
   <ion-col width-10 text-left no-border no-padding>{{job.completionCode}}</ion-col>
   <ion-col width-10 text-left no-border no-padding>{{job.repairType}}</ion-col>

  </ion-row>
 </button>



</ion-grid>
html ionic-framework ionic2

1 回答

  • 0

    离子网格由12列组成，您可以使用col-12作为列的属性，使其跨越整行 . 你只有12列可供选择所以你可以有2个col-6,3 col-4,4，col-3 6 col-2 12 col-1，或者一些组合，如col-4行中的两列，col- 8分别占1 / 3,2 / 3 . 全部覆盖here

    回复于

相关问题