Css 吕震中本：如何在不同的SplitLayoutPanel中为拆分器设置不同的样式？

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

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

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

---

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

最好的方法是使用样式名称并将其添加到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);

---

最好的方法是在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);

---

因此，我想澄清一下，您的应用程序中有多个拆分布局面板，并且您希望为其中一个设置不同的样式？是的，没错，我希望为多个拆分布局面板设置不同的样式。我想澄清一下，您的应用程序中有多个拆分布局面板，并且您希望为其中一个设置不同的样式？是的，确切地说，多个分割布局面板，我想风格不同