首页 文章

正确/最简单的形式：在Ionic 2中向导航栏添加离子图标按钮

提问于
浏览 次
1

我在离子2应用程序的离子导航栏中添加了一个离子图标按钮 .

它工作正常，但这个解决方案似乎相当冗长 .

我想确认这是正确/最简单的形式/最佳实践方法：

<ion-navbar>
  <ion-title>Books</ion-title>

  <ion-buttons end>
    <button ion-button icon-only [navPush]="bookEditPage">
        <ion-icon name="add" color="navigation"></ion-icon>
      </button>
  </ion-buttons>
</ion-navbar>
html ionic2

1 回答

  • 0

    我想确认这是正确/最简单的形式/最佳实践方法 .

    It's perfect :)

    它可能看起来有点冗长，但代码的每个部分都有其目的 . <ion-buttons end>...</ion-buttons> 将充当容器，将按钮放在正确的位置 .

    在这种情况下，你正在使用 end ，正如你在_2998509中看到的那样：

    开始和结束遵循平台的UI模式所以<ion-buttons start>将在ios的左侧，并且是右侧的第一个按钮 . <ion-buttons end>将位于ios的右侧，右侧的最后一个按钮位于android . 左/右是提供过度骑的方式 .

    然后在该容器内部，你只需要放置一个按钮，在这种情况下，里面有一个图标：

    <button ion-button icon-only [navPush]="bookEditPage">
  <ion-icon name="add" color="navigation"></ion-icon>
</button>
    回复于

相关问题