Question

材料导航项在应用标题上重叠，设备宽度为320px的角度组件的应用布局，导航项之间的空间超出要求。那么如何用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

的媒体上也没有响应

Answer 1

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

那说这确实存在一个错误。导航链接边距是应该的两倍。 48px而不是24px。我将修复此问题并更新文档以使其更清晰。

感谢您找到错误并使用angular_components

应用AngularDart的角度组件布局

1 个答案: