ionic4之列表栏的布局设置

最新推荐文章于 2024-07-31 06:08:17 发布

原创

最新推荐文章于 2024-07-31 06:08:17 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ionic4

本文介绍了在Ionic4中如何进行列表栏的布局设置，包括标题栏居中显示、选项卡设置为黑色背景白色字体以及列表行文字居左与右箭头居右的实现方法。通过设置图标和文字的宽度百分比实现标题栏居中，通过调整样式达到选项卡样式要求，同时解决<ion-item detail>带来的布局问题。

页面效果

设置一：标题栏居中显示

解决关键：如图，单独让文字居中简单，可是这一行是由图标+文字构成的，如果只是设置text-align:center，没卵用。这时就需要分别设置图标宽度和文字宽度的百分比了。代码如下，实现居中效果

<ion-header>
  <ion-toolbar>
      <ion-title style="width: 80%;text-align: center">审核列表</ion-title>
      <ion-buttons slot="start" >
              <ion-back-button defaultHref="" (click)="back()" style="width: 20%;color: #4c8dff;float:left"></ion-back-button>
      </ion