如何在离子卡上创建页脚

时间:2017-12-26 07:09:25

标签: ionic2 ionic3

如何在离子卡上张贴页脚。试过这些例子如下,但没有工作。请帮助

.HTML

<ion-card class="dashboardgraph">
    <ion-card-header class="cardheader">
      CNC 10
     </ion-card-header> 
    <ion-footer class="cardfooter">
      footer here ///    
     </ion-footer>
</ion-card>

2 个答案:

答案 0 :(得分:8)

你需要在离子卡中使用ion-col和ion-row。它可以工作。

<ion-content fullscreen>
  <ion-card>
   <ion-card-header class="cardheader">
      CNC 10
    </ion-card-header> 

    <ion-card-content>
     Content of the card
    </ion-card-content>

    <ion-row class="cardfooter">
      <ion-col>
            <p>Footer goes here </p>
      </ion-col>
    </ion-row>
  </ion-card>
</ion-content>

答案 1 :(得分:0)

使用并完成另一个答案:https://stackoverflow.com/a/47975359/4280561

此处显示所有代码:

HTML:

  <ion-card class="has-card-footer">
      <ion-card-header>
          CNC 10
      </ion-card-header> 

      <ion-row class="card-footer">
          <ion-col>
              <p>Footer goes here </p>
          </ion-col>
      </ion-row>
  </ion-card>

和CSS:

.card-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.has-card-footer {
  padding-bottom: 15px;
}