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

GWT：如何在不同的SplitLayoutPanel中为分割器设置不同的样式？

1 个答案: