css - 选择了 GluonMobile Css 抽屉导航

Question

在 GluonMobile 上，有没有办法在抽屉中选择元素时使用 CSS？

我的应用程序将有很多菜单，所以我希望能够快速查看我们所希望的菜单。

我设法获得元素颜色、悬停颜色但不是选定的。

.navigation-drawer{

   -fx-background-color: -primary-swatch-500;
}


.item  {
   -fx-background-color: -primary-swatch-300;
}

.item > .item-content:hover{
   -fx-background-color: black;
}

我尝试了所有这些事情

.item:selected
.item > .item-content:selected
.item:focused
.item > .item-content:focused

但没有任何效果。

所以首先有人可以解释我为什么我需要做 .item > .item-content:hover 为什么不像我以前做过的任何其他 CSS 那样只是 .item:hover。

其次，由于缺乏 IMO 文档，我发现很难使用 GluonMobile。

也许我还没有找到编写文档，但事实上我需要执行 printLn 来为我找到节点的样式表，我觉得这很奇怪。

Answer 1

Gluon Mobile 控件的 JavaDoc，例如 NavigationDrawer.Item 是 here .

但是，您不会找到应用于这些控件的样式类，因为您不会在 JavaFX 内置控件 javadoc 中找到它。

每当您在寻找正确的样式类和伪类时遇到问题，我强烈建议您使用 ScenicView .

找到 distribution对于 Java 8，并运行它:

java -jar scenicView.jar

当您还在桌面上运行 Gluon Mobile 元素时:

./gradlew run

例如，当您打开默认的 Glisten-Afterburner 模板元素的抽屉时，您可以看到:

具有item 样式类的节点是一个ViewItem，它获得selected 和hover 状态。

带有 item-content 的节点是一个 HBox，ViewItem 的子节点，当它获得 hover 时，它没有被选中:

按照节点的层次结构，您还可以创建样式类的层次结构，例如:

.navigation-drawer > * > .scroll-pane > .viewport > * > .container > .item > .item-container

因此对于抽屉中的每个元素，不同的状态可以是:

.item:hover {}
.item:selected {}
.item:selected:hover {}

或者对于内容节点:

.item:selected > .item-content {}
.item:selected:hover > .item-content {}
...

在你的情况下，你可以应用类似的东西:

.item {
    -fx-background-color: -primary-swatch-300;
}

.item > .item-content:hover {
    -fx-background-color: black;
}

.item:selected > .item-content { 
    -fx-background-color: green;
}

.item:selected:hover > .item-content {
    -fx-background-color: lightgreen;
}

得到类似的东西: