如何在材质UI中创建带有多标签的自定义TABS？

Question

我正在使用重要的用户界面， import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; import { environment } from '../../../environments/environment'; import { HttpApi } from '../http/http-api'; const OAUTH_DATA = environment.oauth; @Injectable({ providedIn: 'root' }) export class AuthenticationService { constructor(private http: HttpClient) { } public loginWithUserCredentials(username: string, password: string): Observable<any> { let headers = new HttpHeaders(); headers = headers.set('Content-Type', 'application/x-www-form-urlencoded'); const body = new URLSearchParams(); body.set('grant_type', 'password'); body.set('client_id', OAUTH_DATA.client_id); body.set('client_secret', OAUTH_DATA.client_secret); body.set('username', username); body.set('password', password); body.set('scope', OAUTH_DATA.scope); return this.http.post(HttpApi.oauthLogin, body.toString(), {headers: headers}) .pipe(map((response: any) => { localStorage.setItem('session', JSON.stringify(response)); return response; })); } } 这样的代码示例...

material-ui/Tabs

但是我想在每个选项卡中添加标签2，以便它看起来与此类似...

这是我的示例代码框https://codesandbox.io/s/xjj5j6284

谢谢。

Answer 1

标签可以根据需要复杂。例如：

          <Tab
            label={
              <React.Fragment>
                T1 Label 1<br />
                <span style={{ fontSize: "smaller" }}>T1 Label2</span>
              </React.Fragment>
            }
          />

一个侧面说明是，我想确保您知道您使用的是Material-UI的非常旧的版本。当前版本的导入以“ @ material-ui / core”开头，而不是“ material-ui”。

所以不是

import { withStyles } from "material-ui/styles";
import AppBar from "material-ui/AppBar";
import Tabs, { Tab } from "material-ui/Tabs";
import Typography from "material-ui/Typography";

您应该拥有

import { withStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";