ion-buttons start and end syntax makes no sense

Question

I have two problems with ion-buttons.

1. The ionic documentation only shows usage of the ion-buttons element with no real explanation beyond what you can infer from the example.

2. What throws me off about this is the close tags appear to me to be in the wrong place.

When I saw this on the docs I wondered if it was a mistake, but I've also seen this in a code example here on stack. Like this one:

<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.**

Actually here start mean not the start of ion-buttons. Here start mean according to their documentation . Just help to do button alignment.

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

Refer the ion-buttons property section.

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

Here actually close the previously opened ion-buttons that is <ion-buttons start> as we do normally like this <ion-buttons> </ion-buttons>

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

Here end mean not the end of ion-buttons. According to their documentation. Just help to do button alignment.

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

Refer the ion-buttons property section.

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

Again we are going to close the previously open <ion-buttons end> tag. As we do normally like this <ion-buttons> </ion-buttons>. The companion open tag for this is <ion-buttons end> tag. Don't get confuse with the end inside the tag. That end really help to do the button alignment that is it. Don't think beyond that :).

Hope this will help to you. Cheers!

Answer 2

There is no issue.Those are CSS Utilities where start and end follow the UI pattern for the platform.Please see below for more detail about it.

You can see full list here: CSS-Utilities (ion-buttons property)

Brief explanation by @sebaferreras

Just like you can see in this post, mhartington (from Ionic Team) explains:

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.

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

By Ionic Team Member Mike Hartington

Nope,

Start and End follow the UI pattern for the platform

So would be on the left for ios and be the first button on the right for android.

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.