Ion start and end syntax buttons do not make sense

Question

I have two problems with ion buttons. 1. Ion documentation shows only the use of the ion button element without a real explanation, except what you can do from the example. 2. What throws me away is the closing tags, which seem to me in the wrong place. When I saw this in the docs, I thought if it was a mistake, but I also saw this in the sample code on the stack. Like this:

<ion-header> <ion-navbar primary> <ion-buttons start> **// here it starts.** <button menuToggle> <ion-icon name="menu"></ion-icon> </button> </ion-buttons> **//Why does ion-buttons close here?** <ion-title> My Page </ion-title> <ion-buttons end> **// END here?** <button ion-button icon-only> <ion-icon name="search"></ion-icon> </button> </ion-buttons> **// then close AGAIN here when there is no companion open tag?** </ion-navbar> </ion-header> 

Answer 1

  <ion-buttons start> **// here it starts.** 

In fact, here start does not mean the start of ionic buttons . Here start means according to their documentation . Just help align the buttons.

Aligns the element at the beginning based on the platform. iOS goes left, Android is the first element on the right.

Refer to the ionic button properties section.

 </ion-buttons> **//Why does ion-buttons close here?** 

Here, the previously opened ion buttons actually close. which <ion-buttons start> as usual we do this <ion-buttons> </ion-buttons>

  <ion-buttons end> **// END here?** 

Here end means not the end of ionic buttons . According to their documentation . Just help align the buttons.

Aligns the element at the end based on the platform. iOS goes right, Android is the last item on the right

Refer to the ionic button properties section.

 </ion-buttons> **// then close AGAIN here when there is no companion open tag?** 

Again we are going to close the previously opened <ion-buttons end> . As usual, these are <ion-buttons> </ion-buttons> . The associated open tag for this is the <ion-buttons end> . Do not confuse with the end tag inside the tag. This end really helps align the buttons. Do not think about that :).

Hope this helps you. Hooray!

Answer 2

No problems. These are CSS utilities where start and end follow the user interface pattern for the platform. Please see below to learn more about this.

You can see the full list here: CSS utilities (property of ionic buttons)

Short description @sebaferreras

As you can see in this post , mhartington (from the Ionic Team) explains:

Begin and end match the platform user interface template

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

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

Left / right provides a way to overcome this.

So, if you want to put the button on the left for android and ios, use the left css utility.

Ionic Team Member Mike Hartington

No,

Begin and end match the platform user interface template

So it will be on the left for ios and will be the first on the right for android.

will be on the right for ios, and the last button is the right for android.

Left / right provides a way to overcome this.

Answer 3

If someone is trying to place a button on either end of the header, either left or right, the following syntax is current with Ionic 3.19.0. Use left and right , not the beginning and end.

 <ion-navbar> <ion-title>Title</ion-title> <ion-buttons left> <button left ion-button icon-only (click)="addItem()"> <ion-icon name="add"></ion-icon> </button> </ion-buttons> <ion-buttons right> <button right ion-button icon-only (click)="presentPopover($event)"> <ion-icon [name]="poppedOver ? 'close' : 'menu'" ></ion-icon> </button> </ion-buttons> </ion-navbar>