Nav bar with button on left side

Ionic Framework ionic-v3
#1

I’m trying to create a Modal screen for android with close button on left side, but it doesn’t work. It always shows on right side.

<ion-navbar *navbar> <ion-buttons start> <button (click)="close()"> <ion-icon name="close"></ion-icon> </button> </ion-buttons> <ion-title> Page Title </ion-title> </ion-navbar>

Anybody knows how can i do it?

1 Like
#2 
ion-buttons[start] {
  order: 1;
}
#3

This is per design for md and ios. But you can override this.

<ion-navbar *navbar>
  <ion-buttons left>
    <button (click)="close()">
      <ion-icon name="close"></ion-icon>
    </button>
  </ion-buttons>
  <ion-title>Tab 1</ion-title>
</ion-navbar>

By passing left/right to the ion-buttons.

8 Likes
#4

Hm… So start/end renamed to left/right?

1 Like
#5

Nope,

Start and End follow the UI pattern for the platform

So <ion-buttons start> would be on the left for ios and be the first button on the right for android.

<ion-buttons end> would be on the right for ios and the last button on the right for android.

Left/right are provide as a way to over ride that.

4 Likes
#6

This works fine
Thank you.

#7

Thanks, I renamed to left and it worked perfectly

#8

Anyone know where these properties are documented? I can’t seem to find it in the v2 docs? I’m guessing there are more of these “helper properties”, would love to see a list besides http://ionicframework.com/docs/v2/theming/css-utilities/

#9

Ask and you shall receive

2 Likes
#10

@mhartington - that info about left and right over riding platform defaults while start and end comply with platform defaults is really useful, you should look at adding it to the component docs where there are button examples as it only references start and end.

#11

Thanks, It solved my problem