Question

我只是从Ionic入手，还不确定为什么左上角的两个图标会堆叠并保持很小。阅读了所有文档和论坛，但是，我似乎还没有找到解决方案。预先感谢，

米奇

<ion-header no-lines>
    <ion-toolbar>
      <ion-title>Home</ion-title>

      <ion-buttons icon-left start> 
            <!-- Float the icon left -->
            <button ion-button icon-start>
                <ion-icon name="home"></ion-icon>
            </button>
    </ion-buttons>


    <ion-buttons icon-right end> 
            <!-- Float the icon right -->
            <button ion-button icon-end>
                <ion-icon name="contact"></ion-icon>
            </button>
        </ion-buttons>
    </ion-toolbar>
  </ion-header>

Answer 1

在复制并粘贴一些Ionic 3代码到我的Ionic 4项目中后，我着手了这一点。

我建议的最佳答案是查看Ionic 4的文档！您所做的很多事情不是Ionic 4，而是Ionic 3。

以按钮文档为例：https://ionicframework.com/docs/api/button您的按钮将不起作用，因为您必须使用以下命令：

                <ion-button color="primary" fill="clear" expand="block" (click)="deleteRecord(i)">
                  <ion-icon name='trash'></ion-icon>
                </ion-button>

此外，对于定位，还请参阅文档。您应该使用slot属性。例如：

            <ion-chip outline="outline" color="primary" slot="start">
              <ion-label> Job id : {{ interv.ts % 1000000}} </ion-label>
            </ion-chip>

请注意，在上面的两个代码段中，我使用了不同的属性来确定轮廓/填充。那是因为文档告诉我。因此，尽管它可能并不完全一致，但已记录在案，并且在大多数情况下都有效。

为什么我的Ionic 4按钮向左移动并变小

1 个答案: