Question

ion-buttons 我遇到两个问题。

离子文档仅显示 ion-buttons 元素的用法，除了您可以从示例中推断出的内容之外，没有任何实际解释。
关于这一点让我失望的是关键标签在我看来是在错误的地方。

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

<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实用工具start和end遵循平台的UI模式。请参阅下面有关它的更多详细信息。

您可以在此处查看完整列表：CSS-Utilities (ion-buttons property)

通过 @sebaferreras

简要说明

就像你在this post中看到的那样， mhartington （来自Ionic Team）解释道：

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

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

<ion-buttons end>将位于ios的右侧，最后一个按钮位于   Android的权利。

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

因此，如果您想为android和ios左侧放置按钮，请使用left css实用程序。

Ionic Team Member Mike Hartington

不，

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

左边的ios也是第一个   android右侧的按钮。

将在ios的右侧，最后一个按钮   Android的权利。

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

Answer 2

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

实际上这里start不是离子按钮的开头。 start根据documentation表示</ion-buttons> **//Why does ion-buttons close here?**。只是帮助按钮对齐。

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

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

<ion-buttons start>

这里实际关闭以前打开的离子按钮，即<ion-buttons> </ion-buttons> 正如我们通常喜欢这样<ion-buttons end> **// END here?**

end

此处</ion-buttons> **// then close AGAIN here when there is no companion open tag?**表示不是离子按钮的结尾。根据他们的documentation。只是帮助按钮对齐。

根据平台对齐末尾的元素。 iOS正确， Android是右侧的最后一项

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

<ion-buttons end>

我们将再次关闭之前打开的<ion-buttons> </ion-buttons>标记。正如我们通常喜欢这样<ion-buttons end>。 随播广告标记是end标记。不要对标签内的end感到困惑。 methods function this = setMyFunc(this, myFunc) this.myFunc = myFunc; 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>

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

3 个答案: