离子按钮开始和结束语法没有意义

Question

我有两个问题ion-buttons.

1. 离子文档仅显示ion-buttons元素的用法,除了您可以从示例中推断出的内容之外,没有真正的解释.

2. 什么让我失望的是,在我看来,关键标签是在错误的地方.

当我在文档上看到这个时,我想知道这是不是一个错误,但我也在堆栈的代码示例中看到了这一点.像这个:

<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

没有问题.这些是CSS Utilities,start并end遵循平台的UI模式.请参阅下面的详细信息.

你可以在这里看到完整列表:CSS-Utilities(离子按钮属性)

简要说明由@sebaferreras

就像你在这篇文章中看到的那样,mhartington(来自Ionic Team)解释说:

开始和结束遵循平台的UI模式

所以<ion-buttons start>在ios的左边是android的右边第一个按钮.

<ion-buttons end> 将在ios的右侧和右侧的最后一个按钮为android.

左/右是提供过度骑的方式.

因此,如果你想在android和ios的左侧放置按钮,请使用leftcss实用程序.

由Ionic团队成员Mike Hartington完成

不,

开始和结束遵循平台的UI模式

所以在ios的左边是android的右边第一个按钮.

将在ios的右侧和右侧的最后一个按钮为android.

左/右是提供过度骑的方式.

Answer 2

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

实际上这里start并不意味着离子按钮的开始.这里的start意思是根据他们的文档.只是帮助按钮对齐.

根据平台在开始时对齐元素.iOS向左走,Android是右边的第一个项目

请参阅离子按钮属性部分.

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

这里实际上关闭了之前打开的离子按钮 , <ion-buttons start> 就像我们通常喜欢这样<ion-buttons> </ion-buttons>

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

这end意味着不是离子按钮的结束.根据他们的文件.只是帮助按钮对齐.

根据平台对齐最后的元素.iOS正确,Android是右侧的最后一项

请参阅离子按钮属性部分.

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

我们将再次关闭先前打开的 <ion-buttons end>标签.正如我们通常喜欢这样<ion-buttons> </ion-buttons>.用于此的伴随开放标记是<ion-buttons end>标记.不要混淆end标签内部.这end真的有助于做按钮对齐.不要想到超越:).

希望这对你有所帮助.干杯!

Answer 3

如果有人试图在标题的任何一端(左右两侧)放置一个按钮,则以下语法是Ionic 3.19.0的最新语法.使用left和right,而不是开始和结束.

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