如何在Ionic 4中将标题中的按钮与标题右侧对齐

Question

按钮在工具栏中右对齐，但未显示图标。

仅出现白框。

.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>

    <ion-title style="text-align: center;">RE-MED+</ion-title>

    <ion-buttons slot="primary">
      <ion-button>
        <ion-icon slot="icon-only" name="exit"></ion-icon>
      </ion-button>
    </ion-buttons>

  </ion-toolbar>
</ion-header>

看起来像这样。

我想要这样

Answer 1

在您的.html

中尝试一下

<ion-header>
  <ion-toolbar color="dark">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>

    <ion-title class="ion-text-center">RE-MED+</ion-title>

    <ion-buttons slot="end">
      <ion-button fill="clear">
        <ion-icon slot="icon-only" name="exit"></ion-icon>
      </ion-button>
    </ion-buttons>

  </ion-toolbar>
</ion-header>

Answer 2

这将适用于 Ionic5。也许 Ionic4...？

<ion-header>
  <ion-toolbar>
    <ion-title>Hello World</ion-title> 
      <ion-button slot="end" (click)="actionbutton()">Close</ion-button>  
  </ion-toolbar>
</ion-header>

Answer 3

解决了。

我为另一个组件创建了CSS。

我不知道如何，但是它适用于离子按钮，所以我更改了CSS的名称。

它的名字叫.button，我改成了.button_border

.css

.button_border{
    border-radius: 10px !important;
    border: 2px solid #ffffff;
    background-color: white;
    color: #0032fe;
    box-shadow: none !important;
    padding-left: 24px;
    padding-right: 34px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 18px;
    margin-left: 20px;
    margin-right: 20px;
}