使用 Angular Material 制作图标标签？

Question

我才刚刚开始 Angular Material。我想知道是否有办法在选项卡上显示图标而不是常规文本标签。我的问题是，我正在使用它来构建移动应用程序，但标签文本太大而无法容纳。

Answer 1

我明白了。由于您只能为其提供标签属性，因此我制作了自己的 dingbat 字体。做了很多工作，但最终还是奏效了，所以我想这是值得的。

如果有人卡住了，这就是我所做的： http://www.zoersel-tv.be/edius/inkscape-dingbats.pdf

Answer 2

md-tabs 支持两种语法：一种使用 label 属性，另一种使用 md-tab-label 和 md-tab-body 作为标记。此语法是专门为此用例添加的。

您使用的语法：

<md-tabs>
  <md-tab label="One">
    Tab One Content
  </md-tab>
</md-tabs>

您最有可能寻找的语法：

<md-tabs>
  <md-tab>
    <md-tab-label>One</md-tab-label>
    <md-tab-body>Tab One Content</md-tab-body>
  </md-tab>
</md-tabs>

这是演示此语法的 CodePen：

http://codepen.io/robertmesserle/pen/7bbeaf916d45ac2dde4967cf57307338?editors=100

Answer 3

要以 Robert 的回答为基础，您甚至可以在选项卡中组合使用图标和文本。

       <md-tab id="tab1" class="less-padding">
        <md-tab-label>
          <section layout="column" layout-align="center center">
            <md-icon md-svg-src=".svg" class="md-accent"></md-icon>
            Yes/No
          </section>
        </md-tab-label>
        <md-tab-body>
          View for Item #1 <br/>
          data.selectedIndex = 0;
        </md-tab-body>
      </md-tab>

最后，编辑为 .md-tab 提供的 CSS 填充，其中默认填充为 "padding: 12px 24px;"。将顶部和底部填充设置为 1px，你应该可以开始了！希望对大家有帮助！

Answer 4

对于 Angular Material，您可以使用 mat-icon 来显示图标按钮而不是大文本。

它将显示如下：

这是它的示例代码。

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon class="example-tab-icon">thumb_up</mat-icon>
      First
    </ng-template>
    Content 1
  </mat-tab>

  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon class="example-tab-icon">thumb_up</mat-icon>
      Second
    </ng-template>
    Content 2
  </mat-tab>

  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon class="example-tab-icon">thumb_up</mat-icon>
      Third
    </ng-template>

    Content 3
  </mat-tab>
</mat-tab-group>

使用 Angular Material 制作图标标签？

Making icon tabs with Angular Material?

angularjs

angular-material