मैंने मेनू बटन में शैलियों को बदलने की कोशिश की। मैं मेनू बटन शैली बदल सकता हूं लेकिन इसकी मेनू वस्तु नहीं। कोई फर्क नहीं पड़ता कि मैं मेनू बटन के अंदर मेनू आइटम का प्रयास क्यों अपरिवर्तित बनी हुई है।मेनू बटन और मेनू आइटम शैली कैसे बनाएं
.menu-button {
-fx-background-color:black;
}
.menu-button .label {
-fx-background-color:black; }
अब मैं रंग कि बाहर छोड़ दिया है कैसे बदल सकते हैं ??
MenuButton आंतरिक रूप से Menu का उपयोग करता है और एक समान API है। इस तरह MenuButton में MenuItem की सूची Menu जैसी है। इसलिए मुझे लगता है कि आपको .menu, .menu-button और .menu-item सीएसएस चयनकर्ताओं को caspian.css में खेलने का प्रयास करने की आवश्यकता है। अधिक विशेष रूप से .menu-item के साथ।
संपादित करें: ऐसा लगता है आप .context-menu भी बदलने के लिए है, क्योंकि menuButton के ऊपर पॉपअप मेनू ContextMenu है की जरूरत है।
.menu-item .label {
-fx-text-fill: white;
}
.menu-item:focused {
-fx-background-color: darkgray;
}
.menu-item:focused .label {
-fx-text-fill: blue;
}
.context-menu {
-fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
-fx-background-color: black;
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4;
/* -fx-padding: 0.666667em 0.083333em 0.666667em 0.083333em; 8 1 8 1 */
-fx-padding: 0.333333em 0.083333em 0.666667em 0.083333em; /* 4 1 8 1 */
}
यह भी here और here कहा गया है, तो मैं स्टाइल मेनू सलाखों के लिए एक सीएसएस टेम्पलेट लिखने का फैसला किया।
इस सीएसएस टेम्पलेट का उपयोग करते हुए एक MenuBar शैली एक बहुत ही आसान तरीका है अपने शीर्ष स्तर के MenuButton प्रविष्टियों, और प्रत्येक MenuButton के MenuItem बच्चों, यानी, "पूरे मेनू पट्टी" है।
-fx-my-menu-color: मेनू पट्टी के डिफ़ॉल्ट पृष्ठभूमि रंग (यानी, जब आइटम hovered नहीं है/चयनित)केवल एक चीज किया जा सकता है कि एक की जरूरत के अनुसार चार चर समायोजित करने के लिए है -fx-my-menu-color-highlighted: यदि आइटम को कवर/चुना गया है तो एक आइटम का पृष्ठभूमि रंग।
-fx-my-menu-font-color: मेनू पट्टी के डिफ़ॉल्ट फ़ॉन्ट रंग (यानी, जब आइटम hovered नहीं है/चयनित)-fx-my-menu-font-color-highlighted: एक आइटम का फ़ॉन्ट रंग अगर यह hovered है/चयन किया। /* VARIABLE DEFINITIONS: Only these 4 variables have to be adjusted, the rest is copy-paste */
* {
-fx-my-menu-color: #263238; /* Change according to your needs */
-fx-my-menu-color-highlighted: #455a64; /* Change according to your needs */
-fx-my-menu-font-color: #FFFFFF; /* Change according to your needs */
-fx-my-menu-font-color-highlighted: #FFFFFF; /* Change according to your needs */
}
/* MENU BAR + Top-level MENU BUTTONS */
/*** The menu bar itself ***/
.menu-bar {
-fx-background-color: -fx-my-menu-color;
}
/*** Top-level menu itself (not selected/hovered) ***/
.menu-bar > .container > .menu-button {
-fx-background-color: -fx-my-menu-color;
}
/*** Top-level menu's label (not selected/hovered) ***/
.menu-bar > .container > .menu-button > .label {
-fx-text-fill: -fx-my-menu-font-color;
}
/*** Top-level menu's label (disabled) ***/
.menu-bar > .container > .menu-button > .label:disabled {
-fx-opacity: 1.0;
}
/*** Top-level menu itself (selected/hovered) ***/
.menu-bar > .container > .menu-button:hover,
.menu-bar > .container > .menu-button:focused,
.menu-bar > .container > .menu-button:showing {
-fx-background-color: -fx-my-menu-color-highlighted;
}
/*** Top-level menu's label (selected/hovered) ***/
.menu-bar > .container > .menu-button:hover > .label,
.menu-bar > .container > .menu-button:focused > .label,
.menu-bar > .container > .menu-button:showing > .label {
-fx-text-fill: -fx-my-menu-font-color-highlighted;
}
/* MENU ITEM (children of a MENU BUTTON) */
/*** The item itself (not hovered/focused) ***/
.menu-item {
-fx-background-color: -fx-my-menu-color;
}
/*** The item's label (not hovered/focused) ***/
.menu-item .label {
-fx-text-fill: -fx-my-menu-font-color;
}
/*** The item's label (disabled) ***/
.menu-item .label:disabled {
-fx-opacity: 1.0;
}
/*** The item itself (hovered/focused) ***/
.menu-item:focused, .menu-item:hovered {
-fx-background-color: -fx-my-menu-color-highlighted;
}
/*** The item's label (hovered/focused) ***/
.menu-item:focused .label, .menu-item:hovered .label {
-fx-text-fill: -fx-my-menu-font-color-highlighted;
}
/* CONTEXT MENU */
/*** The context menu that contains a menu's menu items ***/
.context-menu {
-fx-background-color: -fx-my-menu-color;
}
पूरा सीएसएस फ़ाइल प्रत्येक निर्धारित नियम समझाने के लिए टिप्पणी की है