Question

我正在尝试实现与https://www.polymer-project.org/1.0/docs/devguide/feature-overview

类似的布局

这是我目前所拥有的：

<app-header-layout bleeding>
            <app-header condenses reveals snaps shadow>
                <app-toolbar>
                    <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
                    <div main-title flex>My App</div>
                    <paper-tabs scrollable bottom-item selected="0">
                        <paper-tab>Tab 1</paper-tab>
                        <paper-tab>Tab 2</paper-tab>
                        <paper-tab>Tab 3</paper-tab>
                    </paper-tabs>
                </app-toolbar>
            </app-header>

和

        paper-tabs {
            max-width: 640px;
            --paper-tabs-selection-bar: {
                height: 5px;
            };
            --paper-tabs-selection-bar-color: var(--app-primary-color);
        }

然而，所有元素都在彼此之上显示，而不是一直显示在右边。

Result

我该怎么做才能解决这个问题？

Answer 1

您可以这样做：

<app-header-layout>
  <app-header>
    <app-toolbar>
      <paper-icon-button id="button" icon="menu" drawer-toggle></paper-icon-button>
      <div class="title" main-title>App name</div>
      <div class="bottom">
        <div class="flex"></div>
        <paper-tabs scrollable selected="0">
          <paper-tab>Tab 1</paper-tab>
          <paper-tab>Tab 2</paper-tab>
          <paper-tab>Tab 3</paper-tab>
        </paper-tabs>
      </div>
    </app-toolbar>
  </app-header>
  <div>
    main content
  </div>
</app-header-layout>

和

paper-tabs {
  min-width: 200px;
}

.bottom {
  margin-top: auto;
  @apply(--layout-horizontal);
}

.flex {
  @apply(--layout-flex);
}

请注意，如果您确实想使用scrollable属性，则需要指定paper-tabs的宽度。否则，只需删除min-width和scrollable属性即可。别忘了导入iron-flex-layout。

将纸张标签对齐到聚合物中纸张图标按钮和主标题以及内部应用程序工具栏的右侧

1 个答案: