GWT：如何在不同SplitLayoutPanels中爲不同Splitter分配不同的樣式？

Question

我知道你可以改變風格分路器的使用在該文檔中列出的默認樣式：

.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-HDragger { horizontal dragger } 
.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-VDragger { vertical dragger } 

和我們所做的是在早期的發展。然而，現在我正在開發新的東西，並希望在新的SplitLayoutPanel中爲分隔線使用不同的樣式。不幸的是，我們沒有或不能將應用程序分成不同的模塊，這可能會使這更容易。

我試着創建一個新的樣式並將其應用到我的新SplitLayoutPanel，但它似乎沒有任何影響分離器。我認爲可能有一種方法來處理拆分器，以便僅將新樣式應用於它們，但我沒有找到任何此類方法。

Answer 1

做到這一點的最好方法是使用CSS selectors併爲SplitLayoutPanels添加樣式名稱。

SplitLayoutPanel greenPanel = new SplitLayoutPanel(); 
greenPanel.addStyleName("green"); 
greenPanel.addEast(new Label("Green East"), 50); 
greenPanel.add(new Label("Green Center")); 
SplitLayoutPanel redPanel = new SplitLayoutPanel(); 
redPanel.addStyleName("red"); 
redPanel.addNorth(new Label("Red North"), 50); 
redPanel.add(new Label("Red Center")); 

StyleInjector.inject(".green.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-HDragger { background: green; }"); 
StyleInjector.inject(".green.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-VDragger { background: green; }"); 
StyleInjector.inject(".red.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-HDragger { background: red; }"); 
StyleInjector.inject(".red.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-VDragger { background: red; }"); 
RootLayoutPanel rlp = RootLayoutPanel.get(); 
rlp.add(greenPanel); 
rlp.setWidgetTopHeight(greenPanel, 0, PX, 50, PCT); 
rlp.add(redPanel); 
rlp.setWidgetBottomHeight(redPanel, 0, PX, 50, PCT);