如何調整材料的UI的標籤

我想獲得這樣看（從https://material.google.com/components/tabs.html#tabs-usage拍攝照片）結果：如何調整材料的UI的標籤

我不想標籤才能寬度的100％，因爲它默認使用material-ui。是否有可能通過material-ui的實現來實現這一點？我已經使用style選項卡屬性使用了每個選項卡的寬度，但根據選定選項卡的ID，該墨水似乎被硬編碼爲使用百分比，因此不會正確劃分調整大小的選項卡。有沒有解決方法？

來源

2016-06-20 user3091275

有與此相關的問題https://github.com/callemall/material-ui/issues/1203

一個問題，但肯定的，有一個簡單的解決方法。（不幸的是它不支持跨標籤的不同寬度）。您可以使用選項卡tabItemContainerStyle屬性來設置選項卡容器的寬度（使其成爲您希望每個選項卡乘以選項卡數量的寬度）。
由於在該元素上設置了背景顏色，因此您需要重寫另外兩個選項卡屬性（style和contentContainerStyle）的樣式。

在這個例子中，我在style屬性（對於整個組件）中設置與我的選項卡相同的顏色，並將contentContainerStyle設置回白色背景。
您可以使用類的屬性以及..

例：（假設你有一個藍色的工具欄）

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

來源

2016-06-21 14:11:53

它的工作，該選項卡的大小，而inkbar如下。一個小小的失望是我想在選項卡上添加一個陰影，現在選項卡沒有佔據屏幕上的所有屏幕，陰影不能覆蓋屏幕的所有寬度。另外，如果我想要將選項卡居中，該怎麼辦？我可以添加'margin：auto'來完成，但是那個墨水條會丟失。在瀏覽器中修改css我可以找到一個div，在這個div上應用'margin：auto'在inkbar上，但它不在material-ui組件之外。 – user3091275

那麼，在這種情況下，你可以使用'className'屬性。例如：'className div：nth-child（2）' - 這樣你可以設置該元素的margin：auto .. –

它正在工作，但由於tabs項目包含每個標籤中的頁面，下面的子div在層次結構中具有'margin：auto'。這是一個小jsfiddle來表達我的觀點：http://jsfiddle.net/mattderferf/va1bsqv2/ – user3091275

如何調整材料的UI的標籤

回答

相關問題