使用 AngularDart 的角度组件的应用程序布局答案

【问题标题】：App Layout of angular components with AngularDart使用 AngularDart 的角度组件的应用程序布局
【发布时间】：2018-01-29 07:00:03
【问题描述】：

Material Navigation Items 与 App Title 重叠，设备宽度为 320px 的 Angular 组件的 App 布局，并且导航项之间的空间超出了要求。那么如何通过应用布局来解决这两个问题呢？救命！

app_component.html

  <material-drawer temporary #drawer="drawer"
                   [attr.end]="true"
                   [attr.overlay]="true">
      <div *deferredContent>
          Here is some drawer content.
      </div>
  </material-drawer>
  <material-content>
      <header class="material-header shadow">
          <div class="material-header-row">
              <span class="material-header-title">My Application</span>
              <div class="material-spacer"></div>
             nav class="material-navigation">
                  <material-button class="material-favorite-button" icon 
                   (trigger)="drawer.toggle()">
                      <material-icon icon="favorite"></material-icon>
                  </material-button>
            </nav>
            <nav class="material-navigation">
            <material-button class="material-more-button" icon (trigger)="">
                <material-icon icon="more_vert"></material-icon>
            </material-button>
            </nav>
          </div>
       </header>
    <div class="app_name">

    </div>
    <div class="controls">
       <h3>Options</h3>

       <material-toggle [(checked)]="end" label="end">
       </material-toggle>

       <material-toggle [(checked)]="overlay" label="overlay">
       </material-toggle>
    </div>
</material-content>

app_component.css

header{

}

.material-header-row {
  background-color: #212121;
  align-content: center;
 }

@media screen and (max-width: 320px) {

  header {
      width: 100%;
  }
 }

即使是应用布局在宽度为 320px 和 480px 的媒体上也无响应

【问题讨论】：

你可能需要向我们展示你的一些模板代码，也许还有 CSS，如果你摆弄它的话。 :)
我已经在问题中添加了代码

标签： dart angular-dart angular-components dart-html dart-webui

【解决方案1】：

简单的答案是从按钮中删除材料导航。它不是必需的，因为 material-button 已经提供了必要的填充。事实上，按钮根本不需要使用导航元素。

也就是说，这确实暴露了一个错误。导航链接边距是应有的两倍。 48 像素而不是 24 像素。我会解决这个问题并更新文档以使其更清晰。

感谢您发现错误并使用 angular_components

【讨论】：