Wie Material-ui des Tabs

Ich versuche, ein Ergebnis zu erhalten suchen, wie diese (Bild von https://material.google.com/components/tabs.html#tabs-usage genommen), um die Größe:Wie Material-ui des Tabs

Ich möchte nicht, dass die Laschen 100% der Breite nehmen der Seite, wie es standardmäßig bei Material-Ui ist. Ist es möglich, dies mit der Implementierung von Material-Ui zu tun? Ich habe bereits mit der Registerkarte style mit der Breite jeder Registerkarte gespielt, aber die Tinte scheint hardcodiert zu sein, um Prozentsätze entsprechend der ID der ausgewählten Registerkarte zu verwenden, und unterstreicht daher nicht die Größe der Registerkarten. Gibt es eine Problemumgehung?

Quelle

2016-06-20 user3091275

Es gibt ein Problem für dieses Problem im Zusammenhang https://github.com/callemall/material-ui/issues/1203

Aber ja, gibt es eine einfache Abhilfe. (Leider unterstützt es nicht verschiedene Breiten über die Tabs). Sie können die Tabs tabItemContainerStyle -Eigenschaft verwenden, um die Breite des Tabs-Containers festzulegen (machen Sie es die Breite, die Sie zu jeder Registerkarte mal die Anzahl der Registerkarten wünschen).
Da die Hintergrundfarbe für dieses Element eingestellt ist, müssen Sie die Stile für zwei andere Registerkarten-Eigenschaften überschreiben (style und contentContainerStyle).

In diesem Beispiel habe ich die gleiche Farbe wie meine Registerkarten in der Eigenschaft style (für die gesamte Komponente) eingestellt und die contentContainerStyle wieder auf einen weißen Hintergrund gesetzt.
Sie könnten die Klassen-Eigenschaften als auch verwenden ..

Ex: (Stellen Sie sich eine blaue Symbolleiste haben)

<Tabs 
    tabItemContainerStyle={{width: '400px'}} 
    style={{background: 'blue'}} 
    contentContainerStyle={{background: '#FFF'}} >

Quelle

2016-06-21 14:11:53

Es funktionierte, werden die Registerkarten der Größe verändert und die inkbar folgt. Eine kleine Enttäuschung ist, dass ich einen Schatten auf den Tabs hinzufügen wollte, jetzt, da die Tabs nicht den gesamten Bildschirm einnehmen, deckt der Schatten nicht die gesamte Breite des Bildschirms ab. Was auch, wenn ich die Tabs zentrieren möchte? Ich kann das tun, indem ich 'margin: auto' hinzufüge, aber dann ist die Farbleiste verloren. Wenn ich das CSS im Browser ändere, könnte ich ein Div finden, auf das margin: auto in der Inkbar angewendet werden soll, aber es ist von außerhalb der material-ui-Komponente nicht verfügbar. – user3091275

Nun, in diesem Fall könnten Sie die Eigenschaft 'className' verwenden. Beispiel: 'className div: nth-child (2)' - auf diese Weise können Sie das Element auf den Rand setzen: auto .. –

Es funktioniert, aber da das Tabs-Element die Seiten in jedem Tab enthält, erzwingt dies die ganze Sekunde child divs unterhalb in der Hierarchie, um 'margin: auto' zu haben. Hier ist ein kleines Puzzle, um meinen Punkt zu präsentieren: http://jsfiddle.net/mattderferf/va1bsqv2/ – user3091275

Antwort

Verwandte Themen