Wie erreiche ich Multiline-Label mit reagieren Material UI

Question

Ich benutze reagieren js, um meine Web-Anwendung zu entwickeln, und ich verwende React Material Design für die Benutzeroberfläche. Unten ist die URL, die ich verweise.

https://material-ui-next.com/

Ich versuche, so etwas wie diese

ich den Tabs verwenden zu erreichen, aber ich kann nicht einen zweizeiligen Text wie das Bild, das ich geteilt bekommen. Entweder kann ich Bild und Label verwenden oder wenn das Label zu groß ist, geht es in Multiline. Wie kann ich zwei Linien Text wie das Bild erreichen

Answer 1

Es ist eine alte Frage, aber ich sehe niemand hat es schon beantwortet.

Um mehrzeilige und mehrfache Stile für Ihre Registerkartenbezeichnung zu erhalten, müssen Sie Ihre Etiketten und Werte in zwei verschiedenen Positionen platzieren. (stellen Sie sicher, dass Sie sie zuerst in ein div verpacken)

Der bevorzugte Weg in MUI @ 1.0.0 ist die Verwendung des Tags <Typography />.

Überprüfen Sie die typography docs für alle Varianten.

So wäre es etwa so aussehen:

<Tab 
    value={this.state.value} 
    label={ 
     <div> 
     <Typography variant="caption"> 
      Following 
     </Typography> 
     <Typography variant="title"> 
      58 
     </Typography> 
     </div> 
    } 
/> 

Da jedoch alle Ihre Tabs müssen, dass Sie wahrscheinlich eine Funktion zu kümmern, dass schaffen sollte.

Ich habe eine Sandbox erstellt basierend auf dem MUI Beispiel here bereitgestellt: https://codesandbox.io/s/vw6107rv3