Question

Ionic 2似乎通常足够灵活，允许我构建移动和桌面应用程序，如果只是简单地下降到底层Angular 2为桌面创建一组单独的页面并尝试在它们之间共享尽可能多的组件尽可能。但是，我真正喜欢的是实际为桌面和移动创建一组响应式页面，但自定义导航和页面布局。

假设我可以解决两者之间的导航问题，我遇到的主要问题就是如何将自定义布局应用到app.html中的根组件，因此它不仅仅是一个空容器。我希望它在顶部有一个典型的固定导航栏，在页面加载到的内容区域的两侧有一些边距。看起来这应该是一个非常常见的用例，我很惊讶我没有在文档或网络上的任何地方看到更多提示。什么是＆＃34;对＆＃34;这样做的方法？

Answer 1

对于其他任何想知道这一点的人来说，看起来最简单的方法是使用您自己的桌面导航和页面内容的容器结构自定义app.html：

.center-outer{
  position: relative; 
	display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
}

.header-container{
  background: $fb-blue;
  min-height: 102px;
}

.main-container{
  position: relative;
  height: 100%; 
}

.center-inner{
  position: relative;
  width: 100%;
  max-width: 1200px;
}

#brand-logo{
  bottom: 10px;
  padding-left: 16px;
  max-height: 80px;
}

.platform-core{
// Critical overrides of Ionic styles for desktop environment layout within ion-grid
  ion-nav, .ion-page{
    position: relative;
    height: 100%;
    contain: none;
  }

  .ion-page > ion-content{
    position: relative;
    contain: none;
  }

  .scroll-content{
    position: relative;
    height: 100%;
    overflow-y: auto;
    contain: none;
  }
}

<!-- Nav container -->
<div class="center-outer header-container">
  <div class="center-inner">
    <nav id="top-nav">				
      <ul>
        <li>
          <img id="brand-logo" src="/assets/img/logo.jpg">
        </li>
        <li *ngFor="let link of navLinks">							
          <a (click)="navToPage(link.page)">{{link.name}}</a>
        </li>					
      </ul>
    </nav>
  </div>
</div>
	
<!-- Main container -->
<div class="center-outer main-container">
  <div class="center-inner">
    <ion-grid>
      <ion-row>
        <!--sidebar-->
        <ion-col width-20>
          <!--sidebar content...-->
        </ion-col>
        <!--page container-->
        <ion-col width-80>
          <div id="page">   
            <ion-nav [root]="rootPage"></ion-nav>
          </div>
        </ion-col>    
      </ion-row>
    </ion-grid>
  </div>
</div>

如何自定义Ionic 2应用程序组件以显示移动和桌面内容？

1 个答案: