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);