如何在CSS中创建JavaFX菜单及其项目？ [英] How can I style a JavaFX menu and its items in CSS?

问题描述

我有一个MenuBar，在FXML中设置如下：

 < MenuBar VBox.vgrow =NEVER > 
< menus> 
< Menu mnemonicParsing =truetext =_ File> 
< items> 
< MenuItem mnemonicParsing =truetext =_ New Project/> 
< MenuItem mnemonicParsing =truetext =_ Open .../> 
< MenuItem mnemonicParsing =falsetext =Quit/> 
< / items> 
< / Menu> 
< / menus> 
< / MenuBar> 
  

这将产生如下菜单：

我已成功用以下CSS样式化 MenuBar 和菜单 文件：

  .menu-bar {/ *菜单栏本身* /} 
 .menu {/ *文件菜单项* /} 
。菜单：显示{/ *菜单时显示（激活）* /} 
 .menu .label {/ *样式菜单项上的文本* /} 
。菜单：显示.label {/ *样式激活时菜单项上的文本* /} 
  

我已尝试将其视为ContextMenu：

<$> p $ p> .context-menu {
-fx-background-color：red;
}


不做任何事情（它不是一个ContextMenu， ）

我已经尝试了样式 menu-item 和 menu- code>：

  .menu-button，
 .menu-item {
 -fx -background-color：red; 
} 
  

这会更改菜单（文件





我已尝试选择 子结构 c $ c> .items 但似乎不存在。

问题

1. 如何选择/设置菜单（容纳新项目，打开...，退出的容器）？


2. 如何在菜单中选择/风格化每个单独的MenuItem？

澄清

为了帮助阐明我想要风格的元素，我添加了这个图片，概述了我想要风格的组件：

< img src =https://i.stack.imgur.com/sn00P.pngalt =enter image description here>

解决方案

我想你忘记了 .context-menu 中的 -fx-skin 属性。

按照如何创建菜单按钮和菜单项。

I've got a MenuBar that is setup as follows in FXML:

<MenuBar VBox.vgrow="NEVER">
    <menus>
        <Menu mnemonicParsing="true" text="_File">
            <items>
                <MenuItem mnemonicParsing="true" text="_New Project"/>
                <MenuItem mnemonicParsing="true" text="_Open…"/>
                <MenuItem mnemonicParsing="false" text="Quit"/>
            </items>
        </Menu>
    </menus>
</MenuBar>

This produces a menu as follows:

I've successfully styled the MenuBar and the Menu File with the following CSS:

.menu-bar { /* The menu bar itself */ }
.menu { /* The File menu item */ }
.menu:showing { /* menu when it's being shown (activated) */ }
.menu .label { /* Styles the text on a menu item */ }
.menu:showing .label { /* Styles the text on a menu item when activated */ }

However, I've been unable to style the menu that is displayed.

I've tried treating it as a ContextMenu:

.context-menu {
    -fx-background-color: red;
}

Doesn't do anything (it's not a ContextMenu, so no big surprise here).

I've tried styling menu-item and menu-button:

.menu-button,
.menu-item {
    -fx-background-color: red;
}

This changes the menu (File), but not the menu items or the menu that is displayed.

I've tried selecting a substructure called .items but that doesn't seem to exist.

Questions

1. How do I select/style the menu (the container that is holding New Project, Open..., Quit)?
2. How do I select/style each individual MenuItem in the menu?

Clarification

To help clarify which elements I'm looking to style, I've added this image which outlines the components I'm wishing to style:

解决方案

I think you forgot the -fx-skin property in .context-menu.
Follow the How to style menu button and menu items.

这篇关于如何在CSS中创建JavaFX菜单及其项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！