如何更改vaadin中的tabbar顏色？

喜要更改標籤的顏色，當標籤得到集中在vaadin？任何一個可以幫助我如何自定義標籤頁來實現這一目標..如何更改vaadin中的tabbar顏色？

2010-01-23 Kumar

這是一個好主意，用一個工具，如螢火檢查DOM結構的組件。例如，當檢查示例中的TabSheet示例的DOM結構時，您會看到所有選項卡都具有樣式類v-tabsheet-tabitem。如果選擇第一個選項卡，它將獲得以下樣式類「v-tabsheet-tabitemcell」，「v-tabsheet-tabitemcell-first」和「v-tabsheet-tabitemcell-selected-first」。如果選擇第二個選項卡，它將獲得以下樣式類：「v-tabsheet-tabitemcell」和「v-tabsheet-tabitemcell-selected」。如您所見，您需要修改的樣式與標籤在標籤頁中的位置有關。

關於更改選項卡的顏色，讓我們看看選定選項卡的CSS。

 

.v-tabsheet-tabitemcell-selected { 
    background-image:url(common/img/vertical-sprites.png); 
    background-position:left -1444px; 
}

正如你所看到的，實際的css並不複雜。然而，在CSS中使用的技術並不常見，它使用了一種優化。所有的背景圖像都加入到一個PNG圖像中，並調整背景圖像的位置，以便我們獲得想要顯示的圖像作爲背景。你需要做的是創建自己的主題並修改該圖像以滿足自己的需求。查看Vaadin書籍，瞭解更多關於創建自定義主題的細節。

來源

2010-01-24 17:04:31

實際上，您不需要知道技術（CSS sprites）以更改選項卡的背景。你只需要使用普通的CSS，不需要魔法。

因此，創建一個新的背景圖像（純色是不夠的），並將其設置爲相關元素的背景。重複選項卡中包含的所有相關元素（它們也可以指定一些背景）。

如果您希望修改從Vaadin馴鹿主題的原始圖像，他們可以從這裏找到：http://dev.vaadin.com/browser/versions/6.4/WebContent/VAADIN/themes/reindeer/tabsheet/img

來源

2010-07-20 11:45:43 Jouni

如何更改vaadin中的tabbar顏色？

回答

相關問題