【问题标题】:Angular 4 Material 2 - Center Tab ComponentsAngular 4 Material 2 - 中心选项卡组件
【发布时间】:2017-07-22 15:26:30
【问题描述】:

我不知道如何使 Angular Material 选项卡组件居中。

可以在这里看到: https://material.angular.io/components/tabs/overview

我认为甚至有一种方法可以做到这一点,只是非常不清楚 imo 该怎么做。

以下是文档的屏幕截图。 属性是什么意思?是在 html 中还是需要在 typescript 中设置?

非常感谢您的帮助。

【问题讨论】:

  • 我已经更新了答案。此项目不应出现在 API 调用文档中。我最终创建了一个 PR 来修复它,文档将很快更新。

标签: angular angular-material2


【解决方案1】:

看起来您正在寻找的是md-stretch-tabs 属性,它应该应用于<md-tab-group>

<md-tab-group md-stretch-tabs>
    <md-tab label="Tab 1">
        <p>Content for tab 1.</p>
    </md-tab>
    <md-tab label="Tab 2">
        <p>Content for tab 2.</p>
    </md-tab>
    ...
</md-tab-group>

Plunker

【讨论】:

    【解决方案2】:

    这是一个不应公开的内部调用。已发出一个请求以解决此问题,但您将无法使用此 API 调用。

    检查this issue on github 以获取更新。

    抱歉,这不是您要找的答案。

    【讨论】:

      【解决方案3】:

      您可以在投影内容时使用md-tab-body属性设置位置值。

      position 值应使用typescript code 设置。

      <md-tab-group>
        <md-tab label="Tab 1"  >
           <div md-tab-body #tab >
            <button (click)="clickedMe()">Clicked</button>
          </div>
        </md-tab>
        <md-tab label="Tab 2">Content 2</md-tab>
      </md-tab-group>
      

      打字稿代码

        @ViewChild('tab') tab: TemplateRef;
         ngAfterViewInit(){
           console.log(this.tab);
           this.tab.position = 100;
         }
         ngAfterContentInit(){
           console.log(this.tab);
         }
         clickedMe(){
           console.log(this.tab);
         }
      

      LIVE DEMO

      【讨论】:

      • 这似乎并没有改变相对于其他标签的位置,这是位置标签应该做的。
      【解决方案4】:

      我还尝试首先使用 API 调用中的位置将它们对齐在中心。但是,放弃之后,我在组件样式中添加了以下内容:

      .mat-tab-labels{
          justify-content: center;
      }
      

      然后,在我的组件打字稿文件中包含封装装饰器:

      import { Component, OnInit, ViewEncapsulation } from '@angular/core';
      @Component({
          selector: 'mytabs',
          templateUrl: './mytabs.component.html',
          styleUrls: ['./mytabs.component.scss'],
          encapsulation: ViewEncapsulation.None
      })
      

      Try it on Stackblitz

      @Edrik 提到的“md-stretch-tab”属性,正如其名称所述,拉伸制表符。但是,在这种方法中,我们只是将它们对齐在中心。

      【讨论】:

        猜你喜欢
        • 2019-07-29
        • 1970-01-01
        • 2018-08-18
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-01-13
        • 2017-04-25
        相关资源
        最近更新 更多