css - GWT:如何在不同的 SplitLayoutPanel 中为拆分器设置不同的样式？

Question

我知道您可以使用文档中列出的默认样式更改拆分器的样式:

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

我们在早期的开发中已经做到了。但是，现在我正在开发新的东西，并且想在新的 SplitLayoutPanel 中为拆分器使用不同的样式。不幸的是，我们没有或不能将应用程序拆分为不同的模块，这可能会使这更容易。

我尝试创建一种新样式并将其应用于我的新 SplitLayoutPanel，但它似乎对拆分器没有任何影响。我认为可能有一种方法可以处理拆分器以便将新样式仅应用于它们，但我没有找到任何此类方法。

Answer 1

最好的方法是使用 CSS selectors并将样式名称添加到您的 SplitLayoutPanel。

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