Навигационный ящик GluonMobile Css выбран - PullRequest
Новая
       24

Навигационный ящик GluonMobile Css выбран

0 голосов
/ 05 октября 2019

На 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 и почему бы просто .item: hover, как в любом другом CSS-коде, который я делал раньше.

Во-вторых, мне очень трудно работать с GluonMobile из-за отсутствия документации IMO.

Возможно, я еще не нашел документацию для записи, но тот факт, что мне нужно было сделать printLn, чтобы найти для меня таблицу стилей узла, мне кажется странным.

1 Ответ

0 голосов
/ 06 октября 2019

Элементы управления JavaDoc для Gluon Mobile, такие как NavigationDrawer.Item - это здесь .

Однако вы не найдете классы стилей, примененные к этим элементам управления, так как вы не найдетенайдите его либо во встроенном элементе управления JavaFX javadoc.

Если у вас есть проблемы с поиском правильных классов стилей и псевдоклассов, я настоятельно рекомендую вам использовать ScenicView .

Найдите дистрибутив для Java 8 и запустите его: 

java -jar scenicView.jar

, пока вы также запускаете проект Gluon Mobile на рабочем столе: 

./gradlew run

Например, когда вы открываете ящик стандартного проекта шаблона Glisten-Afterburner, вы видите:

SV+GM

узел с itemкласс стиля - ViewItem, и он получает состояния selected и hover.

Узел с item-content является HBox, потомком ViewItem, и пока он получает hover, он не получает selected:

Item-content

Следуя иерархии узлов, вы также можете создать иерархию классов стилей, например:

.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;
}

, чтобы получить что-то вроде:

image

...