Question

我是Angular 2/4的新手，并且一直在享受Material Design组件（https://material.angular.io）。我有一个简单的SPA，它使用一个选项卡组在动态视图之间切换。我有一个加号按钮，用于添加更多选项卡，每个选项卡都可以自行删除。

我的问题是mat-tab-group是否可以更改为包含上方栏中的“加号”按钮（显示标签的位置）。现在它位于mat-tab-group div旁边的div中，因此在我的网页的整个右侧占据了20px，这看起来并不是很好。

Answer 1

一种方法是添加另一个没有内容的禁用选项卡，并将click事件附加到选项卡标签中的按钮。

<mat-tab-group>
    <mat-tab label="Tab 1">Tab 1 Content</mat-tab>
    <mat-tab label="Tab 2">Tab 2 Content</mat-tab>
    <mat-tab disabled>
        <ng-template mat-tab-label>
            <button mat-icon-button (click)="someFn()">
                <mat-icon>add_circle</mat-icon>
            </button>
        </ng-template>
    </mat-tab>
</mat-tab-group>

唯一奇怪的是标签标签的宽度。我无法弄清楚如何减少那个特定的。

Answer 2

在我的styles.css中删除了禁用的样式并减小了标签的大小：

import React, { Component } from 'react';
import fire from './Fire';
import SearchAppBar from '../components/appBar';
import Login from './login';


class App extends Component {
  constructor() {
    super();
    this.state = ({
      user: null,
    });
    this.authListener = this.authListener.bind(this);
  }

  componentDidMount() {
    this.authListener();
  }

  authListener() {
    fire.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({ user });
      } else {
        this.setState({ user: null });
      }
    });
  }
  render() {
    return (
     <div>{this.state.user ? ( <SearchAppBar/>) : (<Login />)}</div>)
}
}

export default App;

其中“ my-component”是组件的html选择器。

看起来像这样： tabs with add button

将按钮添加到mat-tab-group

2 个答案: