Come ridimensionare le linguette di materiale-ui

Sto cercando di ottenere un risultato simile a questo (foto scattata da https://material.google.com/components/tabs.html#tabs-usage):Come ridimensionare le linguette di materiale-ui

Non voglio le schede per prendere il 100% della larghezza della pagina, in quanto è di default con materiale-ui. È possibile farlo con l'implementazione di materiale-ui? Ho già giocato con la larghezza di ciascuna scheda utilizzando la proprietà della scheda style, ma la barra di inchiostro sembra codificata per utilizzare le percentuali in base all'ID della scheda selezionata e pertanto non sottolinea correttamente le schede ridimensionate. C'è una soluzione?

fonte

2016-06-20 user3091275

C'è un problema relativo a questo problema https://github.com/callemall/material-ui/issues/1203

Ma sì, c'è una soluzione semplice. (sfortunatamente non supporta larghezze diffrenti tra le schede). È possibile utilizzare la proprietà Tabulazioni tabItemContainerStyle per impostare la larghezza del contenitore di schede (renderlo la larghezza desiderata per ciascuna scheda per il numero di schede).
Poiché il colore di sfondo è impostato su quell'elemento, è necessario sostituire gli stili per altre due proprietà Tabulazioni (style e contentContainerStyle).

In questo esempio Im impostare lo stesso colore delle mie schede nella proprietà style (per l'intero componente) e impostare contentContainerStyle su uno sfondo bianco.
è possibile utilizzare la proprietà di classi come pure ..

Ex: (Immaginate di avere una barra degli strumenti blu)

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

fonte

2016-06-21 14:11:53

Ha funzionato, le linguette vengono ridimensionati e l'inkbar segue. Una piccola delusione è che volevo aggiungere un'ombra sulle schede, ora che le schede non stanno prendendo tutto lo schermo l'ombra non copre tutta la larghezza dello schermo. Inoltre, cosa succede se voglio centrare le schede? Posso farlo aggiungendo 'margin: auto' ma poi la inkbar è persa. Modifica del css nel browser Potrei trovare un div su cui applicare 'margin: auto' sulla barra d'inchiostro, ma non è disponibile al di fuori del componente ui del materiale. – user3091275

Bene, in tal caso potresti usare la proprietà 'className'. ex: 'className div: nth-child (2)' - in questo modo è possibile impostare quell'elemento al margine: auto .. –

Funziona, ma poiché l'elemento tabs contiene le pagine in ogni scheda, questo forza tutto il secondo le div al di sotto nella gerarchia per avere 'margin: auto'. Ecco un piccolo jsfiddle per presentare il mio punto: http://jsfiddle.net/mattderferf/va1bsqv2/ – user3091275

Come ridimensionare le linguette di materiale-ui

risposta

Problemi correlati