5、栅格布局:ion-grid

/* --- html ----*/
 
<ion-content class="tabs">
  <ion-grid>
 
    <h1>没有 warp 的 ion-row</h1>
    <ion-row >
 
      <ion-col  width-10>10%</ion-col>
      <ion-col  width-10>10%</ion-col>
      <ion-col  width-10>10%</ion-col>
 
      <ion-col  width-10>10%</ion-col>
      <ion-col  width-10>10%</ion-col>
      <ion-col  width-10>10%</ion-col>
 
      <ion-col  width-10>10%</ion-col>
      <ion-col  width-10>10%</ion-col>
      <ion-col  width-10>10%</ion-col>
 
      <ion-col  width-10>10%</ion-col>
      <ion-col  width-10>10%</ion-col>
      <ion-col  width-10>10%</ion-col>
 
    </ion-row>
     
    <h1> warp </h1>
    <ion-row  wrap >
 
      <ion-col  width-10>10%</ion-col>
      <ion-col  width-10>10%</ion-col>
      <ion-col  width-10>10%</ion-col>
 
      <ion-col  width-10>10%</ion-col>
      <ion-col  width-10>10%</ion-col>
      <ion-col  width-10>10%</ion-col>
 
      <ion-col  width-10>10%</ion-col>
      <ion-col  width-10>10%</ion-col>
      <ion-col  width-10>10%</ion-col>
 
      <ion-col  width-10>10%</ion-col>
      <ion-col  width-10>10%</ion-col>
      <ion-col  width-10>10%</ion-col>
 
    </ion-row>
 
  </ion-grid>
 
</ion-content>
 
/* --- html ----*/

带有 warp 的 ion-row 超出界限100)时自动换到下一行。。而没有 warp 的 ion-row 是在同一行。。。

接下来看一下所有属性。

首先 可以去 theme/app.core.scss中导入 你的 scss

/* --- tabs.scss ----*/
 
.tabs {
  ion-col{
    background:#000000;
    text-align: center;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-weight: 800;
  }
  ion-row{
    margin-bottom: 5px;
  }
}
 
/* --- tabs.scss ----*/  
/* --- tabs.html ----*/
 
<ion-content class="tabs">
  <ion-grid>
 
    <ion-row>
      <ion-col  width-10 >width-10</ion-col>
      <ion-col  width-10 >width-10</ion-col>
      <ion-col  width-10 >width-10</ion-col>
      <ion-col  width-10 >width-10</ion-col>
      <ion-col  width-10 >width-10</ion-col>
      <ion-col  width-10 >width-10</ion-col>
      <ion-col  width-10 >width-10</ion-col>
      <ion-col  width-10 >width-10</ion-col>
      <ion-col  width-10 >width-10</ion-col>
      <ion-col  width-10 >width-10</ion-col>
    </ion-row>
 
    <ion-row>
      <ion-col  width-90 >width-90</ion-col>
      <ion-col  width-10 >width-10</ion-col>
    </ion-row>
    <br />
 
    <ion-row>
      <ion-col  width-20 >width-20</ion-col>
      <ion-col  width-20 >width-20</ion-col>
      <ion-col  width-20 >width-20</ion-col>
      <ion-col  width-20 >width-20</ion-col>
      <ion-col  width-20 >width-20</ion-col>
    </ion-row>
 
    <ion-row>
      <ion-col  width-80 >width-80</ion-col>
      <ion-col  width-20 >width-20</ion-col>
    </ion-row>
    <br />
 
    <ion-row>
      <ion-col  width-25 >width-25</ion-col>
      <ion-col  width-25 >width-25</ion-col>
      <ion-col  width-25 >width-25</ion-col>
      <ion-col  width-25 >width-25</ion-col>
    </ion-row>
 
    <ion-row>
      <ion-col  width-75 >width-75</ion-col>
      <ion-col  width-25 >width-25</ion-col>
    </ion-row>
    <br />
 
    <ion-row>
      <ion-col  width-33 >width-33</ion-col>
      <ion-col  width-33 >width-33</ion-col>
      <ion-col  width-33 >width-33</ion-col>
    </ion-row>
 
    <ion-row>
      <ion-col  width-67 >width-67</ion-col>
      <ion-col  width-33 >width-33</ion-col>
    </ion-row>
    <br />
 
    <ion-row>
      <ion-col  width-50 >width-50</ion-col>
      <ion-col  width-50 >width-50</ion-col>
    </ion-row>
     
  </ion-grid>
 
</ion-content>
 
/* --- tabs.html ----*/  
显式列百分比属性
width-10 10%
width-20 20%
width-25 25%
width-33 33.3333%
width-50 50%
width-67 66.6666%
width-75 75%
width-80 80%
width-90 90%
可以得出。

 

当然 还有 offset 偏移。。例如把上面的代码修改一下。 <ion-coloffset-33 width-67 >width-67</ion-col> 可以得出:

posted @ 2016-06-06 00:18  淡定君  阅读(5358)  评论(0编辑  收藏  举报