离子应用程序中的注销按钮未移至右侧

Question

This is my setting Page

 <ion-header>
      <ion-toolbar>
    
       <ion-title>Settings</ion-title>
    
      <ion-row>
      <ion-item>
        <ion-button (click)="logoutAction()"  float-right>Log Out.</ion-button>
      </ion-item>
      </ion-row>
      </ion-toolbar>          
     
    </ion-header>
             
    <ion-content>
     
        ..other code
     
    </ion-content>

This looks like below

I need to float right in settings header. Is it possible to move right side..pls help

Answer 1

I would have tried this to use slot .

<ion-toolbar>
    <ion-title>Settings<ion-title>
    <ion-item>
        <ion-button (click)="logoutAction()" slot="end">Log Out.</ion-button>
    </ion-item>
</ion-toolbar>

Will output

SETTINGS
                                    LOG OUT.

if you don't want a line in between, you can skip the ion-item .

<ion-toolbar>
    <ion-title>Settings<ion-title>
    <ion-button (click)="logoutAction()" slot="end">Log Out.</ion-button>
</ion-toolbar>

Will output

SETTINGS                            LOG OUT.