1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html lang="en-US"> 3 <head> 4 <meta name="description" content="This document describes the JavaFX 5 Cascading Style Sheets (CSS) for JavaFX 9 and explains the 6 styles, values, properties and associated grammar."> 7 <meta name="keywords" content="JavaFX, JavaFX CSS, JavaFX CSS reference, 8 JavaFX CSS guide, JavaFX styling, CSS styles, CSS, cascading style sheets, 9 JavaFX GUI development, JavaFX application development"> 10 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 11 <title>JavaFX CSS Reference Guide</title> 12 <style type="text/css"> 13 body { 14 font-family: Helvetica, Arial, sans-serif; 15 font-size: 14px; 16 } 17 h1 { 18 font-size: 28px; 19 color:#385E76 20 } 21 h2 { 22 border-top: 3px dashed #DDD; 23 margin-top: 30px; 24 padding-top: 15px; 25 font-size: 22px; 26 color:#385E76 27 } 28 h3 { 29 background-color: #EEE; 30 padding: 3px; 31 font-size: 18px; 32 } 33 h4 { 34 font-size: 16px; 35 margin: 18px 0px 10px 0px; 36 } 37 ul.contents li { 38 font-size: 12px; 39 font-weight:bold; 40 list-style-type:circle; 41 margin: 3px 0px 3px 0px; 42 } 43 ul.contents li li { 44 font-weight:normal; 45 list-style-type:circle; 46 } 47 /*ul.contents a { 48 color:#000 49 }*/ 50 a { 51 text-decoration:none; 52 color:#06C 53 } 54 .csspropertytable { 55 background-color: #CCC; 56 } 57 .csspropertytable th { 58 font-size: 10px; 59 } 60 .csspropertytable td { 61 background-color:#FFF; 62 font-size: 12px; 63 } 64 /*.csspropertytable td:first-child { 65 color:#06C; 66 font-weight:bold; 67 white-space:nowrap; 68 }*/ 69 .package { 70 margin: 15px 0px 0px 0px; 71 padding: 2px; 72 background-color:#666; 73 color:#FFF; 74 font-weight:bold; 75 border:none 76 } 77 .package td { 78 background-color:#666; 79 font-size: 14px; 80 } 81 td.parents { 82 font-weight:bold; 83 color:#C00; 84 background-color:#DDD; 85 padding: 4px; 86 text-align:center; 87 font-size: 10px; 88 } 89 .propertyname { 90 color:#06C; 91 font-weight:bold; 92 white-space:nowrap; 93 } 94 td.value { 95 font-family:"Lucida Console", Monaco, monospace; 96 font-size: 10px; 97 } 98 td.default { 99 font-family:"Lucida Console", Monaco, monospace; 100 font-size: 10px; 101 text-align:center; 102 white-space:nowrap; 103 } 104 td.range { 105 font-family:"Lucida Console", Monaco, monospace; 106 font-size: 10px; 107 text-align:center; 108 white-space:nowrap; 109 } 110 td.implemented { 111 text-align:center; 112 white-space:nowrap; 113 } 114 .grammar { 115 font-family:"Lucida Console", Monaco, monospace; 116 font-size: 14px; 117 color:#039; 118 } 119 p.example { 120 font-family:"Lucida Console", Monaco, monospace; 121 font-size: 14px; 122 /* white-space: pre; */ 123 124 padding: 0px 0px 0px 40px; 125 color:#090; 126 margin: 0px; 127 } 128 span.example { 129 font-family:"Lucida Console", Monaco, monospace; 130 font-size: 14px; 131 color:#090; 132 } 133 p.subtitle { 134 font-style: italic; 135 color:#999; 136 } 137 p.styleclass { 138 font-style: italic; 139 } 140 .grammar .typelink , p .typelink , td .typelink{ 141 font-family:"Lucida Console", Monaco, monospace; 142 font-size: 14px; 143 color:#039; 144 } 145 td.value .typelink { 146 font-family:"Lucida Console", Monaco, monospace; 147 font-size: 10px; 148 color:#039; 149 } 150 151 /* Oracle FX style */ 152 .fx-code-header { 153 background: #ffffff; 154 background-image:url(fx_code_header.jpg); 155 height: 50px; 156 width: 656px; 157 } 158 159 /* Oracle FX style */ 160 .version { 161 font-family:Verdana, Arial, Helvetica, sans-serif; 162 font-size:10px; 163 padding-top:2px; 164 color:#265F7F; 165 line-height:1.2em; 166 position:relative; 167 left:425px; 168 top:10px; 169 width:200px; 170 text-align:right; 171 } 172 173 /* Color Table Styles */ 174 table.html4colortable {margin:auto; width:80%; border:none } 175 table.html4colortable TD {border:none; padding:0} 176 td .colorsquare { display:block;width:16px;height:16px;border:2px solid black } 177 </style> 178 </head> 179 <body> 180 <div class="fx-code-header"> 181 <div class="version"><br> 182 Release: JavaFX 9</div> 183 </div> 184 <h1>JavaFX CSS Reference Guide</h1> 185 <h2>Contents</h2> 186 <ul class="contents"> 187 <li><a href="#intro">Introduction</a> 188 <ul> 189 <li><a href="#introscenegraph">CSS and the JavaFX Scene Graph</a></li> 190 <li><a href="#introstylesheets">Scene, Parent and SubScene Stylesheets</a></li> 191 <li><a href="#intronaming">Naming Conventions</a></li> 192 <li><a href="#intropublicapi">CSS Public API</a></li> 193 <li><a href="#introinheritance">Inheritance</a></li> 194 <li><a href="#introatrules">@ Rules</a></li> 195 <li><a href="#introexamples">Examples</a></li> 196 <li><a href="#introparserwarnings">Understanding Parser Warnings</a></li> 197 <li><a href="#introlimitations">Limitations</a></li> 198 </ul> 199 </li> 200 <li><a href="#types">Types</a> 201 <ul> 202 <li><a href="#typeinherit">inherit</a></li> 203 <li><a href="#typeboolean"><boolean></a></li> 204 <li><a href="#typestring"><string></a></li> 205 <li><a href="#typenumber"><number> & <integer></a> </li> 206 <li><a href="#typesize"><size></a></li> 207 <li><a href="#typelength"><length></a></li> 208 <li><a href="#typepercentage"><percentage></a></li> 209 <li><a href="#typeangle"><angle></a></li> 210 <li><a href="#typeduration"><duration></a></li> 211 <li><a href="#typepoint"><point></a></li> 212 <li><a href="#typecolorstop"><color-stop></a></li> 213 <li><a href="#typeurl"><uri></a></li> 214 <li><a href="#typeeffect"><effect></a></li> 215 <li><a href="#typefont"><font></a></li> 216 <li><a href="#typepaint"><paint></a></li> 217 <li><a href="#typecolor"><color></a></li> 218 </ul> 219 </li> 220 <li><a href="#stage">Stage</a> 221 <ul> 222 <li>javafx.stage 223 <ul> 224 <li><a href="#popupwindow">PopupWindow</a></li> 225 </ul> 226 </li> 227 </ul> 228 </li> 229 <li><a href="#nodes">Nodes</a> 230 <ul> 231 <li>javafx.scene 232 <ul> 233 <li><a href="#group">Group</a></li> 234 <li><a href="#node">Node</a></li> 235 <li><a href="#parent">Parent</a></li> 236 <li><a href="#scene">Scene</a></li> 237 </ul> 238 </li> 239 </ul> 240 <ul> 241 <li>javafx.scene.image 242 <ul> 243 <li><a href="#imageview">ImageView</a></li> 244 </ul> 245 </li> 246 </ul> 247 <ul> 248 <li>javafx.scene.layout 249 <ul> 250 <li><a href="#anchorpane">AnchorPane</a></li> 251 <li><a href="#border">BorderPane</a></li> 252 <li><a href="#dialogpane">DialogPane</a></li> 253 <li><a href="#flowpane">FlowPane</a></li> 254 <li><a href="#gridpane">GridPane</a></li> 255 <li><a href="#hbox">HBox</a></li> 256 <li><a href="#pane">Pane</a></li> 257 <li><a href="#region">Region</a></li> 258 <li><a href="#stackpane">StackPane</a></li> 259 <li><a href="#tilepane">TilePane</a></li> 260 <li><a href="#vbox">VBox</a></li> 261 </ul> 262 </li> 263 </ul> 264 <ul> 265 <li>javafx.scene.media 266 <ul> 267 <li><a href="#mediaview">MediaView</a></li> 268 </ul> 269 </li> 270 </ul> 271 <ul> 272 <li>javafx.scene.shape 273 <ul> 274 <li><a href="#shape">Shape</a></li> 275 <li><a href="#arc">Arc</a></li> 276 <li><a href="#circle">Circle</a></li> 277 <li><a href="#cubiccurve">CubicCurve</a></li> 278 <li><a href="#ellipse">Ellipse</a></li> 279 <li><a href="#line">Line</a></li> 280 <li><a href="#path">Path</a></li> 281 <li><a href="#polygon">Polygon</a></li> 282 <li><a href="#quadcurve">QuadCurve</a></li> 283 <li><a href="#rectangle">Rectangle</a></li> 284 <li><a href="#svgpath">SVGPath</a></li> 285 </ul> 286 </li> 287 </ul> 288 <ul> 289 <li>javafx.scene.text 290 <ul> 291 <li><a href="#text">Text</a></li> 292 </ul> 293 </li> 294 </ul> 295 <ul> 296 <li>javafx.scene.web 297 <ul> 298 <li><a href="#webview">WebView</a></li> 299 </ul> 300 </li> 301 </ul> 302 </li> 303 <li><a href="#controls">Controls</a> 304 <ul> 305 <li>javafx.scene.control 306 <ul> 307 <li><a href="#accordion">Accordion</a></li> 308 <li><a href="#button">Button</a></li> 309 <li><a href="#buttonbase">ButtonBase</a></li> 310 <li><a href="#cell">Cell</a></li> 311 <li><a href="#checkbox">CheckBox</a></li> 312 <li><a href="#checkmenuitem">CheckMenuItem</a></li> 313 <li><a href="#choicebox">ChoiceBox</a></li> 314 <li><a href="#colorpicker">ColorPicker</a></li> 315 <li><a href="#combobox">ComboBox</a></li> 316 <li><a href="#contextmenu">ContextMenu</a></li> 317 <li><a href="#control">Control</a></li> 318 <li><a href="#datepicker">DatePicker</a></li> 319 <li><a href="#htmleditor">HTMLEditor</a></li> 320 <li><a href="#hyperlink">Hyperlink</a></li> 321 <li><a href="#indexedcell">IndexedCell</a></li> 322 <li><a href="#label">Label</a></li> 323 <li><a href="#labeled">Labeled</a></li> 324 <li><a href="#listcell">ListCell</a></li> 325 <li><a href="#listview">ListView</a></li> 326 <li><a href="#menu">Menu</a></li> 327 <li><a href="#menubar">MenuBar</a></li> 328 <li><a href="#menubutton">MenuButton</a></li> 329 <li><a href="#menuitem">MenuItem</a></li> 330 <li><a href="#menuitembase">MenuItemBase</a></li> 331 <li><a href="#pagination">Pagination</a></li> 332 <li><a href="#passwordfield">PasswordField</a></li> 333 <li><a href="#progressbar">ProgressBar</a></li> 334 <li><a href="#progressindicator">ProgressIndicator</a></li> 335 <li><a href="#radiobutton">RadioButton</a></li> 336 <li><a href="#radiomenuitem">RadioMenuItem</a></li> 337 <li><a href="#scrollbar">ScrollBar</a></li> 338 <li><a href="#scrollpane">ScrollPane</a></li> 339 <li><a href="#separator">Separator</a></li> 340 <li><a href="#spinner">Spinner</a></li> 341 <li><a href="#slider">Slider</a></li> 342 <li><a href="#splitmenubutton">SplitMenuButton</a></li> 343 <li><a href="#splitpane">SplitPane</a></li> 344 <li><a href="#tabpane">TabPane</a></li> 345 <li><a href="#tablecolumnheader">TableColumnHeader</a></li> 346 <li><a href="#tableview">TableView</a></li> 347 <li><a href="#text-area">TextArea</a></li> 348 <li><a href="#textinputcontrol">TextInputControl</a></li> 349 <li><a href="#textfield">TextField</a></li> 350 <li><a href="#titledpane">TitledPane</a></li> 351 <li><a href="#togglebutton">ToggleButton</a></li> 352 <li><a href="#toolbar">ToolBar</a></li> 353 <li><a href="#tooltip">Tooltip</a></li> 354 <li><a href="#treecell">TreeCell</a></li> 355 <li><a href="#treetablecell">TreeTableCell</a></li> 356 <li><a href="#treetableview">TreeTableView</a></li> 357 <li><a href="#treeview">TreeView</a></li> 358 <li><a href="#webview">WebView</a></li> 359 </ul> 360 </li> 361 </ul> 362 </li> 363 <li><a href="#charts">Charts</a> 364 <ul> 365 <li> javafx.scene.chart 366 <ul> 367 <li><a href="#areachart">AreaChart</a> </li> 368 <li><a href="#axis">Axis</a> </li> 369 <li><a href="#barchart">BarChart</a> </li> 370 <li><a href="#bubblechart">BubbleChart</a> </li> 371 <li><a href="#categoryaxis">CategoryAxis</a> </li> 372 <li><a href="#chart">Chart</a> </li> 373 <li><a href="#legend">Legend</a> </li> 374 <li><a href="#linechart">LineChart</a> </li> 375 <li><a href="#numberaxis">NumberAxis</a> </li> 376 <li><a href="#piechart">PieChart</a> </li> 377 <li><a href="#scatterchart">ScatterChart</a> </li> 378 <li><a href="#valueaxis">ValueAxis</a> </li> 379 <li><a href="#xychart">XYChart</a> </li> 380 </ul> 381 </li> 382 </ul> 383 </li> 384 <li><a href="#references">References</a></li> 385 </ul> 386 <h2><a name="intro" id="intro">Introduction</a></h2> 387 <p> 388 Never has styling a Java UI been easier than with JavaFX and Cascading Style Sheets (CSS). Going from one 389 theme to another, or customizing the look of just one control, can all be done through CSS. To the novice, 390 this may be unfamiliar territory; but the learning curve is not that great. Give CSS styling a try and the 391 benefits will soon be apparent. You can also split the design and development workflow, or defer design 392 until later in the project. Up to the last minute changes, and even post-deployment changes, in the UI's 393 look can be achieved through JavaFX CSS. 394 </p> 395 <p> 396 The structure of this document is as follows. First, there is a 397 description of all value types for JavaFX CSS properties.Where 398 appropriate, this includes a grammar for the syntax of values of that 399 type. Then, for each scene‑graph node that supports CSS styles, a table is 400 given that lists the properties that are supported, along with type and 401 semantic information. The pseudo‑classes for each class are also given. 402 The description of CSS properties continues for the controls. For each 403 control, the substructure of that control's skin is given, along with the 404 style‑class names for the Region objects that implement that substructure. 405 </p> 406 <h3><a name="introscenegraph" id="introscenegraph">CSS and the JavaFX Scene Graph</a></h3> 407 <p> 408 JavaFX Cascading Style Sheets (CSS) is based on the W3C CSS version 2.1 <a href="#references">[1]</a> 409 with some additions from current work on version 3 <a href="#references">[2]</a>. 410 JavaFX CSS also has some extensions to CSS in support of specific JavaFX 411 features. The goal for JavaFX CSS is to allow web developers already 412 familiar with CSS for HTML to use CSS to customize and develop themes for 413 JavaFX controls and scene‑graph objects in a natural way. 414 </p> 415 <p> 416 JavaFX has a rich set of extensions to CSS in support of features such as 417 color derivation, property lookup, and multiple background colors and 418 borders for a single node. These features add significant new power for 419 developers and designers and are described in detail in this document. 420 </p> 421 422 <p> 423 To the extent possible, JavaFX CSS follows the W3C standards; however, with few exceptions, JavaFX 424 property names have been prefixed with a vendor extension of "-fx-". Even if these properties seem to be 425 compatible with standard HTML CSS, JavaFX CSS processing assumes that the property values 426 make use of JavaFX CSS extensions. 427 </p> 428 429 <p>CSS styles are applied to nodes in the JavaFX scene‑graph in a way 430 similar to the way CSS styles are applied to elements in the HTML DOM. 431 Styles are first applied to the parent, then to its children. The code is 432 written such that only those branches of the scene‑graph that might need 433 CSS reapplied are visited. A node is styled after it is added to the scene 434 graph. Styles are reapplied when there is a change to the node's 435 pseudo‑class state, style‑class, id, inline style, or parent, or stylesheets 436 are added to or removed from the scene. Note that the Node must be in the 437 scene‑graph for CSS to be applied. The Node does not have 438 to be shown, but must have a non‑null value for its sceneProperty. See 439 <a href="../../../javafx/scene/Node.html#applyCss--">applyCss</a> for more details.</p> 440 441 <p> 442 During a normal scene‑graph pulse, CSS styles are applied before the scene‑graph is 443 laid out and painted. Styles for events that trigger a pseudo‑class state change, 444 such as MouseEvent.MOUSE_ENTERED which triggers the "hover" state, are 445 applied on the next pulse following the event. 446 </p> 447 <p> 448 <a href="http://www.w3.org/TR/css3-selectors/">CSS selectors</a> are used to match styles to scene‑graph 449 nodes. 450 The relationship of a Node to a CSS selector is as follows: 451 <ul> 452 <li> 453 Node's <a href="../../../javafx/scene/Node.html#getTypeSelector--">getTypeSelector</a> method returns a 454 String which is analogous to a CSS <a href="http://www.w3.org/TR/css3-selectors/#type-selectors">Type 455 Selector</a>. 456 By default, this method returns the simple name of the class. Note that the simple name of an inner class 457 or of an anonymous class may not be usable as a type selector. In such a case, this method should be 458 overridden to return 459 a meaningful value. 460 </li> 461 <li> 462 Each node in the scene‑graph has a <a href="../../../javafx/scene/Node.html#getStyleClass--">styleClass 463 property</a>. 464 Note that a node may have more than one style‑class. 465 A Node's styleClass is analogous to the class="..." attribute that can 466 appear on HTML elements. See <a href="http://www.w3.org/TR/css3-selectors/#class-html">Class Selectors</a>. 467 </li> 468 <li> 469 Each node in the scene‑graph has an <strong>id</strong> variable, a 470 string. This is analogous to the id="..." attribute that can appear HTML 471 elements. See <a href="http://www.w3.org/TR/css3-selectors/#id-selectors">ID Selectors</a>. 472 </li> 473 </ul> 474 <p> 475 JavaFX CSS also supports pseudo‑classes, but does not implement the full range of pseudo‑classes as 476 specified in <a href="http://www.w3.org/TR/css3-selectors/#pseudo-classes">Pseudo‑classes</a>. The pseudo‑classes 477 supported by each Node type are given in the tables within this reference. Note that JavaFX does not currently 478 support structural pseudo‑classes. 479 </p> 480 <p> 481 Each node honors a set of properties that depends on the node's JavaFX 482 class (as distinct from its styleClass). The properties honored by each 483 node class are shown in detail in tables later in this document. The 484 property value that is actually applied depends on the precedence of the 485 origin of the rule, as described above, as well as the specificity of the 486 rule's selector as described in CSS 2 <a href="cssref.html#references">[1]</a> 487 . Ultimately, a property value string is converted into a JavaFX value of 488 the appropriate type and is then assigned to an instance variable of the 489 JavaFX object. 490 </p> 491 <h3><a name="introstylesheets" id="introstylesheets">Scene, Parent and SubScene Stylesheets</a></h3> 492 <p> 493 CSS styles can come from style sheets or inline styles. Style sheets are 494 loaded from the URLs specified in the 495 <a href="../../../javafx/scene/Scene.html#getStylesheets--">getStylesheets</a> 496 property of the Scene object. If the scene‑graph contains a Control, a 497 default user agent style sheet is loaded. Inline styles are specified via 498 the Node <span style="font-weight: bold;">setStyle</span> API. Inline 499 styles are analogous to the style="..." attribute of an HTML element. 500 Styles loaded from a Scene's style sheets take precedence over selectors from 501 the user agent style sheet. Inline styles take precedence over 502 styles originating elsewhere. The precedence order of style selectors can be 503 modified using "!important" in a style declaration. 504 </p> 505 <p> 506 Beginning with JavaFX 2.1, the Parent class has a 507 <a href="../../../javafx/scene/Parent.html#getStylesheets--">getStylesheets</a> property, 508 allowing style sheets to be set on a container. This allows for one branch 509 of of the scene‑graph to have a distinct set of styles. Any instance of 510 Parent can have style sheets. A child will take its styles from its own 511 inline styles, the style sheets of all its ancestors, and any style sheets 512 from the Scene. 513 </p> 514 <p> 515 Beginning with JavaFX 8u20, the Scene class has a 516 <a href="../../../javafx/scene/Scene.html#getUserAgentStylesheet--">getUserAgentStylesheet</a> property, 517 allowing a user‑style sheet to be set on a Scene. This allows a Scene 518 to have a set of user‑agent styles distinct from the platform default. When a user‑agent 519 stylesheet is set on a Scene, the user‑agent styles are used instead of the styles from the 520 platform default user‑agent stylesheet. 521 </p> 522 <p> 523 Beginning with JavaFX 8u20, the SubScene class has a 524 <a href="../../../javafx/scene/SubScene.html#getUserAgentStylesheet--">getUserAgentStylesheet</a> property, 525 allowing a user‑style sheet to be set on a SubScene. This allows a SubScene 526 of the scene‑graph to have set of user‑agent styles distinct from the platform default 527 or from the Scene in which the SubScene is contained. When a user‑agent 528 stylesheet is set on a SubScene, the user‑agent styles are used instead of the styles from the 529 platform default user‑agent stylesheet or any user‑agent stylesheet set on the Scene. 530 </p> 531 <p>It is important to note that styles from a stylesheet added to a Scene or Parent, do not affect 532 a SubScene which is a child or descendent of the Scene or Parent. Unless a user‑agent has 533 been set on the SubScene, the SubScene will get styles 534 from the a Scene's user‑agent stylesheet or the platform user‑agent stylesheet.</p> 535 The implementation allows designers to style an application by using style 536 sheets to override property values set from code. For example, a call to <code>rectangle.setFill(Color.YELLOW)</code> 537 can be overridden by an inline‑style or a style from an author stylesheet. This has implications for 538 the cascade; particularly, when does a style from a style sheet override a 539 value set from code? The JavaFX CSS implementation applies the following 540 order of precedence: <cite>a style from a user agent style sheet has lower 541 priority than a value set from code, which has lower priority than a Scene 542 or Parent style sheet. Inline styles have highest precedence. Style sheets 543 from a Parent instance are considered to be more specific than those styles 544 from Scene style sheets.</cite> 545 <h3><a name="intronaming" id="introsnaming">Naming Conventions</a></h3> 546 <p>Naming conventions have been established for deriving CSS style‑class 547 names from JavaFX class names, and for deriving CSS property names from 548 JavaFX variable names. Note that this is only a naming convention; there 549 is no automatic name conversion. Most JavaFX names use "camel case," that 550 is, mixed case names formed from compound words, where the initial letter 551 of each sub-word is capitalized. Most CSS names in the HTML world are all 552 lower case, with compound words separated by hyphens. The convention is 553 therefore to take JavaFX class names and form their corresponding CSS 554 style‑class name by separating the compound words with hyphens and 555 convering the letters to all lower case. For example, the JavaFX 556 ToggleButton class would have a style‑class of "toggle-button". The 557 convention for mapping JavaFX variable names to CSS property names is 558 similar, with the addition of the "-fx-" prefix. For example, the 559 blendMode variable would have a corresponding CSS property name of 560 "-fx-blend-mode". </p> 561 <h3><a name="intropublicapi" id="intropublicapi">CSS Public API</a></h3> 562 Beginning with JavaFX 8, public API is available for developers to create styleable properties and manage 563 pseudo-class state. Refer to <a href="../../../javafx/css/package-summary.html">javafx.css</a> for details. 564 <h3><a name="introinheritance" id="introinheritance">Inheritance</a></h3> 565 <p>CSS also provides for certain properties to be inherited by default, or 566 to be inherited if the property value is 'inherit'. If a value is 567 inherited, it is inherited from the computed value of the element's parent 568 in the document tree. In JavaFX, inheritance is similar, except that 569 instead of elements in the document tree, inheritance occurs from parent 570 nodes in the scene‑graph. </p> 571 <p>The following properties inherit by default. Any property can be made to 572 inherit by giving it the value <a href="#typeinherit" class="typelink">"inherit"</a>.</p> 573 <table summary="property table" style="width: 100%;" border="1"> 574 <caption><br> 575 </caption> <colgroup><col> <col> <col> <col> </colgroup> 576 <tbody> 577 <tr> 578 <th>Class</th> 579 <th>Property</th> 580 <th>CSS Property</th> 581 <th>Initial Value</th> 582 </tr> 583 <tr> 584 <td>javafx.scene.Node</td> 585 <td>cursor</td> 586 <td>-fx-cursor</td> 587 <td>javafx.scene.Cursor.DEFAULT</td> 588 </tr> 589 <tr> 590 <td>javafx.scene.text.Text</td> 591 <td>textAlignment</td> 592 <td>-fx-text-alignment</td> 593 <td>javafx.scene.text.TextAlignment.LEFT</td> 594 </tr> 595 <tr> 596 <td>javafx.scene.text.Font</td> 597 <td>font</td> 598 <td>-fx-font, -fx-font-family, -fx-font-size, -fx-font-weight, -fx-font-style</td> 599 <td>Font.DEFAULT (12px system)</td> 600 </tr> 601 </tbody> 602 </table> 603 <p>Within the hierarchy of JavaFX classes (for example, Rectangle is a 604 subclass of Shape, which in turn is a subclass of Node), the CSS 605 properties of an ancestor are also CSS properties of the descendant. This 606 means that a subclass will respond to the same set of properties as its 607 ancestor classes, and to additional properties it defines itself. So, a 608 Shape supports all the properties of Node plus several more, and Rectangle 609 supports all the properties of Shape plus a couple more. However, because 610 using a JavaFX class name as a type selector is an exact match, providing 611 style declarations for a Shape will not cause a Rectangle to use those 612 values (unless the .css value for the Rectangle's property is "inherit").</p> 613 <p>For font inheritance, the CSS engine looks <span style="font-style:italic;">only</span> for the styles in the table above. When 614 looking for a font to inherit, the search 615 terminates at any node that has a Font property that was set by the user. The user-set font is 616 inherited provided there is not an author or an inline-style that applies specifically to that node. 617 In this case, the inherited font is created from the user-set font and any parts of the applicable 618 author or in-line style. 619 <h3><a name="introatrules" id="introatrules">@ Rules</a></h3> 620 <p> 621 Beginning with JavaFX 8u20, the CSS 622 <a href="http://www.w3.org/TR/CSS21/cascade.html#at-import">@import</a> is also partially supported. 623 Only unconditional import is supported. In other words, the media‑type qualifier is not supported. 624 Also, the JavaFX CSS parser is non-compliant with regard to where an @import may appear within a stylesheet 625 (see <a href="http://www.w3.org/TR/CSS21/syndata.html#at-rules">At‑rules</a>). 626 Users are cautioned that this will be fixed in a future release. Adherence to the W3C standard is strongly advised. 627 </p> 628 <p>Since JavaFX 8, the implementation partially supports the CSS3 syntax to load a font from a URL using the 629 <a href="http://www.w3.org/TR/css3-fonts/#the-font-face-rule">@font‑face</a> rule:</p> 630 <textarea rows="8" cols="132"> 631 632 @font-face { 633 font-family: 'sample'; 634 font-style: normal; 635 font-weight: normal; 636 src: local('sample'), url('http://font.samples/resources/sample.ttf';) format('truetype'); 637 } 638 </textarea> 639 <p>This allows public resources for fonts to be used in a JavaFX application. For example, assume the URL 640 "http://font.samples/web?family=samples" returns the @font‑face rule given above. Then the 641 following code shows how the sample font could be used in a JavaFX application.</p> 642 <textarea rows="20" cols="132"> 643 644 import javafx.application.Application; 645 import javafx.scene.Scene; 646 import javafx.scene.control.Label; 647 import javafx.stage.Stage; 648 649 public class HelloFontFace extends Application { 650 @Override public void start(Stage primaryStage) { 651 Label label = new Label("Hello @FontFace"); 652 label.setStyle("-fx-font-family: sample; -fx-font-size: 80;"); 653 Scene scene = new Scene(label); 654 scene.getStylesheets().add("http://font.samples/web?family=samples"); 655 primaryStage.setTitle("Hello @FontFace"); 656 primaryStage.setScene(scene); 657 primaryStage.show(); 658 } 659 660 public static void main(String[] args) { launch(args); } 661 } 662 </textarea> 663 <p>Or, the URL could be imported into a stylesheet with the @import rule.</p> 664 <p>Although the parser will parse the syntax, all @font‑face descriptors are ignored except for 665 the <code>src</code> descriptor. The <code>src</code> descriptor is expected to be a 666 <a href="#typeurl" class="typelink"><url></a>. The <code>format</code> hint is ignored.</p> 667 <h3><a name="introexamples" id="introexamples">Examples</a></h3> 668 <p>Consider the following simple JavaFX application: </p> 669 <p class="example">Scene scene = new Scene(new Group()); <br> 670 scene.getStylesheets().add(“test.css”); <br> 671 Rectangle rect = new Rectangle(100,100); <br> 672 rect.setLayoutX(50); <br> 673 rect.setLayoutY(50); <br> 674 rect.getStyleClass().add("my-rect"); <br> 675 ((Group)scene.getRoot()).getChildren().add(rect); </p> 676 <p>Without any styles, this will display a plain black rectangle. If 677 test.css contains the following: </p> 678 <p class="example">.my-rect { -fx-fill: red; }</p> 679 <p>the rectangle will be red instead of black: </p> 680 <p><img src="cssexample1.png" alt="A rectangle with red fill"></p> 681 <p>If test.css contains the following: </p> 682 <p class="example">.my-rect {<br> 683 -fx-fill: yellow;<br> 684 -fx-stroke: green;<br> 685 -fx-stroke-width: 5;<br> 686 -fx-stroke-dash-array: 12 2 4 2;<br> 687 -fx-stroke-dash-offset: 6;<br> 688 -fx-stroke-line-cap: butt;<br> 689 }<br> 690 </p> 691 <p>the result will be a yellow rectangle with a nicely dashed green border: 692 </p> 693 <p><img src="cssexample2.png" alt="A rectangle with yellow fill and a green, dashed border"></p> 694 <h3><a name="introparserwarnings" id="introparserwarnings">Understanding 695 Parser Warnings</a></h3> 696 <p>When the JavaFX CSS parser encounters a syntax error, a warning message 697 is emitted which conveys as much information as is available to help 698 resolve the error. For example </p> 699 <p class="example"> WARNING: javafx.css.CssParser declaration 700 Expected '<percent>' while parsing '-fx-background-color' at ?[1,49] 701 </p> 702 <p>The cryptic '<span class="p example">?[1,49]</span>' pertains to the 703 location of the error. The format of the location string is </p> 704 <p class="grammar"><url>[line, position]</p> 705 <p>If the error is found while parsing a file, the file URL will be given. 706 If the error is from an inline style (as in the example above), the URL is 707 given as a question mark. The line and position give an offset into the 708 file or string where the token begins. <em>Please note that the line and 709 position may not be accurate in releases prior to JavaFX 2.2.</em><br> 710 </p> 711 <p>Applications needing to detect errors from the parser can add a listener 712 to the errors property of javafx.css.CssParser. <br> 713 </p> 714 <h3><a name="introlimitations" id="introlimitations">Limitations</a></h3> 715 <ol> 716 <li> While the JavaFX CSS parser will parse valid CSS syntax, it is not a 717 fully compliant CSS parser. One should not expect the parser to handle 718 syntax not specified in this document.</li> 719 <li>With the exception of @font‑face and @import, @-keyword statements are ignored.</li> 720 <li>The <media-query-list> of the @import statement is not parsed.</li> 721 <li>The structural pseudo‑classes are not supported. </li> 722 <li>The ":active" and ":focus" dynamic pseudo‑classes are not supported. 723 However, <a href="#node">Nodes</a> do support the ":pressed" and 724 ":focused" pseudo‑classes, which are similar. </li> 725 <li>The ":link" and ":visited" pseudo‑classes are not supported in general. 726 However, <a href="#hyperlink">Hyperlink</a> objects can be styled, and 727 they support the ":visited" pseudo‑class. </li> 728 <li>JavaFX CSS does not support comma-separated series of font family names 729 in the -fx-font-family property. The optional line height parameter when 730 specifying fonts is not supported. There is no equivalent for the 731 font-variant property.</li> 732 <li>JavaFX CSS uses the HSB color model instead of the HSL color model. </li> 733 <li>If a property of a node is initialized by calling the set method of the 734 property, the CSS implementation will see this as a user set value and the 735 value will not be overwritten by a style from a user agent style 736 sheet.</li> 737 <li>When parsing a <a href="http://www.w3.org/TR/CSS2/syndata.html#uri">URI</a>, 738 the parser doesn't handle URI escapes nor \<hex-digit>[1,6] code points.</li> 739 </ol> 740 <h2><a name="types" id="types">Types</a></h2> 741 <h3><a name="typeinherit" id="typeinherit">inherit</a></h3> 742 <p>Each property has a type, which determines what kind of value and the 743 syntax for specifying those values. In addition, each property may have a 744 specified value of 'inherit', which means that, for a given node, the 745 property takes the same computed value as the property for the node's 746 parent. The 'inherit' value can be used on properties that are not 747 normally inherited. 748 </p> 749 <p>If the 'inherit' value is set on the root element, the property is 750 assigned its initial value.</p> 751 <h3><a name="typeboolean" id="typeboolean"><boolean></a></h3> 752 <p>Boolean values can either have the string value of "true" or "false", the 753 values are case insensitive as all CSS is case insensitive.</p> 754 <h3><a name="typestring" id="typestring"><string></a></h3> 755 <p>Strings can either be written with double quotes or with single quotes. 756 Double quotes cannot occur inside double quotes, unless escaped (e.g., as 757 '\"' or as '\22'). Analogously for single quotes (e.g., "\'" or "\27").</p> 758 <p class="example">"this is a 'string'"<br> 759 "this is a \"string\""<br> 760 'this is a "string"'<br> 761 'this is a \'string\''</p> 762 <p>A string cannot directly contain a newline. To include a newline in a 763 string, use an escape representing the line feed character in ISO-10646 764 (U+000A), such as "\A" or "\00000a". This character represents the generic 765 notion of "newline" in CSS. See the 'content' property for an example.</p> 766 <h3><a name="typenumber" id="typenumber"><number> & 767 <integer></a></h3> 768 <p>Some value types may have integer values (denoted by <integer>) or 769 real number values (denoted by <number>). Real numbers and integers 770 are specified in decimal notation only. An <integer> consists of one 771 or more digits "0" to "9". A <number> can either be an 772 <integer>, or it can be zero or more digits followed by a dot (.) 773 followed by one or more digits. Both integers and real numbers may be 774 preceded by a "-" or "+" to indicate the sign. -0 is equivalent to 0 and 775 is not a negative number.</p> 776 <p class="grammar">[+|-]? [[0-9]+|[0-9]*"."[0-9]+]</p> 777 <p>Note that many properties that allow an integer or real number as a value 778 actually restrict the value to some range, often to a non-negative value.</p> 779 <h3><a name="typesize" id="typesize"><size></a></h3> 780 <p>A size is a <a href="#typenumber" class="typeref"><number></a> 781 with units of <a href="#typelength" class="typeref"><length></a> or 782 <a href="#typepercentage" class="typeref"><percentage></a>. If a unit 783 is not specified then 'px' is assumed.</p> 784 <h4><a name="typelength" id="typelength"><length></a></h4> 785 <p class="grammar"><a href="#typenumber"><number></a>[ px | mm | cm | 786 in | pt | pc | em | ex ]?</p> 787 <p>No whitespace is allowed between the number and units if provided. Some 788 units are relative and others absolute. </p> 789 <p><strong>Relative</strong></p> 790 <ul> 791 <li><strong>px</strong>: pixels, relative to the viewing device</li> 792 <li><strong>em</strong>: the 'font-size' of the relevant font</li> 793 <li><strong>ex</strong>: the 'x-height' of the relevant font</li> 794 </ul> 795 <p><strong>Absolute</strong></p> 796 <ul> 797 <li><strong>in</strong>: inches — 1 inch is equal to 2.54 798 centimeters.</li> 799 <li><strong>cm</strong>: centimeters</li> 800 <li><strong>mm</strong>: millimeters</li> 801 <li><strong>pt</strong>: points — the points used by CSS 2.1 are 802 equal to 1/72nd of an inch.</li> 803 <li><strong>pc</strong>: picas — 1 pica is equal to 12 points.</li> 804 </ul> 805 <h4><a name="typepercentage" id="typepercentage"><percentage></a></h4> 806 <p>These are a percentage of some length, typically to the width or height 807 of a node.</p> 808 <p class="grammar"><a href="#typenumber"><number></a>[ % ]</p> 809 <h3><a name="typeangle" id="typeangle"><angle></a></h3> 810 <p>An angle is a <a href="#typenumber" class="typeref"><number></a> 811 with one of the following units.</p> 812 <p> </p> 813 <p class="grammar"><a href="#typenumber"><number></a>[ deg | rad | 814 grad | turn ]</p> 815 <ul> 816 <li><strong>deg</strong>: angle in degrees — all other angle units are 817 converted to degrees.</li> 818 <li><strong>rad</strong>: angle in radians</li> 819 <li><strong>grad</strong>: angle in gradians</li> 820 <li><strong>turn</strong>: angle in turns</li> 821 </ul> 822 <h3><a name="typeduration" id="typeduration"><duration></a></h3> 823 <p>A duration is a <a href="#typenumber" class="typeref"><number></a> 824 with second or millisecond units, or the value <span class="grammar">indefinite</span>.</p> 825 <p> </p> 826 <p class="grammar">[<a href="#typenumber"><number></a>[ s | ms ]] | indefinite</p> 827 <ul> 828 <li><strong>s</strong>: duration in seconds</li> 829 <li><strong>ms</strong>: duration in milliseconds. One second is 1000 milliseconds.</li> 830 <li><strong>indefinite</strong>: See <a href="../../util/Duration.html#INDEFINITE" class="typelink">Duration.INDEFINITE</a></li> 831 </ul> 832 <p>See also <a href="http://www.w3.org/TR/css3-values/#time" class="typelink">W3C time units</a>.</p> 833 <h3><a name="typepoint" id="typepoint"><point></a></h3> 834 <p>A point is an {x,y} coordinate.</p> 835 <p class="grammar">[ [ <length> <length> ] | [ 836 <percentage> | <percentage> ] ]</p> 837 <h3><a name="typecolorstop" id="typecolorstop"><color-stop></a></h3> 838 <p>Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax." 839 class="typelink">W3C 840 color-stop syntax</a>.</p> 841 <p class="grammar">[ <a href="#typecolor" class="typeref"><color></a> 842 [ <a href="#typepercentage" class="typeref"><percentage></a> | <a 843 href="#typelength" 844 class="typeref"><length></a>]? 845 ]</p> 846 <p>In a series of <color-stop>, stop distance values must all be 847 <percentage> or <length>. Furthermore, if <length> 848 values are used, then the distance value for first and last stop in the 849 series must be specified. This restriction may be removed in a future 850 release.</p> 851 <p>"<span style="color: #009900; ">red, white 70%, blue</span>" is valid since the 852 distance for red and blue is assumed to be 0% and 100%, respectively.</p> 853 <p>"<span style="color: #009900; ">red 10, white, blue 90</span>" is valid. Because 854 distance for red and blue is 10 and 90, respectively, the distance for 855 white can be calculated.</p> 856 <p>"<span style="color: #009900; ">red, white 70, blue</span>" is <span style="font-style:italic;">not</span> valid 857 since distance units do not agree.</p> 858 <p>"<span style="color: #009900; ">red, white, blue</span>" is valid. The stops are 859 distributed evenly between 0% and 100%.</p> 860 <h3><a name="typeurl" id="typeurl"><uri></a></h3> 861 <p class="grammar">url ( [\"\']? <address> [\"\']? )</p> 862 <p><span class="grammar"><address></span> is a hierarchical URI of the form [scheme:][//authority][path] <a href="#references">(see [2])</a>. 863 For example:</p> 864 <p class="example"> 865 url(http://example.com/images/Duke.png)<br> 866 url(/com/example/javafx/app/images/Duke.png)<br> 867 </p> 868 <p>If the <span class="grammar"><address></span> does not have a [scheme:] component, the <span class="grammar"><address></span> 869 is considered to be the [path] component only. 870 A leading '/' character indicates that the [path] is relative to the 871 root of the classpath. If the the style appears in a stylesheet and 872 has no leading '/' character, the path is relative to the base URI of 873 the stylesheet. If the style appears in an inline style, the path is 874 relative to the root of the classpath (regardless of whether or not 875 there is a leading '/'). 876 </p> 877 <table class="csspropertytable" cellspacing="3" cellpadding="4"> 878 <caption>Examples of Resolving URLs in Stylesheets</caption> 879 <tr> 880 <th>Stylesheet URL</th><th>URL in Style</th><th>Resolves to</th> 881 </tr> 882 <tr> 883 <td>file:///some/path/build/classes/com/mycompany/myapp/mystyles.css</td> 884 <td>url(images/Duke.png)</td> 885 <td>file:///some/path/build/classes/com/mycompany/myapp/images/Duke.png</td> 886 </tr> 887 <tr> 888 <td>file:///some/path/build/classes/com/mycompany/myapp/mystyles.css</td> 889 <td>url(../images/Duke.png)</td> 890 <td>file:///some/path/build/classes/com/mycompany/images/Duke.png</td> 891 </tr> 892 <tr> 893 <td>jar:file:/some/path/build/myapp.jar!/com/mycompany/myapp/mystyles.css</td> 894 <td>url(images/Duke.png)</td> 895 <td>jar:file:/some/path/build/myapp.jar!/com/mycompany/myapp/images/Duke.png</td> 896 </tr> 897 </table> 898 <p></p> 899 <table class="csspropertytable" cellspacing="3" cellpadding="4"> 900 <caption>Examples of Resolving URLs in Inline Styles</caption> 901 <tr> 902 <th>Classpath</th><th>URL in Style</th><th>Resolved URL</th> 903 </tr> 904 <tr> 905 <td>file:///some/path/build/classes</td> 906 <td>url(/com/mycompany/resources/images/Duke.png)</td> 907 <td>file:///some/path/build/classes/com/mycompany/resources/images/Duke.png</td> 908 </tr> 909 <tr> 910 <td>file:///some/path/build/myapp.jar</td> 911 <td>url(/com/mycompany/resources/images/Duke.png)</td> 912 <td>jar:file:/some/path/build/myapp.jar!/com/mycompany/resources/images/Duke.png</td> 913 </tr> 914 </table> 915 <p>Note that for inline styles, leading dot-segments (e.g. '..' or '.') do resolve since the path is always 916 anchored at the root of the classpath.</p> 917 <p>This snippet of code creates a scene filled with the "paste" image from HTMLEditor which is found in jfxrt.jar.</p> 918 <textarea rows="9" cols="132"> 919 920 @Override public void start(Stage stage) { 921 StackPane root = new StackPane(); 922 root.setStyle("-fx-background-image: url(/com/sun/javafx/scene/control/skin/modena/HTMLEditor-Paste.png);"); 923 Scene scene = new Scene(root, 300, 250); 924 stage.setScene(scene); 925 stage.show(); 926 } 927 </textarea> 928 <p>The same style would work equally as well from a stylesheet.</p> 929 <h3><a name="typeeffect" id="typeeffect"><effect></a></h3> 930 <p>JavaFX CSS currently supports the DropShadow and InnerShadow effects from 931 the JavaFX platform. See the class documentation in javafx.scene.effect 932 for further details about the semantics of the various effect parameters.</p> 933 <h4>Drop Shadow</h4> 934 <p>A high-level effect that renders a shadow of the given content behind the 935 content.</p> 936 <p><span class="grammar">dropshadow( <blur-type> , <a href="#typecolor" 937 class="typelink"><color></a> 938 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber" 939 class="typelink"><number></a> 940 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber" 941 class="typelink"><number></a> 942 )</span></p> 943 <p style="margin-left: 40px;"><span class="grammar"><blur-type> = [ 944 gaussian | one-pass-box | three-pass-box | two-pass-box ]<br> 945 <a href="#typecolor" class="typelink"><color></a></span> The 946 shadow Color.<br> 947 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span> 948 The radius of the shadow blur kernel. In the range [0.0 ... 127.0], 949 typical value 10.<br> 950 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span> 951 The spread of the shadow. The spread is the portion of the radius where 952 the contribution of the source material will be 100%. The remaining 953 portion of the radius will have a contribution controlled by the blur 954 kernel. A spread of 0.0 will result in a distribution of the shadow 955 determined entirely by the blur algorithm. A spread of 1.0 will result in 956 a solid growth outward of the source material opacity to the limit of the 957 radius with a very sharp cutoff to transparency at the radius. Values 958 should be in the range [0.0 ... 1.0].<br> 959 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span> 960 The shadow offset in the x direction, in pixels. <br> 961 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span> 962 The shadow offset in the y direction, in pixels. </p> 963 <h4>Inner Shadow</h4> 964 <p>A high-level effect that renders a shadow inside the edges of the given 965 content.</p> 966 <p><span class="grammar">innershadow( <blur-type> , <a href="#typecolor" 967 class="typelink"><color></a> 968 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber" 969 class="typelink"><number></a> 970 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber" 971 class="typelink"><number></a> 972 )</span></p> 973 <p style="margin-left: 40px;"><span class="grammar"><blur-type> = [ 974 gaussian | one-pass-box | three-pass-box | two-pass-box ]<br> 975 </span><span class="grammar"><a href="#typecolor" class="typelink"><color></a></span> 976 The shadow Color.<br> 977 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span> 978 The radius of the shadow blur kernel. In the range [0.0 ... 127.0], 979 typical value 10.<br> 980 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span> 981 The choke of the shadow. The choke is the portion of the radius where the 982 contribution of the source material will be 100%. The remaining portion of 983 the radius will have a contribution controlled by the blur kernel. A choke 984 of 0.0 will result in a distribution of the shadow determined entirely by 985 the blur algorithm. A choke of 1.0 will result in a solid growth inward of 986 the shadow from the edges to the limit of the radius with a very sharp 987 cutoff to transparency inside the radius. Values should be in the range 988 [0.0 ... 1.0].<br> 989 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span> 990 The shadow offset in the x direction, in pixels. <br> 991 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span> 992 The shadow offset in the y direction, in pixels. </p> 993 <h3><a name="typefont" id="typefont"><font></a></h3> 994 <p>JavaFX CSS supports the ability to specify fonts using separate family, 995 size, style, and weight properties, as well as the ability to specify a 996 font using a single shorthand property. There are four value types related 997 to fonts plus a shorthand property that encompasses all four properties. 998 The font-related types are as follows. </p> 999 <p><span class="grammar"><font-family></span>The string name of the 1000 font family. An actual font family name available on the system can be 1001 used, or one of the following generic family names can be used:</p> 1002 <ul> 1003 <li>'serif' (e.g., Times)</li> 1004 <li>'sans-serif' (e.g., Helvetica)</li> 1005 <li>'cursive' (e.g., Zapf-Chancery)</li> 1006 <li>'fantasy' (e.g., Western)</li> 1007 <li>'monospace' (e.g., Courier)</li> 1008 </ul> 1009 <p><span class="grammar"><font-size></span> The size of the font, 1010 using the <span class="grammar"><size></span> syntax.</p> 1011 <p><span class="grammar"><font-style></span> The font's style, using 1012 the following syntax:<br> 1013 <span class="grammar">[ normal | italic | oblique ]</span></p> 1014 <p><span class="grammar"><font-weight></span> The font's weight, using 1015 the following syntax:<br> 1016 <span class="grammar">[ normal | bold | bolder | lighter | 100 | 200 | 300 1017 | 400 | 500 | 600 | 700 | 800 | 900 ]</span></p> 1018 <p><span class="grammar"><font></span> This font shorthand property 1019 can be used in place of the above properties. It uses the following 1020 syntax:<br> 1021 <span class="grammar">[[ <font-style> || <font-weight> ]? 1022 <font-size> <font-family> ]</span></p> 1023 <h4><a name="fontprops" id="fontprops">Font Properties</a></h4> 1024 <p>Most classes that use text will support the following font properties. In 1025 some cases a similar set of properties will be supported but with a 1026 different prefix instead of "-fx-font".</p> 1027 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 1028 <thead> 1029 <tr> 1030 <th class="propertyname">CSS Property</th> 1031 <th class="value">Values</th> 1032 <th>Default</th> 1033 <th>Comments</th> 1034 </tr> 1035 </thead> 1036 <tbody> 1037 <tr> 1038 <td class="propertyname">-fx-font</td> 1039 <td class="value"><a href="#typefont" class="typelink"><font></a></td> 1040 <td>inherit</td> 1041 <td>shorthand property for font-size, font-family, font-weight and 1042 font-style</td> 1043 </tr> 1044 <tr> 1045 <td class="propertyname">-fx-font-family</td> 1046 <td class="value"><a href="#typefont" class="typelink"><font-family></a></td> 1047 <td>inherit</td> 1048 <td> </td> 1049 </tr> 1050 <tr> 1051 <td class="propertyname">-fx-font-size</td> 1052 <td class="value"><a href="#typefont" class="typelink"><font-size></a></td> 1053 <td>inherit</td> 1054 <td> </td> 1055 </tr> 1056 <tr> 1057 <td class="propertyname">-fx-font-style</td> 1058 <td class="value"><a href="#typefont" class="typelink"><font-style></a></td> 1059 <td>inherit</td> 1060 <td> </td> 1061 </tr> 1062 <tr> 1063 <td class="propertyname">-fx-font-weight</td> 1064 <td class="value"><a href="#typefont" class="typelink"><font-weight></a></td> 1065 <td>inherit</td> 1066 <td> </td> 1067 </tr> 1068 </tbody> 1069 </table> 1070 <h3><a name="typepaint" id="typepaint"><paint></a></h3> 1071 <p>Paint values can either be a solid color specified in one of the color 1072 syntaxes, they can be a linear or radial gradient, or an image-pattern.</p> 1073 <p class="grammar"><a href="#typecolor" class="typelink"><color></a> | 1074 <a href="#typelinear-gradient" class="typelink"><linear-gradient></a> | 1075 <a href="#typeradial-gradient" class="typelink"><radial-gradient></a> | 1076 <a href="#typeimage-pattern" class="typelink"><image-pattern></a> 1077 <a href="#typeimage-pattern" class="typelink"><repeating-image-pattern></a></p> 1078 <h4>Linear Gradients<span class="grammar" style="font-size: smaller;"> 1079 <a name="typelinear-gradient" id="typelinear-gradient"><linear-gradient></a> 1080 </span></h4> 1081 <p class="grammar">linear-gradient( [ [from <a href="#typepoint" class="typelink"><point></a> 1082 to <a href="#typepoint" class="typelink"><point></a>] | [ to 1083 <side-or-corner>], ]? [ [ repeat | reflect ], ]? <a href="#typecolorstop" 1084 class="typelink"><color-stop></a>[, 1085 <a href="#typecolorstop" class="typelink"><color-stop></a>]+) <br> 1086 <br> 1087 where <side-or-corner> = [left | right] || [top | bottom] </p> 1088 <p> </p> 1089 <p>Linear gradient creates a gradient going though all the stop colors along 1090 the line between the "from" <a href="#typepoint" class="typelink"><point></a> 1091 and the "to" <a href="#typepoint" class="typelink"><point></a>. If 1092 the points are percentages, then they are relative to the size of the area 1093 being filled. Percentage and length sizes can not be mixed in a single 1094 gradient function.</p> 1095 <p> If neither repeat nor reflect are given, then the CycleMethod defaults 1096 "NO_CYCLE".<br> 1097 If neither [from <point> to <point>] nor [ to 1098 <side-or-corner> ] are given, then the gradient direction defaults 1099 to 'to bottom'.<br> 1100 Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax." 1101 class="typelink">W3C 1102 color-stop syntax</a> and are normalized accordingly. </p> 1103 <p>This example will create a gradient from top left to bottom right of the 1104 filled area with red at the top left corner and black at the bottom right.</p> 1105 <p class="example">linear-gradient(to bottom right, red, black)</p> 1106 <p>This is equivalent to: </p> 1107 <p class="example">linear-gradient(from 0% 0% to 100% 100%, red 0%, black 1108 100%)</p> 1109 <p>This more complex example will create a 50px high bar at the top with a 3 1110 color gradient with white underneath for the rest of the filled area.</p> 1111 <p class="example">linear-gradient(from 0px 0px to 0px 50px, gray, darkgray 1112 50%, dimgray 99%, white)</p> 1113 <p><span style="color: #af0000; ">The following syntax for linear gradient does not 1114 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX 1115 2.0 CSS parser supports the syntax but this support may be removed in 1116 later releases.</span></p> 1117 <p class="grammar"><span style="color: #af0000; ">linear (<size>, <size>) 1118 to (<size>, <size>) stops [ (<number>,<color>) 1119 ]+ [ repeat | reflect ]?</span></p> 1120 <h4>Radial Gradients <span class="grammar" style="font-size: smaller;"> 1121 <a name="typeradial-gradient" id="typeradial-gradient"><radial-gradient></a> 1122 </span></h4> 1123 <p class="grammar">radial-gradient([ focus-angle <a href="#typeangle" class="typelink"><angle></a>, 1124 ]? [ focus-distance <a href="#typepercentage" class="typelink"><percentage></a>, 1125 ]? [ center <a href="#typepoint" class="typelink"><point></a>, ]? 1126 radius [ <a href="#typelength" class="typelink"><length></a> | <a 1127 href="#typepercentage" 1128 class="typelink"><percentage></a> 1129 ] [ [ repeat | reflect ], ]? <a href="#typecolorstop" class="typelink"><color-stop></a>[, 1130 <a href="#typecolorstop" class="typelink"><color-stop></a>]+) </p> 1131 <p>Radial gradient creates a gradient going though all the stop colors radiating outward from 1132 the <a href="#typepoint" class="typelink">center point</a> 1133 to the <a href="#typelength" class="typelink">radius</a>. If the center point is not given, 1134 the center defaults to (0,0). Percentage values are relative to the size of the area 1135 being filled. Percentage and length sizes can not be mixed in a single gradient function.</p> 1136 <p> If neither repeat nor reflect are given, then the CycleMethod defaults 1137 "NO_CYCLE".<br> 1138 Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax." 1139 class="typelink">W3C 1140 color-stop syntax</a> and are normalized accordingly. </p> 1141 <p>Following are examples of the use of radial-gradient:</p> 1142 <p class="example">radial-gradient(radius 100%, red, darkgray, black)</p> 1143 <p class="example">radial-gradient(focus-angle 45deg, focus-distance 20%, 1144 center 25% 25%, radius 50%, reflect, gray, darkgray 75%, dimgray)</p> 1145 <p><span style="color: #af0000; ">The following syntax for radial gradient does not 1146 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX 1147 2.0 CSS parser supports the syntax but this support may be removed in 1148 later releases.</span></p> 1149 <p class="grammar"><span style="color: #af0000; ">radial [focus-angle <number> 1150 | <number> ] ]? [ focus-distance <size> ]? [ center 1151 <size,size> ]? <size> stops [ ( <number>, 1152 <color> ) ]+ [ repeat | reflect ]?</span></p> 1153 <h4>Image Paint <span class="grammar" style="font-size: smaller;"> 1154 <a name="typeimage-pattern" id="typeimage-pattern"><image-pattern></a> 1155 </span></h4> 1156 <p class="grammar">image-pattern(<a href="#typestring" class="typelink"><string></a>, 1157 [<a href="#typesize" class="typelink"><size></a>, 1158 <a href="#typesize" class="typelink"><size></a>, 1159 <a href="#typesize" class="typelink"><size></a>, 1160 <a href="#typesize" class="typelink"><size></a>[, 1161 <a href="#typeboolean" class="typelink"><boolean></a>]?]?)</p> 1162 <p>The parameters, in order, are:<br> 1163 <p style="margin-left: 40px;"> 1164 <span class="grammar"><a href="#typestring" class="typelink"><string></a></span> 1165 The URL of the image.<br> 1166 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span> 1167 The <span style="font-style:italic;">x</span> origin of the anchor rectangle.<br> 1168 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span> 1169 The <span style="font-style: italic;">y</span> origin of the anchor rectangle.<br> 1170 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span> 1171 The width of the anchor rectangle.<br> 1172 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span> 1173 The height of the anchor rectangle.<br> 1174 <span class="grammar"><a href="#typeboolean" class="typelink"><boolean></a></span> 1175 The proportional flag which indicates whether start and end locations are proportional or absolute<br> 1176 </p> 1177 <p>For a full explanation of the parameters, refer to the 1178 <a href="../paint/ImagePattern.html" class="typelink">ImagePattern</a> javadoc.</p> 1179 <p>Following are examples of the use of image-pattern:</p> 1180 <p class="example">image-pattern("images/Duke.png")</p> 1181 <p class="example">image-pattern("images/Duke.png", 20%, 20%, 80%, 80%)</p> 1182 <p class="example">image-pattern("images/Duke.png", 20%, 20%, 80%, 80%, true)</p> 1183 <p class="example">image-pattern("images/Duke.png", 20, 20, 80, 80, false)</p> 1184 1185 <p>Related, there is the <code>repeating-image-pattern</code> function which is a shorthand 1186 for producing tiled image based fills. It is equivalent to 1187 <p class="example">image-pattern("images/Duke.png", 0, 0, imageWidth, imageHeight, false)</p> 1188 1189 <p class="grammar">repeating-image-pattern(<a href="#typestring" class="typelink"><string></a>)</p> 1190 <p>The only parameter is the uri of the image. Following is an example of the use of image-pattern:</p> 1191 <p class="example">repeating-image-pattern("com/mycompany/myapp/images/Duke.png")</p> 1192 1193 1194 1195 <h3><a name="typecolor" id="typecolor"><color></a></h3> 1196 <p class="grammar"><named-color> | <looked-up-color> | 1197 <rgb-color> | <hsb-color> | <color-function></p> 1198 <h4>Named Colors <span class="grammar" style="font-size: smaller;"><named-color></span></h4> 1199 <p>CSS supports a bunch of named constant colors. Named colors can be 1200 specified with just their unquoted name for example: </p> 1201 <p class="example">.button {<br> 1202 -fx-background-color: red;<br> 1203 }</p> 1204 <p>The named colors that are available in CSS are:</p> 1205 <table summary="property table" class="html4colortable"> 1206 <tbody> 1207 <tr> 1208 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aliceblue;"></span><br> 1209 </td> 1210 <td>aliceblue = #f0f8ff</td> 1211 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% antiquewhite;"></span><br> 1212 </td> 1213 <td>antiquewhite = #faebd7</td> 1214 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aqua;"></span><br> 1215 </td> 1216 <td>aqua = #00ffff</td> 1217 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aquamarine;"></span><br> 1218 </td> 1219 <td>aquamarine = #7fffd4</td> 1220 </tr> 1221 <tr> 1222 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% azure;"></span><br> 1223 </td> 1224 <td>azure = #f0ffff</td> 1225 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% beige;"></span><br> 1226 </td> 1227 <td>beige = #f5f5dc</td> 1228 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% bisque;"></span><br> 1229 </td> 1230 <td>bisque = #ffe4c4</td> 1231 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% black;"></span><br> 1232 </td> 1233 <td>black = #000000</td> 1234 </tr> 1235 <tr> 1236 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blanchedalmond;"></span><br> 1237 </td> 1238 <td>blanchedalmond = #ffebcd</td> 1239 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blue;"></span><br> 1240 </td> 1241 <td>blue = #0000ff</td> 1242 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blueviolet;"></span><br> 1243 </td> 1244 <td>blueviolet = #8a2be2</td> 1245 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% brown;"></span><br> 1246 </td> 1247 <td>brown = #a52a2a</td> 1248 </tr> 1249 <tr> 1250 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% burlywood;"></span><br> 1251 </td> 1252 <td>burlywood = #deb887</td> 1253 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cadetblue;"></span><br> 1254 </td> 1255 <td>cadetblue = #5f9ea0</td> 1256 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% chartreuse;"></span><br> 1257 </td> 1258 <td>chartreuse = #7fff00</td> 1259 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% chocolate;"></span><br> 1260 </td> 1261 <td>chocolate = #d2691e</td> 1262 </tr> 1263 <tr> 1264 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% coral;"></span><br> 1265 </td> 1266 <td>coral = #ff7f50</td> 1267 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cornflowerblue;"></span><br> 1268 </td> 1269 <td>cornflowerblue = #6495ed</td> 1270 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cornsilk;"></span><br> 1271 </td> 1272 <td>cornsilk = #fff8dc</td> 1273 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% crimson;"></span><br> 1274 </td> 1275 <td>crimson = #dc143c</td> 1276 </tr> 1277 <tr> 1278 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cyan;"></span><br> 1279 </td> 1280 <td>cyan = #00ffff</td> 1281 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkblue;"></span><br> 1282 </td> 1283 <td>darkblue = #00008b</td> 1284 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkcyan;"></span><br> 1285 </td> 1286 <td>darkcyan = #008b8b</td> 1287 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgoldenrod;"></span><br> 1288 </td> 1289 <td>darkgoldenrod = #b8860b</td> 1290 </tr> 1291 <tr> 1292 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgray;"></span><br> 1293 </td> 1294 <td>darkgray = #a9a9a9</td> 1295 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgreen;"></span><br> 1296 </td> 1297 <td>darkgreen = #006400</td> 1298 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgrey;"></span><br> 1299 </td> 1300 <td>darkgrey = #a9a9a9</td> 1301 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkkhaki;"></span><br> 1302 </td> 1303 <td>darkkhaki = #bdb76b</td> 1304 </tr> 1305 <tr> 1306 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkmagenta;"></span><br> 1307 </td> 1308 <td>darkmagenta = #8b008b</td> 1309 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkolivegreen;"></span><br> 1310 </td> 1311 <td>darkolivegreen = #556b2f</td> 1312 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkorange;"></span><br> 1313 </td> 1314 <td>darkorange = #ff8c00</td> 1315 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkorchid;"></span><br> 1316 </td> 1317 <td>darkorchid = #9932cc</td> 1318 </tr> 1319 <tr> 1320 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkred;"></span><br> 1321 </td> 1322 <td>darkred = #8b0000</td> 1323 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darksalmon;"></span><br> 1324 </td> 1325 <td>darksalmon = #e9967a</td> 1326 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkseagreen;"></span><br> 1327 </td> 1328 <td>darkseagreen = #8fbc8f</td> 1329 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslateblue;"></span><br> 1330 </td> 1331 <td>darkslateblue = #483d8b</td> 1332 </tr> 1333 <tr> 1334 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslategray;"></span><br> 1335 </td> 1336 <td>darkslategray = #2f4f4f</td> 1337 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslategrey;"></span><br> 1338 </td> 1339 <td>darkslategrey = #2f4f4f</td> 1340 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkturquoise;"></span><br> 1341 </td> 1342 <td>darkturquoise = #00ced1</td> 1343 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkviolet;"></span><br> 1344 </td> 1345 <td>darkviolet = #9400d3</td> 1346 </tr> 1347 <tr> 1348 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% deeppink;"></span><br> 1349 </td> 1350 <td>deeppink = #ff1493</td> 1351 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% deepskyblue;"></span><br> 1352 </td> 1353 <td>deepskyblue = #00bfff</td> 1354 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dimgray;"></span><br> 1355 </td> 1356 <td>dimgray = #696969</td> 1357 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dimgrey;"></span><br> 1358 </td> 1359 <td>dimgrey = #696969</td> 1360 </tr> 1361 <tr> 1362 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dodgerblue;"></span><br> 1363 </td> 1364 <td>dodgerblue = #1e90ff</td> 1365 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% firebrick;"></span><br> 1366 </td> 1367 <td>firebrick = #b22222</td> 1368 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% floralwhite;"></span><br> 1369 </td> 1370 <td>floralwhite = #fffaf0</td> 1371 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% forestgreen;"></span><br> 1372 </td> 1373 <td>forestgreen = #228b22</td> 1374 </tr> 1375 <tr> 1376 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% fuchsia;"></span><br> 1377 </td> 1378 <td>fuchsia = #ff00ff</td> 1379 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gainsboro;"></span><br> 1380 </td> 1381 <td>gainsboro = #dcdcdc</td> 1382 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% ghostwhite;"></span><br> 1383 </td> 1384 <td>ghostwhite = #f8f8ff</td> 1385 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gold;"></span><br> 1386 </td> 1387 <td>gold = #ffd700</td> 1388 </tr> 1389 <tr> 1390 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% goldenrod;"></span><br> 1391 </td> 1392 <td>goldenrod = #daa520</td> 1393 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gray;"></span><br> 1394 </td> 1395 <td>gray = #808080</td> 1396 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% green;"></span><br> 1397 </td> 1398 <td>green = #008000</td> 1399 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% greenyellow;"></span><br> 1400 </td> 1401 <td>greenyellow = #adff2f</td> 1402 </tr> 1403 <tr> 1404 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% grey;"></span><br> 1405 </td> 1406 <td>grey = #808080</td> 1407 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% honeydew;"></span><br> 1408 </td> 1409 <td>honeydew = #f0fff0</td> 1410 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% hotpink;"></span><br> 1411 </td> 1412 <td>hotpink = #ff69b4</td> 1413 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% indianred;"></span><br> 1414 </td> 1415 <td>indianred = #cd5c5c</td> 1416 </tr> 1417 <tr> 1418 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% indigo;"></span><br> 1419 </td> 1420 <td>indigo = #4b0082</td> 1421 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% ivory;"></span><br> 1422 </td> 1423 <td>ivory = #fffff0</td> 1424 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% khaki;"></span><br> 1425 </td> 1426 <td>khaki = #f0e68c</td> 1427 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lavender;"></span><br> 1428 </td> 1429 <td>lavender = #e6e6fa</td> 1430 </tr> 1431 <tr> 1432 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lavenderblush;"></span><br> 1433 </td> 1434 <td>lavenderblush = #fff0f5</td> 1435 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lawngreen;"></span><br> 1436 </td> 1437 <td>lawngreen = #7cfc00</td> 1438 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lemonchiffon;"></span><br> 1439 </td> 1440 <td>lemonchiffon = #fffacd</td> 1441 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightblue;"></span><br> 1442 </td> 1443 <td>lightblue = #add8e6</td> 1444 </tr> 1445 <tr> 1446 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightcoral;"></span><br> 1447 </td> 1448 <td>lightcoral = #f08080</td> 1449 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightcyan;"></span><br> 1450 </td> 1451 <td>lightcyan = #e0ffff</td> 1452 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgoldenrodyellow;"></span><br> 1453 </td> 1454 <td>lightgoldenrodyellow = #fafad2</td> 1455 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgray;"></span><br> 1456 </td> 1457 <td>lightgray = #d3d3d3</td> 1458 </tr> 1459 <tr> 1460 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgreen;"></span><br> 1461 </td> 1462 <td>lightgreen = #90ee90</td> 1463 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgrey;"></span><br> 1464 </td> 1465 <td>lightgrey = #d3d3d3</td> 1466 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightpink;"></span><br> 1467 </td> 1468 <td>lightpink = #ffb6c1</td> 1469 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightsalmon;"></span><br> 1470 </td> 1471 <td>lightsalmon = #ffa07a</td> 1472 </tr> 1473 <tr> 1474 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightseagreen;"></span><br> 1475 </td> 1476 <td>lightseagreen = #20b2aa</td> 1477 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightskyblue;"></span><br> 1478 </td> 1479 <td>lightskyblue = #87cefa</td> 1480 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightslategray;"></span><br> 1481 </td> 1482 <td>lightslategray = #778899</td> 1483 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightslategrey;"></span><br> 1484 </td> 1485 <td>lightslategrey = #778899</td> 1486 </tr> 1487 <tr> 1488 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightsteelblue;"></span><br> 1489 </td> 1490 <td>lightsteelblue = #b0c4de</td> 1491 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightyellow;"></span><br> 1492 </td> 1493 <td>lightyellow = #ffffe0</td> 1494 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lime;"></span><br> 1495 </td> 1496 <td>lime = #00ff00</td> 1497 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% limegreen;"></span><br> 1498 </td> 1499 <td>limegreen = #32cd32</td> 1500 </tr> 1501 <tr> 1502 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% linen;"></span><br> 1503 </td> 1504 <td>linen = #faf0e6</td> 1505 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% magenta;"></span><br> 1506 </td> 1507 <td>magenta = #ff00ff</td> 1508 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% maroon;"></span><br> 1509 </td> 1510 <td>maroon = #800000</td> 1511 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumaquamarine;"></span><br> 1512 </td> 1513 <td>mediumaquamarine = #66cdaa</td> 1514 </tr> 1515 <tr> 1516 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumblue;"></span><br> 1517 </td> 1518 <td>mediumblue = #0000cd</td> 1519 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumorchid;"></span><br> 1520 </td> 1521 <td>mediumorchid = #ba55d3</td> 1522 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumpurple;"></span><br> 1523 </td> 1524 <td>mediumpurple = #9370db</td> 1525 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumseagreen;"></span><br> 1526 </td> 1527 <td>mediumseagreen = #3cb371</td> 1528 </tr> 1529 <tr> 1530 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumslateblue;"></span><br> 1531 </td> 1532 <td>mediumslateblue = #7b68ee</td> 1533 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumspringgreen;"></span><br> 1534 </td> 1535 <td>mediumspringgreen = #00fa9a</td> 1536 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumturquoise;"></span><br> 1537 </td> 1538 <td>mediumturquoise = #48d1cc</td> 1539 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumvioletred;"></span><br> 1540 </td> 1541 <td>mediumvioletred = #c71585</td> 1542 </tr> 1543 <tr> 1544 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% midnightblue;"></span><br> 1545 </td> 1546 <td>midnightblue = #191970</td> 1547 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mintcream;"></span><br> 1548 </td> 1549 <td>mintcream = #f5fffa</td> 1550 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mistyrose;"></span><br> 1551 </td> 1552 <td>mistyrose = #ffe4e1</td> 1553 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% moccasin;"></span><br> 1554 </td> 1555 <td>moccasin = #ffe4b5</td> 1556 </tr> 1557 <tr> 1558 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% navajowhite;"></span><br> 1559 </td> 1560 <td>navajowhite = #ffdead</td> 1561 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% navy;"></span><br> 1562 </td> 1563 <td>navy = #000080</td> 1564 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% oldlace;"></span><br> 1565 </td> 1566 <td>oldlace = #fdf5e6</td> 1567 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% olive;"></span><br> 1568 </td> 1569 <td>olive = #808000</td> 1570 </tr> 1571 <tr> 1572 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% olivedrab;"></span><br> 1573 </td> 1574 <td>olivedrab = #6b8e23</td> 1575 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orange;"></span><br> 1576 </td> 1577 <td>orange = #ffa500</td> 1578 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orangered;"></span><br> 1579 </td> 1580 <td>orangered = #ff4500</td> 1581 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orchid;"></span><br> 1582 </td> 1583 <td>orchid = #da70d6</td> 1584 </tr> 1585 <tr> 1586 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palegoldenrod;"></span><br> 1587 </td> 1588 <td>palegoldenrod = #eee8aa</td> 1589 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palegreen;"></span><br> 1590 </td> 1591 <td>palegreen = #98fb98</td> 1592 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% paleturquoise;"></span><br> 1593 </td> 1594 <td>paleturquoise = #afeeee</td> 1595 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palevioletred;"></span><br> 1596 </td> 1597 <td>palevioletred = #db7093</td> 1598 </tr> 1599 <tr> 1600 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% papayawhip;"></span><br> 1601 </td> 1602 <td>papayawhip = #ffefd5</td> 1603 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% peachpuff;"></span><br> 1604 </td> 1605 <td>peachpuff = #ffdab9</td> 1606 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% peru;"></span><br> 1607 </td> 1608 <td>peru = #cd853f</td> 1609 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% pink;"></span><br> 1610 </td> 1611 <td>pink = #ffc0cb</td> 1612 </tr> 1613 <tr> 1614 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% plum;"></span><br> 1615 </td> 1616 <td>plum = #dda0dd</td> 1617 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% powderblue;"></span><br> 1618 </td> 1619 <td>powderblue = #b0e0e6</td> 1620 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% purple;"></span><br> 1621 </td> 1622 <td>purple = #800080</td> 1623 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% red;"></span><br> 1624 </td> 1625 <td>red = #ff0000</td> 1626 </tr> 1627 <tr> 1628 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% rosybrown;"></span><br> 1629 </td> 1630 <td>rosybrown = #bc8f8f</td> 1631 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% royalblue;"></span><br> 1632 </td> 1633 <td>royalblue = #4169e1</td> 1634 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% saddlebrown;"></span><br> 1635 </td> 1636 <td>saddlebrown = #8b4513</td> 1637 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% salmon;"></span><br> 1638 </td> 1639 <td>salmon = #fa8072</td> 1640 </tr> 1641 <tr> 1642 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% sandybrown;"></span><br> 1643 </td> 1644 <td>sandybrown = #f4a460</td> 1645 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% seagreen;"></span><br> 1646 </td> 1647 <td>seagreen = #2e8b57</td> 1648 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% seashell;"></span><br> 1649 </td> 1650 <td>seashell = #fff5ee</td> 1651 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% sienna;"></span><br> 1652 </td> 1653 <td>sienna = #a0522d</td> 1654 </tr> 1655 <tr> 1656 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% silver;"></span><br> 1657 </td> 1658 <td>silver = #c0c0c0</td> 1659 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% skyblue;"></span><br> 1660 </td> 1661 <td>skyblue = #87ceeb</td> 1662 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slateblue;"></span><br> 1663 </td> 1664 <td>slateblue = #6a5acd</td> 1665 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slategray;"></span><br> 1666 </td> 1667 <td>slategray = #708090</td> 1668 </tr> 1669 <tr> 1670 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slategrey;"></span><br> 1671 </td> 1672 <td>slategrey = #708090</td> 1673 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% snow;"></span><br> 1674 </td> 1675 <td>snow = #fffafa</td> 1676 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% springgreen;"></span><br> 1677 </td> 1678 <td>springgreen = #00ff7f</td> 1679 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% steelblue;"></span><br> 1680 </td> 1681 <td>steelblue = #4682b4</td> 1682 </tr> 1683 <tr> 1684 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% tan;"></span><br> 1685 </td> 1686 <td>tan = #d2b48c</td> 1687 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% teal;"></span><br> 1688 </td> 1689 <td>teal = #008080</td> 1690 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% thistle;"></span><br> 1691 </td> 1692 <td>thistle = #d8bfd8</td> 1693 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% tomato;"></span><br> 1694 </td> 1695 <td>tomato = #ff6347</td> 1696 </tr> 1697 <tr> 1698 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% turquoise;"></span><br> 1699 </td> 1700 <td>turquoise = #40e0d0</td> 1701 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% violet;"></span><br> 1702 </td> 1703 <td>violet = #ee82ee</td> 1704 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% wheat;"></span><br> 1705 </td> 1706 <td>wheat = #f5deb3</td> 1707 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% white;"></span><br> 1708 </td> 1709 <td>white = #ffffff</td> 1710 </tr> 1711 <tr> 1712 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% whitesmoke;"></span><br> 1713 </td> 1714 <td>whitesmoke = #f5f5f5</td> 1715 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% yellow;"></span><br> 1716 </td> 1717 <td>yellow = #ffff00</td> 1718 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% yellowgreen;"></span><br> 1719 </td> 1720 <td>yellowgreen = #9acd32</td> 1721 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% transparent;"></span><br> 1722 </td> 1723 <td>transparent = rgba(0,0,0,0)</td> 1724 </tr> 1725 </tbody> 1726 </table> 1727 <h4>Looked-up Colors <span class="grammar" style="font-size: smaller;"><looked-up-color></span></h4> 1728 <p>With looked-up colors you can refer to any other color property that is 1729 set on the current node or any of its parents. This is a very powerful 1730 feature, as it allows a generic palette of colors to be specified on the 1731 scene then used thoughout the application. If you want to change one of 1732 those palette colors you can do so at any level in the scene tree and it 1733 will affect that node and all its decendents. Looked-up colors are not 1734 looked up until they are applied, so they are live and react to any style 1735 changes that might occur, such as replacing a palette color at runtime 1736 with the "style" property on a node.</p> 1737 <p>In the following example, all background color of all buttons uses the 1738 looked up color "abc".</p> 1739 <p class="example">.root { abc: #f00 }<br> 1740 .button { -fx-background-color: abc }</p> 1741 <h4>RGB Colors <span class="grammar" style="font-size: smaller;"><rgb-color></span></h4> 1742 <p>The RGB color model is used in numerical color specifications. It has a 1743 number of different supported forms.</p> 1744 <p class="grammar">#<digit><digit><digit><br> 1745 | 1746 #<digit><digit><digit><digit><digit><digit><br> 1747 | rgb( <a href="#typenumber" class="typelink"><integer></a> , <a href="#typenumber" 1748 class="typelink"><integer></a> 1749 , <a href="#typenumber" class="typelink"><integer></a> )<br> 1750 | rgb( <a href="#typenumber" class="typelink"><integer></a> %, <a 1751 href="#typenumber" 1752 class="typelink"><integer></a>% 1753 , <a href="#typenumber" class="typelink"><integer></a>% )<br> 1754 | rgba( <a href="#typenumber" class="typelink"><integer></a> , <a 1755 href="#typenumber" 1756 class="typelink"><integer></a> 1757 , <a href="#typenumber" class="typelink"><integer></a> , <a href="#typenumber" 1758 class="typelink"><number></a> 1759 ) <br> 1760 | rgba( <a href="#typenumber" class="typelink"><integer></a>% , <a 1761 href="#typenumber" 1762 class="typelink"><integer></a>% 1763 , <a href="#typenumber" class="typelink"><integer></a> %, <a href="#typenumber" 1764 class="typelink"><number></a> 1765 )</p> 1766 <p>These examples all specify the same color for the text fill of a Label:</p> 1767 <p class="example"></p> 1768 <ul style="list-style: none;"> 1769 <li>.label { -fx-text-fill: #f00 } /* #rgb */</li> 1770 <li>.label { -fx-text-fill: #ff0000 } /* #rrggbb */</li> 1771 <li>.label { -fx-text-fill: rgb(255,0,0) }</li> 1772 <li> .label { -fx-text-fill: rgb(100%, 0%, 0%) }</li> 1773 <li>.label { -fx-text-fill: rgba(255,0,0,1) }</li> 1774 </ul> 1775 <p></p> 1776 <p><strong>RGB Hex</strong>: The format of an RGB value in hexadecimal 1777 notation is a ‘#’ immediately followed by either three or six 1778 hexadecimal characters. The three-digit RGB notation (#rgb) is converted 1779 into six-digit form (#rrggbb) by replicating digits, not by adding zeros. 1780 For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) 1781 can be specified with the short notation (#fff) and removes any 1782 dependencies on the color depth of the display.</p> 1783 <p><strong>RGB Decimal or Percent</strong>: The format of an RGB value in 1784 the functional notation is ‘rgb(’ followed by a 1785 comma-separated list of three numerical values (either three decimal 1786 integer values or three percentage values) followed by ‘)’. 1787 The integer value 255 corresponds to 100%, and to F or FF in the 1788 hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. White 1789 space characters are allowed around the numerical values.</p> 1790 <p><strong>RGB + Alpha</strong>: This is an extension of the RGB color model 1791 to include an ‘alpha’ value that specifies the opacity of a 1792 color. This is accomplished via a functional syntax of the form rgba(...) 1793 form that takes a fourth parameter which is the alpha value. The alpha 1794 value must be a number in the range 0.0 (representing completely 1795 transparent) and 1.0 (completely opaque). As with the rgb() function, the 1796 red, green, and blue values may be decimal integers or percentages. The 1797 following examples all specify the same color:</p> 1798 <p class="example"></p> 1799 <ul style="list-style: none;"> 1800 <li>.label { -fx-text-fill: rgb(255,0,0) } /* integer range 0 — 255*/</li> 1801 <li> .label { -fx-text-fill: rgba(255,0,0,1) /* the same, with explicit 1802 opacity of 1 */</li> 1803 <li> .label { -fx-text-fill: rgb(100%,0%,0%) } /* float range 0.0% — 1804 100.0% */</li> 1805 <li> .label { -fx-text-fill: rgba(100%,0%,0%,1) } /* the same, with 1806 explicit opacity of 1 */</li> 1807 </ul> 1808 <p></p> 1809 <h4>HSB Colors <span class="grammar" style="font-size: smaller;"><hsb-color></span></h4> 1810 <p>Colors can be specified using the HSB (sometimes called HSV) color model, 1811 as follows:</p> 1812 <p class="grammar">hsb( <a href="#typenumber" class="typelink"><number></a> 1813 , <a href="#typenumber" class="typelink"><number></a>% , <a href="#typenumber" 1814 class="typelink"><number></a>% 1815 ) | hsba( <a href="#typenumber" class="typelink"><number></a> , <a 1816 href="#typenumber" 1817 class="typelink"><number></a>% 1818 , <a href="#typenumber" class="typelink"><number></a>% , <a href="#typenumber" 1819 class="typelink"><number></a> 1820 )</p> 1821 <p>The first number is <span style="font-style:italic;">hue</span>, a number in the range 0 to 360 1822 degrees. The second number is <em>saturation,</em> a percentage in the 1823 range 0% to 100%. The third number is <span style="font-style:italic;">brightness</span>, also a 1824 percentage in the range 0% to 100%. The hsba(...) form takes a fourth 1825 parameter at the end which is a alpha value in the range 0.0 to 1.0, 1826 specifying completely transparent and completely opaque, respectively.</p> 1827 <h4>Color Functions <span class="grammar" style="font-size: smaller;"><color-function></span></h4> 1828 <p>JavaFX supports some color computation functions. These compute new 1829 colors from input colors at the time the color style is applied. This 1830 enables a color theme to be specified using a single base color and to 1831 have variant colors computed from that base color. There are two color 1832 functions: derive() and ladder().</p> 1833 <p class="grammar"><derive> | <ladder></p> 1834 <p><strong>Derive </strong><span class="grammar" style="font-size: smaller;"><derive></span></p> 1835 <p class="grammar">derive( <a href="#typecolor" class="typelink"><color></a> 1836 , <a href="#typenumber" class="typelink"><number></a>% )</p> 1837 <p>The derive function takes a color and computes a brighter or darker 1838 version of that color. The second parameter is the brightness offset, 1839 representing how much brighter or darker the derived color should be. Positive percentages indicate brighter colors 1840 and negative percentages indicate darker colors. A value of -100% means 1841 completely black, 0% means no change in brightness, and 100% means 1842 completely white.</p> 1843 <p><strong>Ladder</strong><span class="grammar" style="font-size: smaller;"><ladder></span></p> 1844 <p class="grammar">ladder(<a href="#typecolor" class="typelink"><color></a> 1845 , <a href="#typecolorstop" class="typelink"><color-stop></a> [, <a 1846 href="#typecolorstop" 1847 class="typelink"><color-stop></a>]+)</p> 1848 <p>The ladder function interpolates between colors. The effect is as if a 1849 gradient is created using the stops provided, and then the brightness of 1850 the provided <a href="#typecolor" class="typelink"><color></a> is 1851 used to index a color value within that gradient. At 0% brightness, the 1852 color at the 0.0 end of the gradient is used; at 100% brightness, the 1853 color at the 1.0 end of the gradient is used; and at 50% brightness, the 1854 color at 0.5, the midway point of the gradient, is used. Note that no 1855 gradient is actually rendered. This is merely an interpolation function 1856 that results in a single color.</p> 1857 <p>Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax." 1858 class="typelink">W3C 1859 color-stop syntax</a> and are normalized accordingly.</p> 1860 <p>For example, you could use the following if you want the text color to be 1861 black or white depending upon the brightness of the background.</p> 1862 <p class="example">background: white;<br> 1863 -fx-text-fill: ladder(background, white 49%, black 50%);</p> 1864 <p>The resulting -fx-text-fill value will be black, because the background 1865 (white) has a brightness of 100%, and the color at 1.0 on the gradient is 1866 black. If we were to change the background color to black or dark grey, 1867 the brightness would be less than 50%, giving an -fx-text-fill value of 1868 white.</p> 1869 <p><span style="color: #af0000; ">The following syntax for ladder does not 1870 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX 1871 2.0 CSS parser supports the syntax but this support may be removed in 1872 later releases.</span></p> 1873 <p class="grammar"><span style="color: #af0000; ">ladder(<a href="#typecolor" class="typelink"><color></a>) 1874 stops [ ( <a href="#typenumber" class="typelink"><number></a> , <a 1875 href="#typecolor" 1876 class="typelink"><color></a> 1877 ) ]+ </span></p> 1878 <h2><a name="stage" id="stage">Stage</a></h2> 1879 <table summary="property table" class="package" width="100%"> 1880 <tbody> 1881 <tr> 1882 <td>javafx.stage</td> 1883 </tr> 1884 </tbody> 1885 </table> 1886 <h4><a name="popupwindow" id="popupwindow">Group</a></h4> 1887 <p class="styleclass">Style class: .root.popup</p> 1888 <p>PopupWindow does not have any properties that can be styled by CSS, but a PopupWindow does have its own Scene. 1889 Scene's root gets the .root style-class by default. If the Scene is the root scene of a PopupWindow, then the 1890 .popup style-class is also added. This allows the root scene of a PopupWindow to have distinct styles via 1891 the CSS rule <code>.root.popup { /* declarations */ }</code> 1892 <h2><a name="nodes" id="nodes">Nodes</a></h2> 1893 <table summary="property table" class="package" width="100%"> 1894 <tbody> 1895 <tr> 1896 <td>javafx.scene</td> 1897 </tr> 1898 </tbody> 1899 </table> 1900 <h4><a name="group" id="group">Group</a></h4> 1901 <p class="styleclass">Style class: empty by default</p> 1902 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 1903 <thead> 1904 <tr> 1905 <th class="propertyname">CSS Property</th> 1906 <th class="value">Values</th> 1907 <th class="default">Default</th> 1908 <th>Comments</th> 1909 </tr> 1910 </thead> 1911 <tbody> 1912 <tr> 1913 <td colspan="4">Group extends Parent. Group does not add any addtional 1914 CSS properties.</td> 1915 </tr> 1916 <tr> 1917 <td colspan="4" class="parents">Also has all properties of <a href="#parent">Parent</a></td> 1918 </tr> 1919 </tbody> 1920 </table> 1921 <br> 1922 <h4><a name="node" id="node">Node</a></h4> 1923 <p class="styleclass">Style class: empty by default<br> 1924 </p> 1925 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 1926 <thead> 1927 <tr> 1928 <th class="propertyname">CSS Property</th> 1929 <th class="value">Values</th> 1930 <th class="default">Default</th> 1931 <th class="range">Range</th> 1932 <th>Comments</th> 1933 </tr> 1934 </thead> 1935 <tbody> 1936 <tr> 1937 <td class="propertyname">-fx-blend-mode</td> 1938 <td class="value">[ add | blue | color-burn | color-dodge | darken | 1939 difference | exclusion | green | hard-light | lighten | multiply | 1940 overlay | red | screen | soft-light | src-atop | src-in | src-out | 1941 src-over ] </td> 1942 <td>null</td> 1943 <td> </td> 1944 <td> </td> 1945 </tr> 1946 <tr> 1947 <td class="propertyname">-fx-cursor</td> 1948 <td class="value">[ null | crosshair | default | hand | move | 1949 e-resize | h-resize | ne-resize | nw-resize | n-resize | se-resize | 1950 sw-resize | s-resize | w-resize | v-resize | text | wait ] | <a href="#typeurl" 1951 class="typelink"><url></a></td> 1952 <td class="default">null</td> 1953 <td class="range"> </td> 1954 <td>inherits </td> 1955 </tr> 1956 <tr> 1957 <td class="propertyname">-fx-effect</td> 1958 <td class="value"><a href="#typeeffect" class="typelink"><effect></a></td> 1959 <td class="default">null</td> 1960 <td class="range"> </td> 1961 <td> </td> 1962 </tr> 1963 <tr> 1964 <td class="propertyname">-fx-focus-traversable</td> 1965 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 1966 <td class="default">false</td> 1967 <td class="range"> </td> 1968 <td>The default value for controls is true, although there are some exceptions. 1969 See <a href="#controls">Controls</a> for details.</td> 1970 </tr> 1971 <tr> 1972 <td class="propertyname">-fx-view-order</td> 1973 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 1974 <td class="default">0</td> 1975 <td class="range"> </td> 1976 <td>This property is used to alter the rendering and picking order of 1977 a node within its parent without reordering the parent's children list. 1978 The parent traverses its children in decreasing viewOrder order. 1979 </td> 1980 </tr> 1981 <tr> 1982 <td class="propertyname">-fx-opacity</td> 1983 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 1984 <td class="default">1</td> 1985 <td class="range">[0.0 ... 1.0]</td> 1986 <td>Opacity can be thought of conceptually as a postprocessing 1987 operation. Conceptually, after the node (including its descendants) 1988 is rendered into an RGBA offscreen image, the opacity setting 1989 specifies how to blend the offscreen rendering into the current 1990 composite rendering. </td> 1991 </tr> 1992 <tr> 1993 <td class="propertyname">-fx-rotate</td> 1994 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 1995 <td class="default">0</td> 1996 <td class="range"> </td> 1997 <td>This is the angle of the rotation in degrees. Zero degrees is at 3 1998 o'clock (directly to the right). Angle values are positive 1999 clockwise. Rotation is about the center.</td> 2000 </tr> 2001 <tr> 2002 <td class="propertyname">-fx-scale-x</td> 2003 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 2004 <td class="default">1</td> 2005 <td class="range"> </td> 2006 <td>scale about the center</td> 2007 </tr> 2008 <tr> 2009 <td class="propertyname">-fx-scale-y</td> 2010 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 2011 <td class="default">1</td> 2012 <td class="range"> </td> 2013 <td>scale about the center</td> 2014 </tr> 2015 <tr> 2016 <td class="propertyname">-fx-scale-z</td> 2017 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 2018 <td class="default">1</td> 2019 <td class="range"> </td> 2020 <td>scale about the center</td> 2021 </tr> 2022 <tr> 2023 <td class="propertyname">-fx-translate-x</td> 2024 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 2025 <td class="default">0</td> 2026 <td class="range"> </td> 2027 <td> </td> 2028 </tr> 2029 <tr> 2030 <td class="propertyname">-fx-translate-y</td> 2031 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 2032 <td class="default">0</td> 2033 <td class="range"> </td> 2034 <td> </td> 2035 </tr> 2036 <tr> 2037 <td class="propertyname">-fx-translate-z</td> 2038 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 2039 <td class="default">0</td> 2040 <td class="range"> </td> 2041 <td> </td> 2042 </tr> 2043 <tr> 2044 <td class="propertyname">visibility</td> 2045 <td class="value">[ visible | hidden | collapse | inherit ]</td> 2046 <td class="default">true (i.e, visible)</td> 2047 <td class="range"> </td> 2048 <td>See <a href="http://www.w3.org/TR/CSS2/visufx.html#visibility">W3C 2049 visibility property</a></td> 2050 </tr> 2051 </tbody> 2052 </table> 2053 <h4>Pseudo-classes</h4> 2054 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 2055 <thead> 2056 <tr> 2057 <th class="propertyname">CSS Pseudo-class</th> 2058 <th>Comments</th> 2059 </tr> 2060 </thead> 2061 <tbody> 2062 <tr> 2063 <td class="propertyname">disabled</td> 2064 <td>applies when the <strong>disabled</strong> variable is true</td> 2065 </tr> 2066 <tr> 2067 <td class="propertyname">focused</td> 2068 <td>applies when the <strong>focused</strong> variable is true</td> 2069 </tr> 2070 <tr> 2071 <td class="propertyname">hover</td> 2072 <td>applies when the <strong>hover</strong> variable is true</td> 2073 </tr> 2074 <tr> 2075 <td class="propertyname">pressed</td> 2076 <td>applies when the <strong>pressed</strong> variable is true</td> 2077 </tr> 2078 <tr> 2079 <td class="propertyname">show-mnemonic</td> 2080 <td>apples when the mnemonic affordance (typically an underscore) 2081 should be shown.</td> 2082 </tr> 2083 </tbody> 2084 </table> 2085 <h4><a name="parent" id="parent">Parent</a></h4> 2086 <p class="styleclass">Style 2087 class: empty by default</p> 2088 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 2089 <thead> 2090 <tr> 2091 <th class="propertyname">CSS Property</th> 2092 <th class="value">Values</th> 2093 <th class="default">Default</th> 2094 <th>Comments</th> 2095 </tr> 2096 </thead> 2097 <tbody> 2098 <tr> 2099 <td colspan="4">Parent extends Node. Parent does not add any addtional 2100 CSS properties.</td> 2101 </tr> 2102 <tr> 2103 <td colspan="4" class="parents">Also has all properties of <a href="#node">Node</a></td> 2104 </tr> 2105 </tbody> 2106 </table> 2107 <br> 2108 <h4><a name="scene" id="scene">Scene</a></h4> 2109 <p class="styleclass">Style class: not applicable<br> 2110 </p> 2111 <p>The Scene object has no settable CSS properties, nor does it have any 2112 pseudo‑classes. However, the root node of the scene is assigned the style 2113 class "root" (in addition to style classes already assigned to the node). 2114 This is useful because the root node of Scene is the root container for 2115 all active scene‑graph nodes. Thus, it can serve as a container for 2116 properties that are inherited or looked up.</p> 2117 <table summary="property table" class="package" width="100%"> 2118 <tbody> 2119 <tr> 2120 <td>javafx.scene.image</td> 2121 </tr> 2122 </tbody> 2123 </table> 2124 <h4><a name="imageview" id="imageview">ImageView</a></h4> 2125 <p class="styleclass">Style class: image-view</p> 2126 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 2127 <thead> 2128 <tr> 2129 <th class="propertyname">CSS Property</th> 2130 <th class="value">Values</th> 2131 <th class="default">Default</th> 2132 <th>Comments</th> 2133 </tr> 2134 </thead> 2135 <tbody> 2136 <tr> 2137 <td class="propertyname">-fx-image</td> 2138 <td class="value"><a href="#typeurl" class="typelink"><uri></a></td> 2139 <td class="default">null</td> 2140 <td>Relative URLs are resolved against the URL of the stylesheet.</td> 2141 </tr> 2142 <tr> 2143 <td colspan="4" class="parents">Also has all properties of <a href="#node">Node</a></td> 2144 </tr> 2145 </tbody> 2146 </table> 2147 <table summary="property table" class="package" width="100%"> 2148 <tbody> 2149 <tr> 2150 <td>javafx.scene.layout</td> 2151 </tr> 2152 </tbody> 2153 </table> 2154 <br> 2155 <h4><a name="anchorpane" id="anchorpane">AnchorPane</a></h4> 2156 <p class="styleclass">Style class: empty by default</p> 2157 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 2158 <thead> 2159 <tr> 2160 <th class="propertyname">CSS Property</th> 2161 <th class="value">Values</th> 2162 <th class="default">Default</th> 2163 <th>Comments</th> 2164 </tr> 2165 </thead> 2166 <tbody> 2167 <tr> 2168 <td colspan="4">AnchorPane extends Pane and does not add any 2169 additional CSS properties.</td> 2170 </tr> 2171 <tr> 2172 <td colspan="4" class="parents">Also has all properties of <a href="#pane">Pane</a></td> 2173 </tr> 2174 </tbody> 2175 </table> 2176 <h4><a name="border" id="border">BorderPane</a></h4> 2177 <p class="styleclass">Style class: empty by default</p> 2178 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 2179 <thead> 2180 <tr> 2181 <th class="propertyname">CSS Property</th> 2182 <th class="value">Values</th> 2183 <th class="default">Default</th> 2184 <th>Comments</th> 2185 </tr> 2186 </thead> 2187 <tbody> 2188 <tr> 2189 <td colspan="4">BorderPane extends Pane and does not add any 2190 additional CSS properties.</td> 2191 </tr> 2192 <tr> 2193 <td colspan="4" class="parents">Also has all properties of <a href="#pane">Pane</a></td> 2194 </tr> 2195 </tbody> 2196 </table> 2197 <br> 2198 2199 <h4><a name="dialogpane" id="dialogpane">DialogPane</a></h4> 2200 <p class="styleclass">Style class: dialog-pane</p> 2201 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 2202 <thead> 2203 <tr> 2204 <th class="propertyname">CSS Property</th> 2205 <th class="value">Values</th> 2206 <th>Default</th> 2207 <th>Comments</th> 2208 </tr> 2209 </thead> 2210 <tbody> 2211 <tr> 2212 <td class="propertyname">-fx-graphic</td> 2213 <td class="value"><a href="#typeurl" class="typelink"><uri></a></td> 2214 <td>null</td> 2215 <td> </td> 2216 </tr> 2217 <tr> 2218 <td colspan="4" class="parents">Also has all properties of <a href="#pane">Pane</a></td> 2219 </tr> 2220 </tbody> 2221 </table> 2222 <h4>Substructure</h4> 2223 <ul> 2224 <li>header-panel — BoderPane 2225 <ul><li>graphic-container — StackPane</li></ul> 2226 </li> 2227 <li>content — Label</li> 2228 <li>button-bar — ButtonBar</li> 2229 </ul> 2230 2231 <h4><a name="flowpane" id="flowpane">FlowPane</a></h4> 2232 <p class="styleclass">Style class: empty by default</p> 2233 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 2234 <thead> 2235 <tr> 2236 <th class="propertyname">CSS Property</th> 2237 <th class="value">Values</th> 2238 <th class="default">Default</th> 2239 <th>Comments</th> 2240 </tr> 2241 </thead> 2242 <tbody> 2243 <tr> 2244 <td class="propertyname">-fx-hgap</td> 2245 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2246 <td class="default">0</td> 2247 <td> </td> 2248 </tr> 2249 <tr> 2250 <td class="propertyname">-fx-vgap</td> 2251 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2252 <td class="default">0</td> 2253 <td> </td> 2254 </tr> 2255 <tr> 2256 <td class="propertyname">-fx-alignment</td> 2257 <td class="value">[ top-left | top-center | top-right | center-left | 2258 center | center-right bottom-left | bottom-center | bottom-right | 2259 baseline-left | baseline-center | baseline-right ]</td> 2260 <td class="default">top-left</td> 2261 <td> </td> 2262 </tr> 2263 <tr> 2264 <td class="propertyname">-fx-column-halignment</td> 2265 <td class="value">[ left | center | right ]</td> 2266 <td class="default">left</td> 2267 <td> </td> 2268 </tr> 2269 <tr> 2270 <td class="propertyname">-fx-row-valignment</td> 2271 <td class="value">[ top | center | baseline | bottom ] </td> 2272 <td class="default">center</td> 2273 <td> </td> 2274 </tr> 2275 <tr> 2276 <td class="propertyname">-fx-orientation</td> 2277 <td class="value">[ horizontal | vertical ]</td> 2278 <td class="default">horizontal</td> 2279 <td> </td> 2280 </tr> 2281 <tr> 2282 <td colspan="4" class="parents">Also has all properties of <a href="#pane">Pane</a></td> 2283 </tr> 2284 </tbody> 2285 </table> 2286 <h4><a name="gridpane" id="gridpane">GridPane</a></h4> 2287 <p class="styleclass">Style class: empty by default</p> 2288 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 2289 <thead> 2290 <tr> 2291 <th class="propertyname">CSS Property</th> 2292 <th class="value">Values</th> 2293 <th class="default">Default</th> 2294 <th>Comments</th> 2295 <td><br> 2296 </td> 2297 </tr> 2298 </thead> 2299 <tbody> 2300 <tr> 2301 <td class="propertyname">-fx-hgap</td> 2302 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2303 <td class="default">0</td> 2304 <td> </td> 2305 <td><br> 2306 </td> 2307 </tr> 2308 <tr> 2309 <td class="propertyname">-fx-vgap</td> 2310 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2311 <td class="default">0</td> 2312 <td> </td> 2313 <td><br> 2314 </td> 2315 </tr> 2316 <tr> 2317 <td class="propertyname">-fx-alignment</td> 2318 <td class="value">[ top-left | top-center | top-right | center-left | 2319 center | center-right bottom-left | bottom-center | bottom-right | 2320 baseline-left | baseline-center | baseline-right ]</td> 2321 <td class="default">top-left</td> 2322 <td> </td> 2323 <td><br> 2324 </td> 2325 </tr> 2326 <tr> 2327 <td class="propertyname">-fx-grid-lines-visible</td> 2328 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 2329 <td class="default">false</td> 2330 <td class="range"> </td> 2331 <td> </td> 2332 </tr> 2333 <tr> 2334 <td colspan="4" class="parents">Also has all properties of <a href="#pane">Pane</a></td> 2335 </tr> 2336 </tbody> 2337 </table> 2338 <h4><a name="hbox" id="hbox">HBox</a></h4> 2339 <p class="styleclass">Style class: empty by default</p> 2340 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 2341 <thead> 2342 <tr> 2343 <th class="propertyname">CSS Property</th> 2344 <th class="value">Values</th> 2345 <th>Default</th> 2346 <th>Comments</th> 2347 </tr> 2348 </thead> 2349 <tbody> 2350 <tr> 2351 <td class="propertyname">-fx-spacing</td> 2352 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2353 <td>0</td> 2354 <td> </td> 2355 </tr> 2356 <tr> 2357 <td class="propertyname">-fx-alignment</td> 2358 <td class="value">[ top-left | top-center | top-right | center-left | 2359 center | center-right bottom-left | bottom-center | bottom-right | 2360 baseline-left | baseline-center | baseline-right ]</td> 2361 <td class="default">top-left</td> 2362 <td> </td> 2363 </tr> 2364 <tr> 2365 <td class="propertyname">-fx-fill-height</td> 2366 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 2367 <td class="default">true</td> 2368 <td> </td> 2369 </tr> 2370 <tr> 2371 <td colspan="4" class="parents">Also has all properties of <a href="#pane">Pane</a></td> 2372 </tr> 2373 </tbody> 2374 </table> 2375 <h4><a name="pane" id="pane">Pane</a></h4> 2376 <p class="styleclass">Style class: empty by default</p> 2377 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 2378 <thead> 2379 <tr> 2380 <th class="propertyname">CSS Property</th> 2381 <th class="value">Values</th> 2382 <th class="default">Default</th> 2383 <th>Comments</th> 2384 </tr> 2385 </thead> 2386 <tbody> 2387 <tr> 2388 <td colspan="4">Pane extends Region to expose Region's children. Pane 2389 does not add any addtional CSS properties.</td> 2390 </tr> 2391 <tr> 2392 <td colspan="4" class="parents">Also has all properties of <a href="#region">Region</a></td> 2393 </tr> 2394 </tbody> 2395 </table> 2396 <br> 2397 <h4><a name="region" id="region">Region</a></h4> 2398 <p class="styleclass">Style class: empty by default</p> 2399 <p>A Region is a Node (extending from Parent) with backgrounds and borders 2400 that are styleable via CSS. A Region is typically a rounded rectangle, 2401 though this can be modified through CSS to be an arbitrary shape. Regions 2402 can contain other Region objects (sub-regions) or they can contain 2403 sub-controls. All Regions have the same set of CSS properties as described 2404 below. </p> 2405 <p>Each Region consists of several layers, painted from bottom to top, in 2406 this order:</p> 2407 <ol> 2408 <li>background fills</li> 2409 <li>background images</li> 2410 <li>border strokes</li> 2411 <li>border images</li> 2412 <li>contents</li> 2413 </ol> 2414 <p>The background and border mechanisms are patterned after the CSS 3 draft 2415 backgrounds and borders module. See <a href="#references">[4]</a> for a 2416 detailed description.</p> 2417 <p>Background fills are specified with the properties <span class="propertyname">-fx-background-color</span>, 2418 <span class="propertyname">-fx-background-radius</span> and <span class="propertyname">-fx-background-insets</span>. 2419 The -fx-background-color property is a series of one or more 2420 comma-separated <paint> values. The number of values in the series 2421 determines the number of background rectangles that are painted. 2422 Background rectangles are painted in the order specified using the given 2423 <paint> value. Each background rectangle can have different radii 2424 and insets. The -fx-background-radius and -fx-background-insets properties 2425 are series of comma-separated values (or sets of values). The radius and 2426 insets values used for a particular background are the found in the 2427 corresponding position in the -fx-background-radius and 2428 -fx-background-insets series. For example, suppose a series of three 2429 values is given for the -fx-background-color property. A series of three 2430 values should also be specified for the -fx-background-radius and 2431 -fx-background-insets properties. The first background will be painted 2432 using the first radius value and first insets value, the second background 2433 will be painted with the second radius value and second insets value, and 2434 so forth.</p> 2435 <p>Note also that properties such as -fx-background-radius and 2436 -fx-background-insets can contain a series of values or <span style="font-style:italic;">sets</span> of 2437 four values. A set of values is separated by whitespace, whereas the 2438 values or sets-of-values in a series are separated by commas. For 2439 -fx-background-radius, a single value indicates that the value should be 2440 used for the radius of all four corners of the background rectangle. A set 2441 of four values indicates that different radius values are to be used for 2442 the top-left, top-right, bottom-right, and bottom-left corners, in that 2443 order. Similarly, the -fx-background-insets property can also contain a 2444 series of values or sets of values. A set of four values for 2445 -fx-background-insets indicates that different insets are to be used for 2446 the top, right, bottom, and left edges of the rectangle, in that order.</p> 2447 <p>Background images are specified with the properties <span class="propertyname">-fx-background-image</span>, 2448 <span class="propertyname">-fx-background-repeat</span>, <span class="propertyname">-fx-background-position</span> 2449 and <span class="propertyname">-fx-background-size</span>. The number of 2450 images in the series of -fx-background-image values determines the number 2451 of background images that are painted. The -fx-background-repeat, 2452 -fx-background-position, and -fx-background-size properties each can 2453 contain a series of values. For each item in the -fx-background-image 2454 series, the corresponding items in the -fx-background-repeat, 2455 -fx-background-position, and -fx-background-size properties are applied to 2456 that background image.</p> 2457 <p>Stroked borders are specified with the properties <span class="propertyname">-fx-border-color</span>, 2458 <span class="propertyname">-fx-border-style</span>, <span class="propertyname">-fx-border-width</span>, 2459 <span class="propertyname">-fx-border-radius</span> and <span class="propertyname">-fx-border-insets</span>. 2460 Each property contains a series of items. The maximum number of items in the -fx- 2461 border-color or -fx-border-style property determines the number of border layers that are painted.. 2462 Each border in the series is painted using information from the 2463 corresponding series item of the -fx-border-color, -fx-border-style, -fx-border-width, 2464 -fx-border-radius, and -fx-border-insets properties. If there is no -fx-border-color, the default color is black. 2465 if there is no -fx-border-style, the default style is solid. </p> 2466 <p>Image borders are specified with the properties <span class="propertyname">-fx-border-image-source</span>, 2467 <span class="propertyname">-fx-border-image-repeat</span>, <span class="propertyname">-fx-border-image-slice</span>, 2468 <span class="propertyname">-fx-border-image-width</span> and <span class="propertyname">-fx-border-image-insets</span>. 2469 Each property contains a series of items. The number of items in the 2470 -fx-border-image-source property determines the number of images that are 2471 painted. Each image in the series is painted using information from the 2472 corresponding series items of the -fx-border-image-repeat, 2473 -fx-border-image-slice, -fx-border-image-width, and 2474 -fx-border-image-insets properties.</p> 2475 <p>The region's contents are a sequence of nodes, like any other container. 2476 The contents are set programmatically and cannot be set via CSS.</p> 2477 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 2478 <thead> 2479 <tr> 2480 <th class="propertyname">CSS Property</th> 2481 <th class="value">Values</th> 2482 <th class="default">Default</th> 2483 <th>Comments</th> 2484 </tr> 2485 </thead> 2486 <tbody> 2487 <tr> 2488 <td colspan="4" class="propertyname"><em>BACKGROUND FILLS</em> (see <a 2489 href="http://www.w3.org/TR/css3-background/#backgrounds" 2490 target="_blank">CSS 2491 Backgrounds and Borders Module Level 3: Backgrounds</a>)</td> 2492 </tr> 2493 <tr> 2494 <td class="propertyname">-fx-region-background</td> 2495 <td class="value">javafx.scene.layout.Background</td> 2496 <td class="default">null</td> 2497 <td>This cannot be set directly from CSS but is created from the property values of 2498 -fx-background-color, -fx-background-image, -fx-background-insets, -fx-background-position, 2499 -fx-background-radius, -fx-background-repeat, -fx-background-size</td> 2500 </tr> 2501 <tr> 2502 <td class="propertyname">-fx-background-color</td> 2503 <td class="value"><a href="#typepaint" class="typelink"><paint></a> 2504 [ , <a href="#typepaint" class="typelink"><paint></a> ]*</td> 2505 <td class="default">transparent</td> 2506 <td>A series of paint values separated by commas.</td> 2507 </tr> 2508 <tr> 2509 <td class="propertyname">-fx-background-insets</td> 2510 <td class="value"><a href="#typesize" class="typelink"><size></a> 2511 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2512 class="typelink"><size></a> 2513 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2514 class="typelink"><size></a> 2515 [ , [ <a href="#typesize" class="typelink"><size></a> | <a href="#typesize" 2516 class="typelink"><size></a> 2517 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2518 class="typelink"><size></a> 2519 <a href="#typesize" class="typelink"><size></a>] ]*</td> 2520 <td class="default">0 0 0 0</td> 2521 <td> 2522 <p>A series of size values or sets of four size values, separated by 2523 commas. A single size value means all insets are the same. 2524 Otherwise, the four values for each inset are given in the order 2525 top, right, bottom, left. Each comma-separated value or set of 2526 values in the series applies to the corresponding background 2527 color.</p> 2528 </td> 2529 </tr> 2530 <tr> 2531 <td class="propertyname">-fx-background-radius</td> 2532 <td class="value">[<a href="#typesize" class="typelink"><size></a>]{1,4} [ / [<a href="#typesize" class="typelink"><size></a>]{1,4} ]? 2533 [ , [<a href="#typesize" class="typelink"><size></a>]{1,4} [ / [<a href="#typesize" class="typelink"><size></a>]{1,4} ]? ]* 2534 <td class="default">0 0 0 0</td> 2535 <td> 2536 <p>The same syntax and semenatics as CSS Backgrounds and Borders Module Level 3: <a href="http://www.w3.org/TR/css3-background/#the-border-radius">Curve Radii</a> 2537 applies to -fx-background-radius. Note that JavaFX supports only the short-hand syntax.</p> 2538 <p>Each comma-separated value or set of values in the series applies to the corresponding background color.</p> 2539 </td> 2540 </tr> 2541 <tr> 2542 <td colspan="4" class="propertyname"><em>BACKGROUND IMAGES</em> (see <a 2543 href="http://www.w3.org/TR/css3-background/#the-background-image" 2544 target="_blank">CSS 2545 Backgrounds and Borders Module Level 3: Background Image</a>)</td> 2546 </tr> 2547 <tr> 2548 <td class="propertyname">-fx-background-image</td> 2549 <td class="value"><a href="#typeurl" class="typelink"><uri></a> 2550 [ , <a href="#typeurl" class="typelink"><uri></a> ]*</td> 2551 <td class="default">null</td> 2552 <td>A series of image URIs separated by commas.</td> 2553 </tr> 2554 <tr> 2555 <td class="propertyname">-fx-background-position</td> 2556 <td class="value"> 2557 <p><bg-position> [ , <bg-position> ]*<br> 2558 <strong>where</strong> <bg-position> = [<br> 2559 [ [ <a href="#typesize" class="typelink"><size></a> 2560 | left | center | right ] [ <a href="#typesize" class="typelink"><size></a> 2561 | top | center | bottom ]? ]<br> 2562 | [ [ center | [ left | right ] <a href="#typesize" 2563 class="typelink"><size></a>? 2564 ] || [ center | [ top | bottom ] <a href="#typesize" class="typelink"><size></a>? 2565 ]<br> 2566 ] </p> 2567 </td> 2568 <td class="default">0% 0%</td> 2569 <td> 2570 <p>A series of <bg-position> values separated by commas. Each 2571 bg-position item in the series applies to the corresponding image 2572 in the background-image series.</p> 2573 </td> 2574 </tr> 2575 <tr> 2576 <td class="propertyname">-fx-background-repeat</td> 2577 <td class="value"><repeat-style> [ , <repeat-style> ]*<br> 2578 <strong>where</strong> <repeat-style> = repeat-x | repeat-y | 2579 [repeat | space | round | stretch | no-repeat]{1,2}</td> 2580 <td class="default">repeat repeat</td> 2581 <td> 2582 <p>A series of <repeat-style> values separated by commas. Each 2583 repeat-style item in the series applies to the corresponding image 2584 in the background-image series.</p> 2585 </td> 2586 </tr> 2587 <tr> 2588 <td class="propertyname">-fx-background-size</td> 2589 <td class="value"><bg-size> [ , <bg-size> ]*<br> 2590 <bg-size> = [ <a href="#typesize" class="typelink"><size></a> 2591 | auto ]{1,2} | cover | contain | stretch</td> 2592 <td class="default">auto auto</td> 2593 <td> 2594 <p>A series of <bg-size> values separated by commas. Each 2595 bg-size item in the series applies to the corresponding image in 2596 the background-image series.</p> 2597 </td> 2598 </tr> 2599 <tr> 2600 <td colspan="4" class="propertyname"><em>STROKED BORDERS</em> (see <a 2601 href="http://www.w3.org/TR/css3-background/#borders" 2602 target="_blank">CSS Backgrounds and Borders Module Level 3: Borders</a>) 2603 <div><em>BORDER IMAGES</em> (see <a href="http://www.w3.org/TR/css3-background/#border-images" 2604 target="_blank">CSS 2605 Backgrounds and Borders Module Level 3: Border Images</a>)</div> 2606 </td> 2607 </tr> 2608 2609 <tr> 2610 <td class="propertyname">-fx-region-border</td> 2611 <td class="value">javafx.scene.layout.Border</td> 2612 <td class="default">null</td> 2613 <td>This cannot be set directly from CSS but is created from the property values of 2614 -fx-border-color, -fx-border-insets, -fx-border-radius, -fx-border-style, -fx-border-width, 2615 -fx-border-image-insets, -fx-border-image-repeat, -fx-border-image-slice, -fx-border-image-source, 2616 -fx-border-image-width</td> 2617 </tr> 2618 <tr> 2619 <td class="propertyname">-fx-border-color</td> 2620 <td class="value"><a href="#typepaint" class="typelink"><paint></a> 2621 | <a href="#typepaint" class="typelink"><paint></a> <a href="#typepaint" 2622 class="typelink"><paint></a> 2623 <a href="#typepaint" class="typelink"><paint></a> <a href="#typepaint" 2624 class="typelink"><paint></a> 2625 [ , [<a href="#typepaint" class="typelink"><paint></a> | <a href="#typepaint" 2626 class="typelink"><paint></a> 2627 <a href="#typepaint" class="typelink"><paint></a> <a href="#typepaint" 2628 class="typelink"><paint></a> 2629 <a href="#typepaint" class="typelink"><paint></a>] ]*</td> 2630 <td class="default">null</td> 2631 <td> 2632 <p>A series of paint values or sets of four paint values, separated 2633 by commas. For each item in the series, if a single paint value is 2634 specified, then that paint is used as the border for all sides of 2635 the region; and if a set of four paints is specified, they are 2636 used for the top, right, bottom, and left borders of the region, 2637 in that order. If the border is not rectangular, only the first 2638 paint value in the set is used.</p> 2639 </td> 2640 </tr> 2641 <tr> 2642 <td class="propertyname">-fx-border-insets</td> 2643 <td class="value"><a href="#typesize" class="typelink"><size></a> 2644 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2645 class="typelink"><size></a> 2646 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2647 class="typelink"><size></a> 2648 [ , [ <a href="#typesize" class="typelink"><size></a> | <a href="#typesize" 2649 class="typelink"><size></a> 2650 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2651 class="typelink"><size></a> 2652 <a href="#typesize" class="typelink"><size></a>] ]*</td> 2653 <td class="default">null</td> 2654 <td> 2655 <p>A series of inset or sets of four inset values, separated by 2656 commas. For each item in the series, a single inset value means 2657 that all insets are the same; and if a set of four inset values is 2658 specified, they are used for the top, right, bottom, and left 2659 edges of the region, in that order. Each item in the series of 2660 insets applies to the corresponding item in the series of border 2661 colors.</p> 2662 </td> 2663 </tr> 2664 <tr> 2665 <td class="propertyname">-fx-border-radius</td> 2666 <td class="value">[<a href="#typesize" class="typelink"><size></a>]{1,4} [ / [<a href="#typesize" class="typelink"><size></a>]{1,4} ]? 2667 [ , [<a href="#typesize" class="typelink"><size></a>]{1,4} [ / [<a href="#typesize" class="typelink"><size></a>]{1,4} ]? ]* 2668 <td class="default">null</td> 2669 <td> 2670 <p>Refer to CSS Backgrounds and Borders Module Level 3: <a href="http://www.w3.org/TR/css3-background/#the-border-radius">Curve Radii</a>. 2671 JavaFX supports only the short-hand syntax.</p> 2672 <p>Each comma-separated value or set of values in the series applies to the corresponding border color.</p> 2673 </td> 2674 </tr> 2675 <tr> 2676 <td class="propertyname">-fx-border-style</td> 2677 <td class="value"> 2678 <p><border-style> [ , <border-style> ]*<br> 2679 <strong>where</strong> <border-style> = <dash-style> 2680 [phase <number>]? [centered | inside | outside]? [line-join 2681 [miter <a href="#typenumber" class="typelink"><number></a> 2682 | bevel | round]]? [line-cap [square | butt | round]]?<br> 2683 <strong>where</strong> <dash-style> = [ none | solid | 2684 dotted | dashed | segments( <number>, <number> [, 2685 <number>]*) ]</p> 2686 </td> 2687 <td class="default">null</td> 2688 <td> 2689 <p>A series of border style values, separated by commas. Each item 2690 in the series applies to the corresponding item in the series of 2691 border colors.</p> 2692 <p>The <span style="font-style:italic;">segments</span> dash-style defines a sequence representing 2693 the lengths of the dash segments. Alternate entries in the 2694 sequence represent the lengths of the opaque and transparent 2695 segments of the dashes. This corresponds to the <span style="font-style:italic;">strokeDashArray</span> 2696 variable of Shape.</p> 2697 <p>The optional <span style="font-style:italic;">phase</span> parameter defines the point in the 2698 dashing pattern that will correspond to the beginning of the 2699 stroke. This corresponds to the <span style="font-style:italic;">strokeDashOffset</span> variable 2700 of Shape.</p> 2701 </td> 2702 </tr> 2703 <tr> 2704 <td class="propertyname">-fx-border-width</td> 2705 <td class="value"><a href="#typesize" class="typelink"><size></a> 2706 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2707 class="typelink"><size></a> 2708 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2709 class="typelink"><size></a> 2710 [ , [ <a href="#typesize" class="typelink"><size></a> | <a href="#typesize" 2711 class="typelink"><size></a> 2712 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2713 class="typelink"><size></a> 2714 <a href="#typesize" class="typelink"><size></a>] ]*</td> 2715 <td class="default">null</td> 2716 <td> 2717 <p>A series of width or sets of four width values, separated by 2718 commas. For each item in the series, a single width value means 2719 that all border widths are the same; and if a set of four width 2720 values is specified, they are used for the top, right, bottom, and 2721 left border widths, in that order. If the border is not 2722 rectangular, only the first width value is used. Each item in the 2723 series of widths applies to the corresponding item in the series 2724 of border colors. </p> 2725 </td> 2726 </tr> 2727 <tr> 2728 <td class="propertyname">-fx-border-image-source</td> 2729 <td class="value"><a href="#typeurl" class="typelink"><uri></a> 2730 [ , <a href="#typeurl" class="typelink"><uri></a> ]*</td> 2731 <td class="default">null</td> 2732 <td> 2733 <p>A series of image URIs, separated by commas.</p> 2734 </td> 2735 </tr> 2736 <tr> 2737 <td class="propertyname">-fx-border-image-insets</td> 2738 <td class="value"><a href="#typesize" class="typelink"><size></a> 2739 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2740 class="typelink"><size></a> 2741 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2742 class="typelink"><size></a> 2743 [ , [ <a href="#typesize" class="typelink"><size></a> | <a href="#typesize" 2744 class="typelink"><size></a> 2745 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2746 class="typelink"><size></a> 2747 <a href="#typesize" class="typelink"><size></a>] ]*</td> 2748 <td class="default">0 0 0 0</td> 2749 <td> 2750 <p>A series of inset or sets of four inset values, separated by 2751 commas. For each item in the series, a single inset value means 2752 that all insets are the same; and if a set of four inset values is 2753 specified, they are used for the top, right, bottom, and left 2754 edges of the region, in that order. Each item in the series of 2755 insets applies to the corresponding image in the series of border 2756 images.</p> 2757 </td> 2758 </tr> 2759 <tr> 2760 <td class="propertyname">-fx-border-image-repeat</td> 2761 <td class="value"><repeat-style> [ , <repeat-style> ]*<br> 2762 <strong>where</strong> <repeat-style> = repeat-x | repeat-y | 2763 [repeat | space | round | no-repeat]{1,2}</td> 2764 <td class="default">repeat repeat</td> 2765 <td> 2766 <p>A series of repeat-style values, separated by commas. Each item 2767 in the series applies to the corresponding image in the series of 2768 border images.</p> 2769 </td> 2770 </tr> 2771 <tr> 2772 <td class="propertyname">-fx-border-image-slice</td> 2773 <td class="value"> 2774 <p>[<a href="#typesize" class="typelink"><size></a> | <a href="#typesize" 2775 class="typelink"><size></a> 2776 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2777 class="typelink"><size></a> 2778 <a href="#typesize" class="typelink"><size></a> ] fill? [ , 2779 [ <a href="#typesize" class="typelink"><size></a> | <a href="#typesize" 2780 class="typelink"><size></a> 2781 <a 2782 href="#typesize" 2783 class="typelink"><size></a> 2784 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2785 class="typelink"><size></a> 2786 <a href="#typesize" class="typelink"><size></a> ] fill? ]*</p> 2787 </td> 2788 <td class="default">100%</td> 2789 <td> 2790 <p>A series of image slice values or sets of four values, separated 2791 by commas. Each item in the series applies to the corresponding 2792 image in the series of border images. For each item in the series, 2793 if four values are given, they specify the size of the top, right, 2794 bottom, and left slices. This effectively divides the image into 2795 nine regions: an upper left corner, a top edge, an upper right 2796 corner, a right edge, a lower right corner, a bottom edge, a lower 2797 left corner, a left edge and a middle. If one value is specified, 2798 this value is used for the slice values for all four edges. If 2799 'fill' is present, the middle slice is preserved, otherwise it is 2800 discarded. Percentage values may be used here, in which case the 2801 values are considered proportional to the source image.</p> 2802 </td> 2803 </tr> 2804 <tr> 2805 <td class="propertyname">-fx-border-image-width</td> 2806 <td class="value"><a href="#typesize" class="typelink"><size></a> 2807 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2808 class="typelink"><size></a> 2809 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2810 class="typelink"><size></a> 2811 [ , [ <a href="#typesize" class="typelink"><size></a> | <a href="#typesize" 2812 class="typelink"><size></a> 2813 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2814 class="typelink"><size></a> 2815 <a href="#typesize" class="typelink"><size></a>] ]*</td> 2816 <td class="default">1 1 1 1</td> 2817 <td> 2818 <p>A series of width or sets of four width values, separated by 2819 commas. For each item in the series, a single width value means 2820 that all border widths are the same; and if a set of four width 2821 values is specified, they are used for the top, right, bottom, and 2822 left border widths, in that order. If the border is not 2823 rectangular, only the first width value is used. Each item in the 2824 series of widths applies to the corresponding item in the series 2825 of border images. Percentage values may be used here, in which 2826 case the values are considered proportional to the border image 2827 area.</p> 2828 </td> 2829 </tr> 2830 <tr> 2831 <td colspan="4" class="propertyname"><span style="font-style:italic;">OTHER</span></td> 2832 </tr> 2833 <tr> 2834 <td class="propertyname">-fx-padding</td> 2835 <td class="value"><a href="#typesize" class="typelink"><size></a> 2836 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2837 class="typelink"><size></a> 2838 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 2839 class="typelink"><size></a> 2840 </td> 2841 <td class="default">0 0 0 0</td> 2842 <td> 2843 <p>A sets of four padding values, separated by commas. For each item 2844 in the series, a single padding value means that all padding are 2845 the same; and if a set of four padding values is specified, they 2846 are used for the top, right, bottom, and left edges of the region, 2847 in that order.</p> 2848 </td> 2849 </tr> 2850 <tr> 2851 <td class="propertyname">-fx-position-shape</td> 2852 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 2853 <td class="default">true</td> 2854 <td>If <strong>true</strong> means the shape centered within the 2855 region's width and height, otherwise the shape is positioned at its 2856 source position. Has no effect if a shape string is not specified.</td> 2857 </tr> 2858 <tr> 2859 <td class="propertyname">-fx-scale-shape</td> 2860 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 2861 <td class="default">true</td> 2862 <td>If <strong>true</strong> means the shape is scaled to fit the 2863 size of the region, otherwise the shape is at its source size, and 2864 its position depends on the value of the position-shape property. 2865 Has no effect if a shape string is not specified.</td> 2866 </tr> 2867 <tr> 2868 <td class="propertyname">-fx-shape</td> 2869 <td class="value">"<a href="#typestring" class="typelink"><string></a>"</td> 2870 <td class="default">null</td> 2871 <td>An SVG path string. By specifying a shape here the region takes on 2872 that shape instead of a rectangle or rounded rectangle. The syntax 2873 of this path string is specified in <a href="#references">[3]</a>.</td> 2874 </tr> 2875 <tr> 2876 <td class="propertyname">-fx-snap-to-pixel</td> 2877 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 2878 <td class="default">true</td> 2879 <td>Defines whether this region rounds position/spacing and ceils size 2880 values to pixel boundaries when laying out its children.</td> 2881 </tr> 2882 <tr> 2883 <td class="propertyname">-fx-region-background</td> 2884 <td class="value"> </td> 2885 <td class="default">null</td> 2886 <td>This property is set by specifying -fx-background-color and/or -fx-background-image. 2887 Optionally, the properties -fx-background-insets, -fx-background-radius, 2888 -fx-background-position, -fx-background-repeat, and -fx-background-size may also be set. 2889 In order to set the Region background to null, 2890 specify the style "-fx-background-color: null; -fx-background-image: null;". There is no 2891 shorthand notation for -fx-region-background at this time.</td> 2892 </tr> 2893 <tr> 2894 <td class="propertyname">-fx-region-border</td> 2895 <td class="value"> </td> 2896 <td class="default">null</td> 2897 <td>This property is set by specifying -fx-border-color and/or -fx-border-image. 2898 Optionally -fx-border-insets, -fx-border-radius, -fx-border-style, 2899 -fx-border-width, -fx-border-image-insets, -fx-border-image-repeat, 2900 -fx-border-image-slice and -fx-border-image-width may be specified. 2901 In order to set the Region background to null, 2902 specify the style "-fx-border-color: null; -fx-border-image: null;". There is no 2903 shorthand notation for -fx-region-border at this time.</td> 2904 </tr> 2905 <tr> 2906 <td class="propertyname">-fx-min-height, -fx-pref-height, -fx-max-height</td> 2907 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2908 <td class="default">-1</td> 2909 <td>Percentage values are not useful since the actual value would be 2910 computed from the width and/or height of the Regions's parent before 2911 the parent is laid out.</td> 2912 </tr> 2913 <tr> 2914 <td class="propertyname">-fx-min-width, -fx-pref-width, -fx-max-width</td> 2915 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2916 <td class="default">-1</td> 2917 <td>Percentage values are not useful since the actual value would be 2918 computed from the width and/or height of the Region's parent before 2919 the parent is laid out.</td> 2920 </tr> 2921 <tr> 2922 <td colspan="4" class="parents">Also has all properties of <a href="#parent">Parent</a><br> 2923 </td> 2924 </tr> 2925 </tbody> 2926 </table> 2927 <br> 2928 <h4><a name="stackpane" id="stackpane">StackPane</a></h4> 2929 <p class="styleclass">Style class: empty by default</p> 2930 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 2931 <thead> 2932 <tr> 2933 <th class="propertyname">CSS Property</th> 2934 <th class="value">Values</th> 2935 <th>Default</th> 2936 <th>Comments</th> 2937 </tr> 2938 </thead> 2939 <tbody> 2940 <tr> 2941 <td class="propertyname">-fx-alignment</td> 2942 <td class="value">[ top-left | top-center | top-right | center-left | 2943 center | center-right bottom-left | bottom-center | bottom-right | 2944 baseline-left | baseline-center | baseline-right ]</td> 2945 <td class="default">top-left</td> 2946 <td> </td> 2947 </tr> 2948 <tr> 2949 <td colspan="4" class="parents">Also has all properties of <a href="#pane">Pane</a></td> 2950 </tr> 2951 </tbody> 2952 </table> 2953 <h4><a name="tilepane" id="tilepane">TilePane</a></h4> 2954 <p class="styleclass">Style class: empty by default</p> 2955 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 2956 <thead> 2957 <tr> 2958 <th class="propertyname">CSS Property</th> 2959 <th class="value">Values</th> 2960 <th class="default">Default</th> 2961 <th>Comments</th> 2962 </tr> 2963 </thead> 2964 <tbody> 2965 <tr> 2966 <td class="propertyname">-fx-orientation</td> 2967 <td class="value">[ horizontal | vertical ]</td> 2968 <td class="default">horizontal</td> 2969 <td> </td> 2970 </tr> 2971 <tr> 2972 <td class="propertyname">-fx-pref-rows</td> 2973 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td> 2974 <td class="default">5</td> 2975 <td> </td> 2976 </tr> 2977 <tr> 2978 <td class="propertyname">-fx-pref-columns</td> 2979 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td> 2980 <td class="default">5</td> 2981 <td> </td> 2982 </tr> 2983 <tr> 2984 <td class="propertyname">-fx-pref-tile-width</td> 2985 <td class="value"><a href="#typenumber" class="typelink"><size></a></td> 2986 <td class="default">-1</td> 2987 <td> </td> 2988 </tr> 2989 <tr> 2990 <td class="propertyname">-fx-pref-tile-height</td> 2991 <td class="value"><a href="#typenumber" class="typelink"><size></a></td> 2992 <td class="default">-1</td> 2993 <td> </td> 2994 </tr> 2995 <tr> 2996 <td class="propertyname">-fx-hgap</td> 2997 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 2998 <td class="default">0</td> 2999 <td> </td> 3000 </tr> 3001 <tr> 3002 <td class="propertyname">-fx-vgap</td> 3003 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3004 <td class="default">0</td> 3005 <td> </td> 3006 </tr> 3007 <tr> 3008 <td class="propertyname">-fx-alignment</td> 3009 <td class="value">[ top-left | top-center | top-right | center-left | 3010 center | center-right bottom-left | bottom-center | bottom-right | 3011 baseline-left | baseline-center | baseline-right ]</td> 3012 <td class="default">top-left</td> 3013 <td> </td> 3014 </tr> 3015 <tr> 3016 <td class="propertyname">-fx-tile-alignment</td> 3017 <td class="value">[ top-left | top-center | top-right | center-left | 3018 center | center-right bottom-left | bottom-center | bottom-right | 3019 baseline-left | baseline-center | baseline-right ]</td> 3020 <td class="default">center</td> 3021 <td> </td> 3022 </tr> 3023 <tr> 3024 <td colspan="4" class="parents">Also has all properties of <a href="#pane">Pane</a></td> 3025 </tr> 3026 </tbody> 3027 </table> 3028 <h4><a name="vbox" id="vbox">VBox</a></h4> 3029 <p class="styleclass">Style class: empty by default</p> 3030 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3031 <thead> 3032 <tr> 3033 <th class="propertyname">CSS Property</th> 3034 <th class="value">Values</th> 3035 <th>Default</th> 3036 <th>Comments</th> 3037 </tr> 3038 </thead> 3039 <tbody> 3040 <tr> 3041 <td class="propertyname">-fx-spacing</td> 3042 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3043 <td>0</td> 3044 <td> </td> 3045 </tr> 3046 <tr> 3047 <td class="propertyname">-fx-alignment</td> 3048 <td class="value">[ top-left | top-center | top-right | center-left | 3049 center | center-right bottom-left | bottom-center | bottom-right | 3050 baseline-left | baseline-center | baseline-right ]</td> 3051 <td class="default">top-left</td> 3052 <td> </td> 3053 </tr> 3054 <tr> 3055 <td class="propertyname">-fx-fill-width</td> 3056 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 3057 <td class="default">true</td> 3058 <td> </td> 3059 </tr> 3060 <tr> 3061 <td colspan="4" class="parents">Also has all properties of <a href="#pane">Pane</a></td> 3062 </tr> 3063 </tbody> 3064 </table> 3065 3066 <table summary="property table" class="package" width="100%"> 3067 <tbody> 3068 <tr> 3069 <td>javafx.scene.media</td> 3070 </tr> 3071 </tbody> 3072 </table> 3073 <h4><a name="mediaview" id="mediaview">MediaView</a></h4> 3074 <p class="styleclass">Style class: media-view</p> 3075 3076 <table summary="property table" class="package" width="100%"> 3077 <tbody> 3078 <tr> 3079 <td>javafx.scene.shape</td> 3080 </tr> 3081 </tbody> 3082 </table> 3083 <h4><a name="shape" id="shape">Shape</a></h4> 3084 <p class="styleclass">Style class: empty by default</p> 3085 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3086 <thead> 3087 <tr> 3088 <th class="propertyname">CSS Property</th> 3089 <th class="value">Values</th> 3090 <th>Default</th> 3091 <th>Comments</th> 3092 </tr> 3093 </thead> 3094 <tbody> 3095 <tr> 3096 <td class="propertyname">-fx-fill</td> 3097 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 3098 <td>BLACK</td> 3099 <td> </td> 3100 </tr> 3101 <tr> 3102 <td class="propertyname">-fx-smooth</td> 3103 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 3104 <td>true</td> 3105 <td> </td> 3106 </tr> 3107 <tr> 3108 <td class="propertyname">-fx-stroke</td> 3109 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 3110 <td>null</td> 3111 <td> </td> 3112 </tr> 3113 <tr> 3114 <td class="propertyname">-fx-stroke-type</td> 3115 <td class="value">[ inside | outside | centered ]</td> 3116 <td>centered</td> 3117 <td> </td> 3118 </tr> 3119 <tr> 3120 <td class="propertyname">-fx-stroke-dash-array</td> 3121 <td class="value"><a href="#typesize" class="typelink"><size></a>[ 3122 <a href="#typesize" class="typelink"><size></a>]+</td> 3123 <td>see comment</td> 3124 <td>The initial value is that of an empty array, effectively a solid line. 3125 </tr> 3126 <tr> 3127 <td class="propertyname">-fx-stroke-dash-offset</td> 3128 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 3129 <td>0</td> 3130 <td> </td> 3131 </tr> 3132 <tr> 3133 <td class="propertyname">-fx-stroke-line-cap</td> 3134 <td class="value">[ square | butt | round ] </td> 3135 <td>square</td> 3136 <td> </td> 3137 </tr> 3138 <tr> 3139 <td class="propertyname">-fx-stroke-line-join</td> 3140 <td class="value">[ miter | bevel | round ] </td> 3141 <td>miter</td> 3142 <td> </td> 3143 </tr> 3144 <tr> 3145 <td class="propertyname">-fx-stroke-miter-limit</td> 3146 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 3147 <td>10</td> 3148 <td> </td> 3149 </tr> 3150 <tr> 3151 <td class="propertyname">-fx-stroke-width</td> 3152 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3153 <td>1</td> 3154 <td> </td> 3155 </tr> 3156 <tr> 3157 <td colspan="4" class="parents">Also has all properties of <a href="#node">Node</a></td> 3158 </tr> 3159 </tbody> 3160 </table> 3161 <h4><a name="arc" id="arc">Arc</a></h4> 3162 <p class="styleclass">Style class: empty by default</p> 3163 <p>The Arc node has all the properties of <a href="#shape">Shape</a> and <a 3164 href="#node">Node</a>.</p> 3165 <h4><a name="circle" id="circle">Circle</a></h4> 3166 <p class="styleclass">Style class: empty by default</p> 3167 <p>The Circle node has all the properties of <a href="#shape">Shape</a> and 3168 <a href="#node">Node</a>.</p> 3169 <h4><a name="cubiccurve" id="cubiccurve">CubicCurve</a></h4> 3170 <p class="styleclass">Style class: empty by default</p> 3171 <p>The CubicCurve node has all the properties of <a href="#shape">Shape</a> 3172 and <a href="#node">Node</a>.</p> 3173 <h4><a name="ellipse" id="ellipse">Ellipse</a></h4> 3174 <p class="styleclass">Style class: empty by default</p> 3175 <p>The Ellipse node has all the properties of <a href="#shape">Shape</a> 3176 and <a href="#node">Node</a>.</p> 3177 <h4><a name="line" id="line">Line</a></h4> 3178 <p class="styleclass">Style class: empty by default</p> 3179 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3180 <thead> 3181 <tr> 3182 <th class="propertyname">CSS Property</th> 3183 <th class="value">Values</th> 3184 <th>Default</th> 3185 <th>Comments</th> 3186 </tr> 3187 </thead> 3188 <tbody> 3189 <tr> 3190 <td class="propertyname">-fx-fill</td> 3191 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 3192 <td>null</td> 3193 <td></td> 3194 </tr> 3195 <tr> 3196 <td class="propertyname">-fx-stroke</td> 3197 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 3198 <td>black</td> 3199 <td></td> 3200 </tr> 3201 <tr> 3202 <td colspan="4" class="parents">Also has all properties of <a href="#node">Shape</a></td> 3203 </tr> 3204 </tbody> 3205 </table> 3206 <h4><a name="path" id="path">Path</a></h4> 3207 <p class="styleclass">Style class: empty by default</p> 3208 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3209 <thead> 3210 <tr> 3211 <th class="propertyname">CSS Property</th> 3212 <th class="value">Values</th> 3213 <th>Default</th> 3214 <th>Comments</th> 3215 </tr> 3216 </thead> 3217 <tbody> 3218 <tr> 3219 <td class="propertyname">-fx-fill</td> 3220 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 3221 <td>null</td> 3222 <td></td> 3223 </tr> 3224 <tr> 3225 <td class="propertyname">-fx-stroke</td> 3226 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 3227 <td>black</td> 3228 <td></td> 3229 </tr> 3230 <tr> 3231 <td colspan="4" class="parents">Also has all properties of <a href="#node">Shape</a></td> 3232 </tr> 3233 </tbody> 3234 </table> 3235 <h4><a name="polygon" id="polygon">Polygon</a></h4> 3236 <p class="styleclass">Style class: empty by default</p> 3237 <p>The Polygon node has all the properties of <a href="#shape">Shape</a> 3238 and <a href="#node">Node</a>.</p> 3239 <h4><a name="quadcurve" id="quadcurve">QuadCurve</a></h4> 3240 <p class="styleclass">Style class: empty by default</p> 3241 <p>The QuadCurve node has all the properties of <a href="#shape">Shape</a> 3242 and <a href="#node">Node</a>.</p> 3243 <h4><a name="rectangle" id="rectangle">Rectangle</a></h4> 3244 <p class="styleclass">Style class: empty by default</p> 3245 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3246 <thead> 3247 <tr> 3248 <th class="propertyname">CSS Property</th> 3249 <th class="value">Values</th> 3250 <th>Default</th> 3251 <th>Comments</th> 3252 </tr> 3253 </thead> 3254 <tbody> 3255 <tr> 3256 <td class="propertyname">-fx-arc-height</td> 3257 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3258 <td>0</td> 3259 <td> </td> 3260 </tr> 3261 <tr> 3262 <td class="propertyname">-fx-arc-width</td> 3263 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3264 <td>0</td> 3265 <td> </td> 3266 </tr> 3267 <tr> 3268 <td colspan="4" class="parents">Also has all properties of <a href="#shape">Shape</a></td> 3269 </tr> 3270 </tbody> 3271 </table> 3272 <h4><a name="svgpath" id="svgpath">SVGPath</a></h4> 3273 <p class="styleclass">Style class: empty by default</p> 3274 <p>The SVGPath node has all the properties of <a href="#shape">Shape</a> 3275 and <a href="#node">Node</a>.</p> 3276 <table summary="property table" class="package" width="100%"> 3277 <tbody> 3278 <tr> 3279 <td>javafx.scene.text</td> 3280 </tr> 3281 </tbody> 3282 </table> 3283 <h4><a name="text" id="text">Text</a></h4> 3284 <p class="styleclass">Style class: empty by default</p> 3285 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3286 <thead> 3287 <tr> 3288 <th class="propertyname">CSS Property</th> 3289 <th class="value">Values</th> 3290 <th>Default</th> 3291 <th>Comments</th> 3292 </tr> 3293 </thead> 3294 <tbody> 3295 <tr> 3296 <td class="propertyname">-fx-font</td> 3297 <td class="value"><a href="#typefont" class="typelink"><font></a></td> 3298 <td>Font.DEFAULT</td> 3299 <td>inherits</td> 3300 </tr> 3301 <tr> 3302 <td class="propertyname">-fx-font-smoothing-type</td> 3303 <td class="value">[ gray | lcd ] </td> 3304 <td>gray</td> 3305 <td> </td> 3306 </tr> 3307 <tr> 3308 <td class="propertyname">-fx-strikethrough</td> 3309 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 3310 <td>false</td> 3311 <td> </td> 3312 </tr> 3313 <tr> 3314 <td class="propertyname">-fx-text-alignment</td> 3315 <td class="value">[ left | center | right | justify ] </td> 3316 <td>left</td> 3317 <td>inherits</td> 3318 </tr> 3319 <tr> 3320 <td class="propertyname">-fx-text-origin</td> 3321 <td class="value">[ baseline | top | bottom ] </td> 3322 <td>baseline</td> 3323 <td> </td> 3324 </tr> 3325 <tr> 3326 <td class="propertyname">-fx-underline</td> 3327 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 3328 <td>false</td> 3329 <td> </td> 3330 </tr> 3331 <tr> 3332 <td colspan="4" class="parents">Also has <a href="#fontprops">font 3333 properties</a> and all properties of Shape</td> 3334 </tr> 3335 </tbody> 3336 </table> 3337 <table summary="property table" class="package" width="100%"> 3338 <tbody> 3339 <tr> 3340 <td>javafx.scene.web</td> 3341 </tr> 3342 </tbody> 3343 </table> 3344 <h4><a name="webview" id="webview">WebView</a></h4> 3345 <p class="styleclass">Style class: web-view</p> 3346 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3347 <thead> 3348 <tr> 3349 <th class="propertyname">CSS Property</th> 3350 <th class="value">Values</th> 3351 <th>Default</th> 3352 <th>Comments</th> 3353 </tr> 3354 </thead> 3355 <tbody> 3356 <tr> 3357 <td class="propertyname">-fx-context-menu-enabled</td> 3358 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 3359 <td>true</td> 3360 <td> </td> 3361 </tr> 3362 <tr> 3363 <td class="propertyname">-fx-font-smoothing-type</td> 3364 <td class="value">[ gray | lcd ] </td> 3365 <td>lcd</td> 3366 <td> </td> 3367 </tr> 3368 <tr> 3369 <td class="propertyname">-fx-font-scale</td> 3370 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 3371 <td>1</td> 3372 <td> </td> 3373 </tr> 3374 <tr> 3375 <td class="propertyname">-fx-min-width</td> 3376 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3377 <td>0</td> 3378 <td> </td> 3379 </tr> 3380 <tr> 3381 <td class="propertyname">-fx-min-height</td> 3382 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3383 <td>0</td> 3384 <td> </td> 3385 </tr> 3386 <tr> 3387 <td class="propertyname">-fx-pref-width</td> 3388 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3389 <td>800</td> 3390 <td> </td> 3391 </tr> 3392 <tr> 3393 <td class="propertyname">-fx-pref-height</td> 3394 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3395 <td>600</td> 3396 <td> </td> 3397 </tr> 3398 <tr> 3399 <td class="propertyname">-fx-max-width</td> 3400 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3401 <td>Double.MAX_VALUE</td> 3402 <td> </td> 3403 </tr> 3404 <tr> 3405 <td class="propertyname">-fx-max-height</td> 3406 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3407 <td>Double.MAX_VALUE</td> 3408 <td> </td> 3409 </tr> 3410 <tr> 3411 <td colspan="4" class="parents">Also has all properties of <a href="#parent">Parent</a></td> 3412 </tr> 3413 </tbody> 3414 </table> 3415 <!-- Controls --> 3416 <table summary="property table" class="package" width="100%"> 3417 <tbody> 3418 <tr> 3419 <td><a name="controls">javafx.scene.control</a></td> 3420 </tr> 3421 </tbody> 3422 </table> 3423 <p>Since JavaFX 2.0, the default skins for all controls support styling from 3424 CSS. This is accomplished by building the skins from layout objects called 3425 Regions. Most of the style properties for a control are provided by the 3426 Region objects that comprise the control's skin. Each Region object of the 3427 skin's substructure has its own style‑class so that it can be styled 3428 specifically. The control itself will sometimes provide CSS properties in 3429 addition to those provided by its Regions. Finally, controls may also 3430 define pseudo‑classes such as "vertical" and "horizontal" in addition to 3431 those defined by Node.</p> 3432 <p>With the following exceptions, controls are focus traversable. This means that <a href="#control">Control</a> sets the initial value 3433 of the focusTraversable property true; whereas in <a href="#node">Node</a>, the initial value of the focusTraversable property 3434 is false. The following controls are not focus traversable by default: Accordion, Cell, Label, MenuBar, 3435 ProgressBar, ProgressIndicator, ScrollBar, ScrollPane, Separator, SplitPane, ToolBar.</p> 3436 <h4><a name="accordion" id="accordion">Accordion</a></h4> 3437 <p class="styleclass">Style class: accordion</p> 3438 <p>The Accordion control has all the properties and pseudo‑classes of <a href="#control">Control</a></p> 3439 <h4>Substructure</h4> 3440 <ul> 3441 <li>first-titled-pane — the first TitledPane </li> 3442 </ul> 3443 <h4><a name="button" id="button">Button</a></h4> 3444 <p class="styleclass">Style class: button</p> 3445 <p>The Button control has all the properties of <a href="#buttonbase">ButtonBase</a></p> 3446 <h4>Pseudo-classes</h4> 3447 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3448 <thead> 3449 <tr> 3450 <th class="propertyname">CSS Pseudo-class</th> 3451 <th>Comments</th> 3452 </tr> 3453 </thead> 3454 <tbody> 3455 <tr> 3456 <td class="propertyname">cancel</td> 3457 <td>applies if this Button receives VK_ESC if the event is not 3458 otherwise consumed</td> 3459 </tr> 3460 <tr> 3461 <td class="propertyname">default</td> 3462 <td>applies if this Button receives VK_ENTER if the event is not 3463 otherwise consumed</td> 3464 </tr> 3465 <tr> 3466 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#buttonbase">ButtonBase</a></td> 3467 </tr> 3468 </tbody> 3469 </table> 3470 <h4><a name="buttonbase" id="buttonbase">ButtonBase</a></h4> 3471 <p>The ButtonBase control has all the properties of <a href="#labeled">Labeled</a></p> 3472 <h4>Pseudo-classes</h4> 3473 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3474 <thead> 3475 <tr> 3476 <th class="propertyname">CSS Pseudo-class</th> 3477 <th>Comments</th> 3478 </tr> 3479 </thead> 3480 <tbody> 3481 <tr> 3482 <td class="propertyname">armed</td> 3483 <td>applies when the <strong>armed</strong> variable is true</td> 3484 </tr> 3485 <tr> 3486 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#labeled">Labeled</a></td> 3487 </tr> 3488 </tbody> 3489 </table> 3490 <h4><a name="cell" id="cell">Cell</a></h4> 3491 <p class="styleclass">Style class: cell</p> 3492 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3493 <thead> 3494 <tr> 3495 <th class="propertyname">CSS Property</th> 3496 <th class="value">Values</th> 3497 <th>Default</th> 3498 <th>Comments</th> 3499 </tr> 3500 </thead> 3501 <tbody> 3502 <tr> 3503 <td class="propertyname">-fx-cell-size</td> 3504 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3505 <td>24</td> 3506 <td>The cell size. For vertical ListView or a TreeView or TableView 3507 this is the height, for a horizontal ListView this is the width.</td> 3508 </tr> 3509 <tr> 3510 <td colspan="4" class="parents">The Cell control has all the 3511 properties of <a href="#labeled">Labeled</a></td> 3512 </tr> 3513 </tbody> 3514 </table> 3515 <h4>Pseudo-classes</h4> 3516 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3517 <thead> 3518 <tr> 3519 <th class="propertyname">CSS Pseudo-class</th> 3520 <th>Comments</th> 3521 </tr> 3522 </thead> 3523 <tbody> 3524 <tr> 3525 <td class="propertyname">empty</td> 3526 <td>applies when the <strong>empty </strong>variable is true</td> 3527 </tr> 3528 <tr> 3529 <td class="propertyname">filled</td> 3530 <td>applies when the <strong>empty</strong> variable is false</td> 3531 </tr> 3532 <tr> 3533 <td class="propertyname">selected</td> 3534 <td>applies when the <strong>selected</strong> variable is true</td> 3535 </tr> 3536 <tr> 3537 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#labeled">Labeled</a></td> 3538 </tr> 3539 </tbody> 3540 </table> 3541 <h4>Substructure</h4> 3542 <ul> 3543 <li>text — a Labeled</li> 3544 </ul> 3545 <h4><a name="checkbox" id="checkbox">CheckBox</a></h4> 3546 <p class="styleclass">Style class: check-box</p> 3547 <p>The CheckBox control has all the properties of <a href="#buttonbase">ButtonBase</a></p> 3548 <h4>Pseudo-classes</h4> 3549 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3550 <thead> 3551 <tr> 3552 <th class="propertyname">CSS Pseudo-class</th> 3553 <th>Comments</th> 3554 </tr> 3555 </thead> 3556 <tbody> 3557 <tr> 3558 <td class="propertyname">selected</td> 3559 <td>applies when the <strong>selected</strong> variable is true</td> 3560 </tr> 3561 <tr> 3562 <td class="propertyname">determinate</td> 3563 <td>applies when the <strong>indeterminate </strong>variable is 3564 false</td> 3565 </tr> 3566 <tr> 3567 <td class="propertyname">indeterminate</td> 3568 <td>applies when the <strong>indeterminate </strong>variable is true</td> 3569 </tr> 3570 <tr> 3571 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#buttonbase">ButtonBase</a></td> 3572 </tr> 3573 </tbody> 3574 </table> 3575 <h4>Substructure</h4> 3576 <ul> 3577 <li>box — a StackPane 3578 <ul> 3579 <li>mark — a StackPane</li> 3580 </ul> 3581 </li> 3582 </ul> 3583 <h4><a name="checkmenuitem" id="checkmenuitem">CheckMenuItem</a></h4> 3584 <h4>Pseudo-classes</h4> 3585 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3586 <thead> 3587 <tr> 3588 <th class="propertyname">CSS Pseudo-class</th> 3589 <th>Comments</th> 3590 </tr> 3591 </thead> 3592 <tbody> 3593 <tr> 3594 <td class="propertyname">selected</td> 3595 <td>applies if this item is selected</td> 3596 </tr> 3597 </tbody> 3598 </table> 3599 <h4><a name="choicebox" id="choicebox">ChoiceBox</a></h4> 3600 <p class="styleclass">Style class: choice-box</p> 3601 <p>The ChoiceBox control has all the properties and pseudo‑classes of <a href="#control">Control</a></p> 3602 <h4>Substructure</h4> 3603 <ul> 3604 <li>open-button — Region 3605 <ul> 3606 <li>arrow — Region </li> 3607 </ul> 3608 </li> 3609 </ul> 3610 <h4><a name="colorpicker" id="colorpicker">ColorPicker</a></h4> 3611 <p class="styleclass">Style class: color-picker</p> 3612 <p>The ColorPicker control has all the properties and pseudo‑classes of <a href="#comboboxbase">ComboBoxBase</a></p> 3613 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3614 <thead> 3615 <tr> 3616 <th class="propertyname">CSS Property</th> 3617 <th class="value">Values</th> 3618 <th>Default</th> 3619 <th>Comments</th> 3620 </tr> 3621 </thead> 3622 <tbody> 3623 <tr> 3624 <td class="propertyname">-fx-color-label-visible</td> 3625 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 3626 <td>true</td> 3627 <td> </td> 3628 </tr> 3629 <tr> 3630 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td> 3631 </tr> 3632 </tbody> 3633 </table> 3634 <h4>Substructure</h4> 3635 <ul> 3636 <li>color display node — Label</li> 3637 <li>arrow-button — StackPane 3638 <ul> 3639 <li>arrow — StackPane</li> 3640 </ul> 3641 </li> 3642 </ul> 3643 <h4><a name="combobox" id="combobox">ComboBox</a></h4> 3644 <p class="styleclass">Style class: combo-box</p> 3645 <p>The ComboBox control has all the properties and pseudo‑classes of <a href="#comboboxbase">ComboBoxBase</a></p> 3646 <h4>Substructure</h4> 3647 <ul> 3648 <li>list-cell — a ListCell instance used to show the selection in the 3649 button area of a non-editable ComboBox</li> 3650 <li>text-input — a TextField instance used to show the selection and 3651 allow input in the button area of an editable ComboBox</li> 3652 <li>combo-box-popup — a PopupControl that is displayed when the button is 3653 pressed 3654 <ul> 3655 <li>list-view — a ListView 3656 <ul> 3657 <li>list-cell — a ListCell</li> 3658 </ul> 3659 </li> 3660 </ul> 3661 </li> 3662 </ul> 3663 <h4><a name="comboboxbase" id="comboboxbase">ComboBoxBase</a></h4> 3664 <p class="styleclass">Style class: combo-box-base</p> 3665 <p>The ComboBoxBase control has all the properties of <a href="#control">Control</a></p> 3666 <h4>Substructure</h4> 3667 <ul> 3668 <li>arrow-button — a StackPane 3669 <ul> 3670 <li>arrow — a StackPane </li> 3671 </ul> 3672 </li> 3673 </ul> 3674 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3675 <thead> 3676 <tr> 3677 <th class="propertyname">CSS Pseudo-class</th> 3678 <th>Comments</th> 3679 </tr> 3680 </thead> 3681 <tbody> 3682 <tr> 3683 <td class="propertyname">editable</td> 3684 <td>applies when the <strong>editable </strong>variable is true</td> 3685 </tr> 3686 <tr> 3687 <td class="propertyname">showing</td> 3688 <td>applies when the <strong>showing </strong>variable is true</td> 3689 </tr> 3690 <tr> 3691 <td class="propertyname">armed</td> 3692 <td>applies when the <strong>armed </strong>variable is true</td> 3693 </tr> 3694 </tbody> 3695 </table> 3696 <h4><a name="contextmenu" id="contextmenu">ContextMenu</a></h4> 3697 <p class="styleclass">Style class: context-menu</p> 3698 <p>The ContextMenu class has all the properties of <a href="#poupucontrol">PopupControl</a>.</p> 3699 The selector for a ContextMenu may be made more specific by using the selector for the control from which the ContextMenu was shown. 3700 For example, 3701 <p class="example">.choice-box > .context-menu { ... }</p> 3702 <h4>Substructure</h4> 3703 <ul> 3704 <li>context-menu — a Region 3705 <ul> 3706 <li>scroll-arrow — a StackPane 3707 <ul><li>menu-up-arrow — a StackPane</li></ul> 3708 </li> 3709 <li>scroll-arrow — a StackPane 3710 <ul><li>menu-down-arrow — a StackPane</li></ul> 3711 </li> 3712 <li>* — a VBox 3713 <ul> 3714 <li>menu-item — a Region 3715 <ul> 3716 <li>label — a Label</li> 3717 <li>left-container — a StackPane (for radio buttons and check boxes)</li> 3718 <li>right-container — a StackPane (for pull-right menus) 3719 <ul> 3720 <li>arrow — a Region</li> 3721 </ul> 3722 </li> 3723 <li>graphic-container — a StackPane (for MenuItem graphic)</li> 3724 </ul> 3725 </li> 3726 </ul> 3727 </li> 3728 </ul> 3729 </li> 3730 </ul> 3731 <h4><a name="control" id="control">Control</a></h4> 3732 <p>The Control class has all the properties of <a href="#region">Region</a></p> 3733 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3734 <thead> 3735 <tr> 3736 <th class="propertyname">CSS Property</th> 3737 <th class="value">Values</th> 3738 <th>Default</th> 3739 <th>Comments</th> 3740 </tr> 3741 </thead> 3742 <tbody> 3743 <tr> 3744 <td class="propertyname">-fx-skin</td> 3745 <td class="value"><a href="#typestring" class="typelink"><string></a></td> 3746 <td>null</td> 3747 <td>The class name of the Control's Skin.</td> 3748 </tr> 3749 <tr> 3750 <td class="propertyname">-fx-focus-traversable</td> 3751 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 3752 <td class="default">true</td> 3753 <td>Control sets the default value of the focusTraversable property to true. The default value 3754 of the focusTraversable property for the following controls is false: Accordion, Cell, Label, MenuBar, 3755 ProgressBar, ProgressIndicator, ScrollBar, ScrollPane, Separator, SplitPane, ToolBar.</td> 3756 </tr> 3757 </tbody> 3758 </table> 3759 <h4><a name="datepicker" id="datepicker">DatePicker</a></h4> 3760 <p class="styleclass">Style class: date-picker</p> 3761 <p>The DatePicker control has all the properties and pseudo‑classes of <a href="#comboboxbase">ComboBoxBase</a></p> 3762 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3763 <thead> 3764 <tr> 3765 <th class="propertyname">CSS Property</th> 3766 <th class="value">Values</th> 3767 <th>Default</th> 3768 <th>Comments</th> 3769 </tr> 3770 </thead> 3771 <tbody> 3772 <tr> 3773 <td class="propertyname">-fx-show-week-numbers</td> 3774 <td class="value"><a href="#typeboolean" class="typeboolean"><boolean></a></td> 3775 <td>true if the resource bundle property "DatePicker.showWeekNumbers" contains the country code.</td> 3776 <td> </td> 3777 </tr> 3778 <tr> 3779 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td> 3780 </tr> 3781 </tbody> 3782 </table> 3783 <h4>Substructure</h4> 3784 <ul> 3785 <li>date-picker-display-node — TextField</li> 3786 </ul> 3787 3788 <h4><a name="htmleditor" id="htmleditor">HTMLEditor</a></h4> 3789 <p class="styleclass">Style class: html-editor</p> 3790 <p>The Hyperlink control has all the properties of <a href="#control">Control</a>.</p> 3791 <h4>Substructure</h4> 3792 <ul> 3793 <li>grid — GridPane (contains WebView) 3794 <ul> 3795 <li>top-toolbar — ToolBar 3796 <ul> 3797 <li>html-editor-cut — <a href="#togglebutton">ToggleButton</a></li> 3798 <li>html-editor-copy — <a href="#togglebutton">ToggleButton</a></li> 3799 <li>html-editor-paste — <a href="#togglebutton">ToggleButton</a></li> 3800 <li>html-editor-align-left — <a href="#togglebutton">ToggleButton</a></li> 3801 <li>html-editor-align-right — <a href="#togglebutton">ToggleButton</a></li> 3802 <li>html-editor-align-center — <a href="#togglebutton">ToggleButton</a></li> 3803 <li>html-editor-align-justify — <a href="#togglebutton">ToggleButton</a></li> 3804 <li>html-editor-outdent — <a href="#togglebutton">ToggleButton</a></li> 3805 <li>html-editor-indent — <a href="#togglebutton">ToggleButton</a></li> 3806 <li>html-editor-bullets — <a href="#togglebutton">ToggleButton</a></li> 3807 <li>html-editor-numbers — <a href="#togglebutton">ToggleButton</a></li> 3808 </ul> 3809 </li> 3810 <li>web-view — <a href="#webview">WebView</a></li> 3811 <li>bottom-toolbar — ToolBar 3812 <ul> 3813 <li>format-menu-button — ComboBox</li> 3814 <li>font-family-menu-button — <a href="#combobox">ComboBox</a></li> 3815 <li>font-size-menu-button — <a href="#combobox">ComboBox</a></li> 3816 <li>html-editor-bold — <a href="#togglebutton">ToggleButton</a></li> 3817 <li>html-editor-italic — <a href="#togglebutton">ToggleButton</a></li> 3818 <li>html-editor-underline — <a href="#togglebutton">ToggleButton</a></li> 3819 <li>html-editor-strike — <a href="#togglebutton">ToggleButton</a></li> 3820 <li>html-editor-hr — <a href="#togglebutton">ToggleButton</a></li> 3821 <li>html-editor-foreground — <a href="#colorpicker">ColorPicker</a></li> 3822 <li>html-editor-background — <a href="#colorpicker">ColorPicker</a></li> 3823 3824 </ul> 3825 </li> 3826 </ul> 3827 </li> 3828 </ul> 3829 <h4><a name="hyperlink" id="hyperlink">Hyperlink</a></h4> 3830 <p class="styleclass">Style class: hyperlink</p> 3831 <p>The Hyperlink control has all the properties of <a href="#buttonbase">ButtonBase</a>.</p> 3832 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3833 <thead> 3834 <tr> 3835 <th class="propertyname">CSS Property</th> 3836 <th class="value">Values</th> 3837 <th>Default</th> 3838 <th>Comments</th> 3839 </tr> 3840 </thead> 3841 <tbody> 3842 <tr> 3843 <td class="propertyname">-fx-cursor</td> 3844 <td class="value">[ null | crosshair | default | hand | move | 3845 e-resize | h-resize | ne-resize | nw-resize | n-resize | se-resize | 3846 sw-resize | s-resize | w-resize | v-resize | text | wait ] | <a href="#typeurl" 3847 class="typelink"><url></a></td> 3848 <td class="default">hand</td> 3849 <td>inherits </td> 3850 </tr> 3851 </tbody> 3852 </table> 3853 <h4>Pseudo-classes</h4> 3854 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3855 <thead> 3856 <tr> 3857 <th class="propertyname">CSS Pseudo-class</th> 3858 <th>Comments</th> 3859 </tr> 3860 </thead> 3861 <tbody> 3862 <tr> 3863 <td class="propertyname">visited</td> 3864 <td>applies when the <strong>visited </strong>variable is true</td> 3865 </tr> 3866 <tr> 3867 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#buttonbase">ButtonBase</a></td> 3868 </tr> 3869 </tbody> 3870 </table> 3871 <h4>Substructure</h4> 3872 <ul> 3873 <li>label — Label</li> 3874 </ul> 3875 <h4><a name="indexedcell" id="indexedcell">IndexedCell</a></h4> 3876 <p class="styleclass">Style class: indexed-cell</p> 3877 <p>The IndexedCell control has all the properties of <a href="#cell">Cell</a>.</p> 3878 <h4>Pseudo-classes</h4> 3879 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3880 <thead> 3881 <tr> 3882 <th class="propertyname">CSS Pseudo-class</th> 3883 <th>Comments</th> 3884 </tr> 3885 </thead> 3886 <tbody> 3887 <tr> 3888 <td class="propertyname">even</td> 3889 <td>applies if this cell's index is even</td> 3890 </tr> 3891 <tr> 3892 <td class="propertyname">odd</td> 3893 <td>applies if this cell's index is odd</td> 3894 </tr> 3895 <tr> 3896 <td colspan="4" class="parents">Also has all pseudo‑classes of <a href="#cell">Cell</a></td> 3897 </tr> 3898 </tbody> 3899 </table> 3900 <h4><a name="label" id="label">Label</a></h4> 3901 <p class="styleclass">Style class: label</p> 3902 <p>Label has all the properties and pseudo‑class state of <a href="#labeled">Labeled</a></p> 3903 <h4><a name="labeled" id="labeled">Labeled</a></h4> 3904 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 3905 <thead> 3906 <tr> 3907 <th class="propertyname">CSS Property</th> 3908 <th class="value">Values</th> 3909 <th>Default</th> 3910 <th>Comments</th> 3911 </tr> 3912 </thead> 3913 <tbody> 3914 <tr> 3915 <td class="propertyname">-fx-alignment</td> 3916 <td class="value">[ top-left | top-center | top-right | center-left | 3917 center | center-right bottom-left | bottom-center | bottom-right | 3918 baseline-left | baseline-center | baseline-right ]</td> 3919 <td class="default">center-left</td> 3920 <td> </td> 3921 </tr> 3922 <tr> 3923 <td class="propertyname">-fx-text-alignment</td> 3924 <td class="value">[ left | center | right | justify ]</td> 3925 <td>left</td> 3926 <td>text-align from CSS spec maps to textAlignment in JavaFX</td> 3927 </tr> 3928 <tr> 3929 <td class="propertyname">-fx-text-overrun</td> 3930 <td class="value">[ center-ellipsis | center-word-ellipsis | clip | 3931 ellipsis | leading-ellipsis | leading-word-ellipsis | word-ellipsis 3932 ]</td> 3933 <td>ellipsis</td> 3934 <td> </td> 3935 </tr> 3936 <tr> 3937 <td class="propertyname">-fx-wrap-text</td> 3938 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 3939 <td>false</td> 3940 <td> </td> 3941 </tr> 3942 <tr> 3943 <td class="propertyname">-fx-font</td> 3944 <td class="value"><a href="#typefont" class="typelink"><font></a></td> 3945 <td>platform dependent</td> 3946 <td>inherits<br>The initial value is that of Font.getDefault()</td> 3947 </tr> 3948 <tr> 3949 <td class="propertyname">-fx-underline</td> 3950 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 3951 <td>false</td> 3952 <td> </td> 3953 </tr> 3954 <tr> 3955 <td class="propertyname">-fx-graphic</td> 3956 <td class="value"><a href="#typeurl" class="typelink"><uri></a></td> 3957 <td>null</td> 3958 <td> </td> 3959 </tr> 3960 <tr> 3961 <td class="propertyname">-fx-content-display</td> 3962 <td class="value">[ top | right | bottom | left | center | right | 3963 graphic-only | text-only ]</td> 3964 <td>left</td> 3965 <td> </td> 3966 </tr> 3967 <tr> 3968 <td class="propertyname">-fx-graphic-text-gap</td> 3969 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 3970 <td>4</td> 3971 <td> </td> 3972 </tr> 3973 <tr> 3974 <td class="propertyname">-fx-label-padding</td> 3975 <td class="value"><a href="#typesize" class="typelink"><size></a> 3976 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 3977 class="typelink"><size></a> 3978 <a href="#typesize" class="typelink"><size></a> <a href="#typesize" 3979 class="typelink"><size></a></td> 3980 <td>[0,0,0,0]</td> 3981 <td> </td> 3982 </tr> 3983 <tr> 3984 <td class="propertyname">-fx-text-fill</td> 3985 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 3986 <td>black</td> 3987 <td> </td> 3988 </tr> 3989 <tr> 3990 <td class="propertyname">-fx-ellipsis-string</td> 3991 <td class="value"><a href="#typestring" class="typelink"><string></a></td> 3992 <td>...</td> 3993 <td> </td> 3994 </tr> 3995 <tr> 3996 <td colspan="4" class="parents">Also has properties of <a href="#control">Control</a></td> 3997 </tr> 3998 </tbody> 3999 </table> 4000 <h4><a name="listcell" id="listcell">ListCell</a></h4> 4001 <p class="styleclass">Style class: list-cell</p> 4002 <p>The ListCell control has all the settable properties and pseudo‑classes 4003 of <a href="#indexedcell">IndexedCell</a>.</p> 4004 <h4><a name="listview" id="listview">ListView</a></h4> 4005 <p class="styleclass">Style class: list-view</p> 4006 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4007 <thead> 4008 <tr> 4009 <th class="propertyname">CSS Property</th> 4010 <th class="value">Values</th> 4011 <th>Default</th> 4012 <th>Comments</th> 4013 </tr> 4014 </thead> 4015 <tbody> 4016 <tr> 4017 <td class="propertyname">-fx-orientation</td> 4018 <td class="value">[ horizontal | vertical ]</td> 4019 <td class="default">vertical</td> 4020 <td> </td> 4021 </tr> 4022 </tbody> 4023 </table> 4024 <h4>Pseudo-classes</h4> 4025 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4026 <thead> 4027 <tr> 4028 <th class="propertyname">CSS Pseudo-class</th> 4029 <th>Comments</th> 4030 </tr> 4031 </thead> 4032 <tbody> 4033 <tr> 4034 <td class="propertyname">horizontal</td> 4035 <td>applies if this ListView is horizontal</td> 4036 </tr> 4037 <tr> 4038 <td class="propertyname">vertical</td> 4039 <td>applies if this ListView is vertical</td> 4040 </tr> 4041 </tbody> 4042 </table> 4043 <h4>Substructure</h4> 4044 <ul>.list-view — the ListView<T> 4045 <ul>.virtual-flow — VirtualFlow 4046 <ul>.clipped-container — <a href="#region">Region</a> 4047 <ul>.sheet — Group 4048 <ul>.cell.indexed-cell.list-cell — <a href="#listcell">ListCell<T></a></ul> 4049 .scroll-bar — <a href="#scrollbar">ScrollBar</a> 4050 </ul> 4051 </ul> 4052 </ul> 4053 </ul> 4054 4055 <h4><a name="menu" id="menu">Menu</a></h4> 4056 <p class="styleclass">Style class: menu</p> 4057 <h4>Pseudo-classes</h4> 4058 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4059 <thead> 4060 <tr> 4061 <th class="propertyname">CSS Pseudo-class</th> 4062 <th>Comments</th> 4063 </tr> 4064 </thead> 4065 <tbody> 4066 <tr> 4067 <td class="propertyname">showing</td> 4068 <td>applies if this Menu is showing</td> 4069 </tr> 4070 <tr> 4071 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td> 4072 </tr> 4073 </tbody> 4074 </table> 4075 <h4><a name="menubar" id="menubar">MenuBar</a></h4> 4076 <p class="styleclass">Style class: menu-bar</p> 4077 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4078 <thead> 4079 <tr> 4080 <th class="propertyname">CSS Property</th> 4081 <th class="value">Values</th> 4082 <th>Default</th> 4083 <th>Comments</th> 4084 </tr> 4085 </thead> 4086 <tbody> 4087 <tr> 4088 <td class="propertyname">-fx-use-system-menu-bar</td> 4089 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4090 <td>false</td> 4091 <td> </td> 4092 </tr> 4093 <tr> 4094 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td> 4095 </tr> 4096 </tbody> 4097 </table> 4098 <p>MenuBar has all the pseudo‑class states of <a href="#control">Control</a></p> 4099 <h4>Substructure</h4> 4100 <ul> 4101 <li>menu</li> 4102 </ul> 4103 <h4><a name="menubutton" id="menubutton">MenuButton</a></h4> 4104 <p class="styleclass">Style class: menu-button</p> 4105 <p>The MenuButton control has all the properties of <a href="#buttonbase">ButtonBase</a></p> 4106 <h4>Pseudo-classes</h4> 4107 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4108 <thead> 4109 <tr> 4110 <th class="propertyname">CSS Pseudo-class</th> 4111 <th>Comments</th> 4112 </tr> 4113 </thead> 4114 <tbody> 4115 <tr> 4116 <td class="propertyname">openvertically</td> 4117 <td>applies if the <strong>openVertically</strong> variable is true</td> 4118 </tr> 4119 <tr> 4120 <td class="propertyname">showing</td> 4121 <td>applies if the <strong>showing</strong> variable is true</td> 4122 </tr> 4123 <tr> 4124 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#node">Node</a></td> 4125 </tr> 4126 </tbody> 4127 </table> 4128 <h4><a name="menuitem" id="menuitem">MenuItem</a></h4> 4129 <p class="styleclass">Style class: menu-item</p> 4130 <h4><a name="pagination" id="pagination">Pagination</a></h4> 4131 <p class="styleclass">Style class: pagination</p> 4132 <p>Pagination has all the pseudo‑class states of <a href="#control">Control</a></p> 4133 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4134 <thead> 4135 <tr> 4136 <th class="propertyname">CSS Property</th> 4137 <th class="value">Values</th> 4138 <th>Default</th> 4139 <th>Comments</th> 4140 </tr> 4141 </thead> 4142 <tbody> 4143 <tr> 4144 <td class="propertyname">-fx-max-page-indicator-count</td> 4145 <td class="value"><a href="#typesize" class="typelink"><number></a></td> 4146 <td>10</td> 4147 <td> </td> 4148 </tr> 4149 <tr> 4150 <td class="propertyname">-fx-arrows-visible</td> 4151 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4152 <td>true</td> 4153 <td> </td> 4154 </tr> 4155 <tr> 4156 <td class="propertyname">-fx-tooltip-visible</td> 4157 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4158 <td>false</td> 4159 <td>When set to true, a tooltip which shows the page number is set on the page indicators. 4160 This property controls whether or not the tooltip is visible on the page indicators and <em>does 4161 not</em> affect the visibility of the tooltip set or installed on the Pagination control itself.</td> 4162 </tr> 4163 <tr> 4164 <td class="propertyname">-fx-page-information-visible</td> 4165 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4166 <td>true</td> 4167 <td> </td> 4168 </tr> 4169 <tr> 4170 <td class="propertyname">-fx-page-information-alignment</td> 4171 <td class="value">[ top | bottom | left | right ]</td> 4172 <td>bottom</td> 4173 <td> </td> 4174 </tr> 4175 <tr> 4176 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td> 4177 </tr> 4178 </tbody> 4179 </table> 4180 <h4>Substructure</h4> 4181 <ul> 4182 <li>page — StackPane</li> 4183 <li>pagination-control — StackPane 4184 <ul> 4185 <li>leftArrowButton — Button 4186 <ul> 4187 <li>leftArrow — StackPane</li> 4188 </ul> 4189 </li> 4190 <li>rightArrowButton — Button 4191 <ul> 4192 <li>rightArrow — StackPane</li> 4193 </ul> 4194 </li> 4195 <li>bullet-button — ToggleButton</li> 4196 <li>number-button — ToogleButton</li> 4197 <li>page-information — Label</li> 4198 </ul> 4199 </li> 4200 </ul> 4201 <h4><a name="passwordfield" id="passwordfield">PasswordField</a></h4> 4202 <p class="styleclass">Style class: password-field</p> 4203 <p>The PasswordField control has all the properties of <a href="#textfield">TextField</a></p> 4204 <h4><a name="popupcontrol" id="popupcontrol">PopupControl</a></h4> 4205 <p>PopupControl is also a <a href="#popupwindow">PopupWindow</a> and as such, its root node has the 4206 style-class .root.popup</p> 4207 <h4><a name="progressbar" id="progressbar">ProgressBar</a></h4> 4208 <p class="styleclass">Style class: progress-bar</p> 4209 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4210 <thead> 4211 <tr> 4212 <th class="propertyname">CSS Property</th> 4213 <th class="value">Values</th> 4214 <th>Default</th> 4215 <th>Comments</th> 4216 </tr> 4217 </thead> 4218 <tbody> 4219 <tr> 4220 <td class="propertyname">-fx-indeterminate-bar-length</td> 4221 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 4222 <td>60</td> 4223 <td> </td> 4224 </tr> 4225 <tr> 4226 <td class="propertyname">-fx-indeterminate-bar-escape</td> 4227 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4228 <td>true</td> 4229 <td> </td> 4230 </tr> 4231 <tr> 4232 <td class="propertyname">-fx-indeterminate-bar-flip</td> 4233 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4234 <td>true</td> 4235 <td> </td> 4236 </tr> 4237 <tr> 4238 <td class="propertyname">-fx-indeterminate-bar-animation-time</td> 4239 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 4240 <td>2.0</td> 4241 <td> </td> 4242 </tr> 4243 <tr> 4244 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td> 4245 </tr> 4246 </tbody> 4247 </table> 4248 <h4>Pseudo-classes</h4> 4249 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4250 <thead> 4251 <tr> 4252 <th class="propertyname">CSS Pseudo-class</th> 4253 <th>Comments</th> 4254 </tr> 4255 </thead> 4256 <tbody> 4257 <tr> 4258 <td class="propertyname">determinate</td> 4259 <td>applies if the <strong>indeterminate</strong> variable is false</td> 4260 </tr> 4261 <tr> 4262 <td class="propertyname">indetermindate</td> 4263 <td>applies if the <strong>indeterminate</strong> variable is true</td> 4264 </tr> 4265 <tr> 4266 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td> 4267 </tr> 4268 </tbody> 4269 </table> 4270 <h4>Substructure</h4> 4271 <ul> 4272 <li>track — StackPane 4273 <ul> 4274 <li>bar — Region</li> 4275 </ul> 4276 </li> 4277 </ul> 4278 <h4><a name="progressindicator" id="progressindicator">ProgressIndicator</a></h4> 4279 <p class="styleclass">Style class: progress-indicator</p> 4280 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4281 <thead> 4282 <tr> 4283 <th class="propertyname">CSS Property</th> 4284 <th class="value">Values</th> 4285 <th>Default</th> 4286 <th>Comments</th> 4287 </tr> 4288 </thead> 4289 <tbody> 4290 <tr> 4291 <td class="propertyname">-fx-indeterminate-segment-count</td> 4292 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 4293 <td>8</td> 4294 <td> </td> 4295 </tr> 4296 <tr> 4297 <td class="propertyname">-fx-progress-color</td> 4298 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 4299 <td>null</td> 4300 <td> </td> 4301 </tr> 4302 <tr> 4303 <td class="propertyname">-fx-spin-enabled</td> 4304 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 4305 <td>false</td> 4306 <td> </td> 4307 </tr> 4308 <tr> 4309 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td> 4310 </tr> 4311 </tbody> 4312 </table> 4313 <h4>Pseudo-classes</h4> 4314 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4315 <thead> 4316 <tr> 4317 <th class="propertyname">CSS Pseudo-class</th> 4318 <th>Comments</th> 4319 </tr> 4320 </thead> 4321 <tbody> 4322 <tr> 4323 <td class="propertyname">determinate</td> 4324 <td>applies if the <strong>indeterminate</strong> variable is false</td> 4325 </tr> 4326 <tr> 4327 <td class="propertyname">indetermindate</td> 4328 <td>applies if the <strong>indeterminate</strong> variable is true</td> 4329 </tr> 4330 <tr> 4331 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td> 4332 </tr> 4333 </tbody> 4334 </table> 4335 <h4>Substructure</h4> 4336 <ul> 4337 <li>indicator — StackPane</li> 4338 <li>progress — StackPane</li> 4339 <li>percentage — Text</li> 4340 <li>tick — StackPane</li> 4341 </ul> 4342 <h4><a name="radiobutton" id="radiobutton">RadioButton</a></h4> 4343 <p class="styleclass">Style class: radio-button</p> 4344 <p>The RadioButton control has all the properties of <a href="#togglebutton">ToggleButton</a></p> 4345 <h4>Substructure</h4> 4346 <ul> 4347 <li>radio — Region 4348 <ul> 4349 <li>dot — Region</li> 4350 </ul> 4351 </li> 4352 <li>label — Label</li> 4353 </ul> 4354 <h4><a name="radiomenuitem" id="radiomenuitem">RadioMenuItem</a></h4> 4355 <h4>Pseudo-classes</h4> 4356 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4357 <thead> 4358 <tr> 4359 <th class="propertyname">CSS Pseudo-class</th> 4360 <th>Comments</th> 4361 </tr> 4362 </thead> 4363 <tbody> 4364 <tr> 4365 <td class="propertyname">selected</td> 4366 <td>applies if this item is selected</td> 4367 </tr> 4368 </tbody> 4369 </table> 4370 <h4><a name="scrollbar" id="scrollbar">ScrollBar</a></h4> 4371 <p class="styleclass">Style class: scroll-bar</p> 4372 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4373 <thead> 4374 <tr> 4375 <th class="propertyname">CSS Property</th> 4376 <th class="value">Values</th> 4377 <th>Default</th> 4378 <th>Comments</th> 4379 </tr> 4380 </thead> 4381 <tbody> 4382 <tr> 4383 <td class="propertyname">-fx-orientation</td> 4384 <td class="value">[ horizontal | vertical ]</td> 4385 <td class="default">horizontal</td> 4386 <td> </td> 4387 </tr> 4388 <tr> 4389 <td class="propertyname">-fx-block-increment</td> 4390 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 4391 <td>10</td> 4392 <td> </td> 4393 </tr> 4394 <tr> 4395 <td class="propertyname">-fx-unit-increment</td> 4396 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 4397 <td>1</td> 4398 <td> </td> 4399 </tr> 4400 </tbody> 4401 </table> 4402 <h4>Pseudo-classes</h4> 4403 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4404 <thead> 4405 <tr> 4406 <th class="propertyname">CSS Pseudo-class</th> 4407 <th>Comments</th> 4408 </tr> 4409 </thead> 4410 <tbody> 4411 <tr> 4412 <td class="propertyname">vertical</td> 4413 <td>applies if this ScrollBar is vertical</td> 4414 </tr> 4415 <tr> 4416 <td class="propertyname">horizontal</td> 4417 <td>applies if this ScrollBar is horizontal</td> 4418 </tr> 4419 <tr> 4420 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td> 4421 </tr> 4422 </tbody> 4423 </table> 4424 <h4>Substructure</h4> 4425 <ul> 4426 <li>decrement-button — StackPane 4427 <ul> 4428 <li>decrement-arrow — StackPane </li> 4429 </ul> 4430 </li> 4431 <li>track — StackPane</li> 4432 <li>thumb — StackPane</li> 4433 <li>increment-button — StackPane 4434 <ul> 4435 <li>increment-arrow — StackPane</li> 4436 </ul> 4437 </li> 4438 </ul> 4439 <h4><a name="scrollpane" id="scrollpane">ScrollPane</a></h4> 4440 <p class="styleclass">Style class: scroll-pane</p> 4441 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4442 <thead> 4443 <tr> 4444 <th class="propertyname">CSS Property</th> 4445 <th class="value">Values</th> 4446 <th>Default</th> 4447 <th>Comments</th> 4448 </tr> 4449 </thead> 4450 <tbody> 4451 <tr> 4452 <td class="propertyname">-fx-fit-to-width</td> 4453 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4454 <td>false</td> 4455 <td> </td> 4456 </tr> 4457 <tr> 4458 <td class="propertyname">-fx-fit-to-height</td> 4459 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4460 <td>false</td> 4461 <td> </td> 4462 </tr> 4463 <tr> 4464 <td class="propertyname">-fx-pannable</td> 4465 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4466 <td>false</td> 4467 <td> </td> 4468 </tr> 4469 <tr> 4470 <td class="propertyname">-fx-hbar-policy</td> 4471 <td class="value">[ never | always | as-needed ]</td> 4472 <td>as-needed</td> 4473 <td> </td> 4474 </tr> 4475 <tr> 4476 <td class="propertyname">-fx-vbar-policy</td> 4477 <td class="value">[ never | always | as-needed ]</td> 4478 <td>as-needed</td> 4479 <td> </td> 4480 </tr> 4481 <tr> 4482 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td> 4483 </tr> 4484 </tbody> 4485 </table> 4486 <h4>Pseudo-classes</h4> 4487 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4488 <thead> 4489 <tr> 4490 <th class="propertyname">CSS Pseudo-class</th> 4491 <th>Comments</th> 4492 </tr> 4493 </thead> 4494 <tbody> 4495 <tr> 4496 <td class="propertyname">pannable</td> 4497 <td>applies if this ScrollPane is pannable</td> 4498 </tr> 4499 <tr> 4500 <td class="propertyname">fitToWidth</td> 4501 <td>applies if this ScrollPane is fitToWidth</td> 4502 </tr> 4503 <tr> 4504 <td class="propertyname">fitToHeight</td> 4505 <td>applies if this ScrollPane is fitToHeight</td> 4506 </tr> 4507 <tr> 4508 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td> 4509 </tr> 4510 </tbody> 4511 </table> 4512 <h4>Substructure</h4> 4513 <ul> 4514 <li>viewport — StackPane 4515 <ul> 4516 <li> * — StackPane</li> 4517 <ul><li>The ScrollPane's content</li></ul> 4518 </ul> 4519 </li> 4520 <li>scroll-bar:vertical — ScrollBar</li> 4521 <li>scroll-bar:horizontall — ScrollBar</li> 4522 <li>corner — StackPane</li> 4523 </ul> 4524 <h4><a name="separator" id="separator">Separator</a></h4> 4525 <p class="styleclass">Style class: separator</p> 4526 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4527 <thead> 4528 <tr> 4529 <th class="propertyname">CSS Property</th> 4530 <th class="value">Values</th> 4531 <th>Default</th> 4532 <th>Comments</th> 4533 </tr> 4534 <tr> 4535 <td class="propertyname">-fx-orientation</td> 4536 <td class="value">[ horizontal | vertical ]</td> 4537 <td class="default">horizontal</td> 4538 <td> </td> 4539 </tr> 4540 <tr> 4541 <td class="propertyname">-fx-halignment</td> 4542 <td class="value">[ left | center | right ]</td> 4543 <td>center</td> 4544 <td> </td> 4545 </tr> 4546 <tr> 4547 <td class="propertyname">-fx-valignment</td> 4548 <td class="value">[ top | center | baseline | bottom ]</td> 4549 <td>center</td> 4550 <td> </td> 4551 </tr> 4552 </thead> 4553 <tbody> 4554 <tr> 4555 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td> 4556 </tr> 4557 </tbody> 4558 </table> 4559 <h4>Pseudo-classes</h4> 4560 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4561 <thead> 4562 <tr> 4563 <th class="propertyname">CSS Pseudo-class</th> 4564 <th>Comments</th> 4565 </tr> 4566 </thead> 4567 <tbody> 4568 <tr> 4569 <td class="propertyname">horizontal</td> 4570 <td>applies if this Separator is horizontal</td> 4571 </tr> 4572 <tr> 4573 <td class="propertyname">vertical</td> 4574 <td>applies if this Separator is vertical</td> 4575 </tr> 4576 <tr> 4577 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td> 4578 </tr> 4579 </tbody> 4580 </table> 4581 <h4>Substructure</h4> 4582 <ul> 4583 <li>line — Region</li> 4584 </ul> 4585 <h4><a name="spinner" id="spinner">Spinner</a></h4> 4586 <p class="styleclass">Style class: spinner</p> 4587 <p>Note that the default style class, "spinner", puts arrows on right, stacked vertically. The following 4588 style classes can also be used in combination with the default style class in order to control the 4589 layout of the Spinner. 4590 <table> 4591 <thead> 4592 <tr> 4593 <th class="styleclass">style class</th> 4594 <th>Comment</th> 4595 </tr> 4596 </thead> 4597 <tbody> 4598 <tr> 4599 <td class="value">arrows-on-right-horizontal</td> 4600 <td>The arrows are placed on the right of the Spinner, pointing horizontally (i.e. left and right)</td> 4601 </tr> 4602 <tr> 4603 <td class="value">arrows-on-left-vertical</td> 4604 <td>The arrows are placed on the left of the Spinner, pointing vertically (i.e. up and down)</td> 4605 </tr> 4606 <tr> 4607 <td class="value">arrows-on-left-horizontal</td> 4608 <td>The arrows are placed on the left of the Spinner, pointing horizontally (i.e. left and right)</td> 4609 </tr> 4610 <tr> 4611 <td class="value">split-arrows-vertical</td> 4612 <td>The arrows are placed above and beneath the spinner, stretching to take the entire width</td> 4613 </tr> 4614 <tr> 4615 <td class="value">split-arrows-horizontal</td> 4616 <td>The decrement arrow is placed on the left of the Spinner, and the increment on the right</td> 4617 </tr> 4618 </tbody> 4619 </table> 4620 4621 </p> 4622 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4623 <thead> 4624 <tr> 4625 <th class="propertyname">CSS Property</th> 4626 <th class="value">Values</th> 4627 <th>Default</th> 4628 <th>Comments</th> 4629 </tr> 4630 </thead> 4631 <tbody> 4632 <tr> 4633 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td> 4634 </tr> 4635 </tbody> 4636 </table> 4637 <h4>Pseudo-classes</h4> 4638 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4639 <thead> 4640 <tr> 4641 <th class="propertyname">CSS Pseudo-class</th> 4642 <th>Comments</th> 4643 </tr> 4644 </thead> 4645 <tbody> 4646 <tr> 4647 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td> 4648 </tr> 4649 </tbody> 4650 </table> 4651 <h4>Substructure</h4> 4652 <ul> 4653 <li>text-field — TextField</li> 4654 <li>increment-arrow-button — StackPane 4655 <ul> 4656 <li>increment-arrow — Region</li> 4657 </ul> 4658 </li> 4659 <li>decrement-arrow-button — StackPane 4660 <ul> 4661 <li>decrement-arrow — Region</li> 4662 </ul> 4663 </li> 4664 </ul> 4665 <h4><a name="slider" id="slider">Slider</a></h4> 4666 <p class="styleclass">Style class: slider</p> 4667 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4668 <thead> 4669 <tr> 4670 <th class="propertyname">CSS Property</th> 4671 <th class="value">Values</th> 4672 <th>Default</th> 4673 <th>Comments</th> 4674 </tr> 4675 </thead> 4676 <tbody> 4677 <tr> 4678 <td class="propertyname">-fx-orientation</td> 4679 <td class="value">[ horizontal | vertical ]</td> 4680 <td class="default">horizontal</td> 4681 <td> </td> 4682 </tr> 4683 <tr> 4684 <td class="propertyname">-fx-show-tick-labels</td> 4685 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4686 <td>false</td> 4687 <td> </td> 4688 </tr> 4689 <tr> 4690 <td class="propertyname">-fx-show-tick-marks</td> 4691 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4692 <td>false</td> 4693 <td> </td> 4694 </tr> 4695 <tr> 4696 <td class="propertyname">-fx-major-tick-unit</td> 4697 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 4698 <td>25</td> 4699 <td> </td> 4700 </tr> 4701 <tr> 4702 <td class="propertyname">-fx-minor-tick-count</td> 4703 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td> 4704 <td>3</td> 4705 <td> </td> 4706 </tr> 4707 <tr> 4708 <td class="propertyname">-fx-show-tick-labels</td> 4709 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4710 <td>false</td> 4711 <td> </td> 4712 </tr> 4713 <tr> 4714 <td class="propertyname">-fx-snap-to-ticks</td> 4715 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 4716 <td>false</td> 4717 <td> </td> 4718 </tr> 4719 <tr> 4720 <td class="propertyname">-fx-block-increment</td> 4721 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td> 4722 <td>10</td> 4723 <td> </td> 4724 </tr> 4725 <tr> 4726 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td> 4727 </tr> 4728 </tbody> 4729 </table> 4730 <h4>Pseudo-classes</h4> 4731 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4732 <thead> 4733 <tr> 4734 <th class="propertyname">CSS Pseudo-class</th> 4735 <th>Comments</th> 4736 </tr> 4737 </thead> 4738 <tbody> 4739 <tr> 4740 <td class="propertyname">horizontal</td> 4741 <td>applies if this Slider is horizontal</td> 4742 </tr> 4743 <tr> 4744 <td class="propertyname">vertical</td> 4745 <td>applies if this Slider is vertical</td> 4746 </tr> 4747 <tr> 4748 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td> 4749 </tr> 4750 </tbody> 4751 </table> 4752 <h4>Substructure</h4> 4753 <ul> 4754 <li>axis — NumberAxis</li> 4755 <li>track — Region</li> 4756 <li>thumb — Region</li> 4757 </ul> 4758 <h4><a name="splitmenubutton" id="splitmenubutton">SplitMenuButton</a></h4> 4759 <p class="styleclass">Style class: split-menu-button</p> 4760 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4761 <thead> 4762 <tr> 4763 <th class="propertyname">CSS Property</th> 4764 <th class="value">Values</th> 4765 <th>Default</th> 4766 <th>Comments</th> 4767 </tr> 4768 </thead> 4769 <tbody> 4770 <tr> 4771 <td colspan="4" class="parents">Also has all properties of <a href="#menubutton">MenuButton</a></td> 4772 </tr> 4773 </tbody> 4774 </table> 4775 <h4><a name="splitpane" id="splitpane">SplitPane</a></h4> 4776 <p class="styleclass">Style class: split-pane</p> 4777 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4778 <thead> 4779 <tr> 4780 <th class="propertyname">CSS Property</th> 4781 <th class="value">Values</th> 4782 <th>Default</th> 4783 <th>Comments</th> 4784 </tr> 4785 </thead> 4786 <tbody> 4787 <tr> 4788 <td class="propertyname">-fx-orientation</td> 4789 <td class="value">[ horizontal | vertical ]</td> 4790 <td class="default">horizontal</td> 4791 <td> </td> 4792 </tr> 4793 <tr> 4794 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td> 4795 </tr> 4796 </tbody> 4797 </table> 4798 <h4>Pseudo-classes</h4> 4799 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4800 <thead> 4801 <tr> 4802 <th class="propertyname">CSS Pseudo-class</th> 4803 <th>Comments</th> 4804 </tr> 4805 </thead> 4806 <tbody> 4807 <tr> 4808 <td class="propertyname">horizontal</td> 4809 <td>applies if this Slider is horizontal</td> 4810 </tr> 4811 <tr> 4812 <td class="propertyname">vertical</td> 4813 <td>applies if this Slider is vertical</td> 4814 </tr> 4815 <tr> 4816 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td> 4817 </tr> 4818 </tbody> 4819 </table> 4820 <h4>Substructure</h4> 4821 <ul> 4822 <li>split-pane-divider — StackPane 4823 <ul> 4824 <li>vertical-grabber — StackPane</li> 4825 <li>horizontal-grabber — StackPane</li> 4826 </ul> 4827 </li> 4828 </ul> 4829 <h4><a name="tabpane" id="tabpane">TabPane</a></h4> 4830 <p class="styleclass">Style class: tab-pane</p> 4831 <p>Note: The styleclass is "tab-pane floating" if the TabPane is floating.</p> 4832 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4833 <thead> 4834 <tr> 4835 <th class="propertyname">CSS Property</th> 4836 <th class="value">Values</th> 4837 <th>Default</th> 4838 <th>Comments</th> 4839 </tr> 4840 </thead> 4841 <tbody> 4842 <tr> 4843 <td class="propertyname">-fx-tab-min-width</td> 4844 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td> 4845 <td>0</td> 4846 <td> </td> 4847 </tr> 4848 <tr> 4849 <td class="propertyname">-fx-tab-max-width</td> 4850 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td> 4851 <td>Double.MAX_VALUE</td> 4852 <td> </td> 4853 </tr> 4854 <tr> 4855 <td class="propertyname">-fx-tab-min-height</td> 4856 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td> 4857 <td>0</td> 4858 <td> </td> 4859 </tr> 4860 <tr> 4861 <td class="propertyname">-fx-tab-max-height</td> 4862 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td> 4863 <td>Double.MAX_VALUE</td> 4864 <td> </td> 4865 </tr> 4866 <tr> 4867 <td class="propertyname">-fx-open-tab-animation</td> 4868 <td class="value">[ grow | none ]</td> 4869 <td>grow</td> 4870 <td>'none' disables Tab opening animation</td> 4871 </tr> 4872 <tr> 4873 <td class="propertyname">-fx-close-tab-animation</td> 4874 <td class="value">[ grow | none ]</td> 4875 <td>grow</td> 4876 <td>'none' disables Tab closing animation</td> 4877 </tr> 4878 <tr> 4879 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td> 4880 </tr> 4881 </tbody> 4882 </table> 4883 <h4>Pseudo-classes</h4> 4884 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4885 <thead> 4886 <tr> 4887 <th class="propertyname">CSS Pseudo-class</th> 4888 <th>Comments</th> 4889 </tr> 4890 </thead> 4891 <tbody> 4892 <tr> 4893 <td class="propertyname">top</td> 4894 <td>applies if the side is top</td> 4895 </tr> 4896 <tr> 4897 <td class="propertyname">right</td> 4898 <td>applies if the side is rght</td> 4899 </tr> 4900 <tr> 4901 <td class="propertyname">bottom</td> 4902 <td>applies if the side is bottom</td> 4903 </tr> 4904 <tr> 4905 <td class="propertyname">left</td> 4906 <td>applies if the side is left</td> 4907 </tr> 4908 <tr> 4909 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td> 4910 </tr> 4911 </tbody> 4912 </table> 4913 <h4>Substructure</h4> 4914 <ul> 4915 <li>tab-header-area — StackPane 4916 <ul> 4917 <li>headers-region — StackPane</li> 4918 <li>tab-header-background — StackPane</li> 4919 <li>control-buttons-tab — StackPane 4920 <ul> 4921 <li>tab-down-button — Pane 4922 <ul> 4923 <li>arrow — StackPane</li> 4924 </ul> 4925 </li> 4926 </ul> 4927 </li> 4928 <li>tab — Tab 4929 <ul> 4930 <li>tab-label — Label</li> 4931 <li>tab-close-button — StackPane</li> 4932 </ul> 4933 </li> 4934 </ul> 4935 </li> 4936 <li>tab-content-area — StackPane</li> 4937 </ul> 4938 <h4><a name="tablecolumnheader" id="tablecolumnheader">TableColumnHeader</a></h4> 4939 <p class="styleclass">Style class: column-header</p> 4940 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4941 <thead> 4942 <tr> 4943 <th class="propertyname">CSS Property</th> 4944 <th class="value">Values</th> 4945 <th>Default</th> 4946 <th>Comments</th> 4947 <tr> 4948 <td class="propertyname">-fx-size</td> 4949 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 4950 <td>20</td> 4951 <td>The table column header size.</td> 4952 </tr> 4953 </thead> 4954 <tbody> 4955 <tr> 4956 <td colspan="4" class="parents">Also has all properties of <a href="#region">Region</a></td> 4957 </tr> 4958 </tbody> 4959 </table> 4960 <h4>Pseudo-classes</h4> 4961 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 4962 <thead> 4963 <tr> 4964 <th class="propertyname">CSS Pseudo-class</th> 4965 <th>Comments</th> 4966 </tr> 4967 </thead> 4968 <tbody> 4969 <tr> 4970 <td class="propertyname">last-visible</td> 4971 <td>applies if this is the last visible column in the table.</td> 4972 </tr> 4973 <tr> 4974 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#node">Node</a></td> 4975 </tr> 4976 </tbody> 4977 </table> 4978 <h4>Substructure</h4> 4979 <ul> 4980 <li>column-resize-line — Region</li> 4981 <li>column-overlay — Region</li> 4982 <li>placeholder — StackPane</li> 4983 <li>column-header-background — StackPane 4984 <ul> 4985 <li>nested-column-header 4986 <ul> 4987 <li>column-header</li> 4988 </ul> 4989 </li> 4990 <li>filler — Region</li> 4991 <li>show-hide-columns-button — StackPane 4992 <ul> 4993 <li>show-hide-column-image — StackPane</li> 4994 </ul> 4995 </li> 4996 <li>column-drag-header — StackPane 4997 <ul> 4998 <li>label — Label</li> 4999 </ul> 5000 </li> 5001 </ul> 5002 </li> 5003 </ul> 5004 <h4><a name="tableview" id="tableview">TableView</a></h4> 5005 <p class="styleclass">Style class: table-view</p> 5006 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5007 <thead> 5008 <tr> 5009 <th class="propertyname">CSS Property</th> 5010 <th class="value">Values</th> 5011 <th>Default</th> 5012 <th>Comments</th> 5013 <tr> 5014 <td class="propertyname">-fx-fixed-cell-size</td> 5015 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 5016 <td>-1</td> 5017 <td>A value greater than zero sets the fixed cell size of the table. 5018 A value of zero or less disables fixed cell size.</td> 5019 </tr> 5020 </thead> 5021 <tbody> 5022 <tr> 5023 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td> 5024 </tr> 5025 </tbody> 5026 </table> 5027 <h4>Pseudo-classes</h4> 5028 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5029 <thead> 5030 <tr> 5031 <th class="propertyname">CSS Pseudo-class</th> 5032 <th>Comments</th> 5033 </tr> 5034 </thead> 5035 <tbody> 5036 <tr> 5037 <td class="propertyname">cell-selection</td> 5038 <td>applies if this TableView's selection model is cell selection</td> 5039 </tr> 5040 <tr> 5041 <td class="propertyname">row-selection</td> 5042 <td>applies if this TableView's selection model is row selection</td> 5043 </tr> 5044 <tr> 5045 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#node">Node</a></td> 5046 </tr> 5047 </tbody> 5048 </table> 5049 <h4>Substructure</h4> 5050 <ul> 5051 <li>column-resize-line — Region</li> 5052 <li>column-overlay — Region</li> 5053 <li>placeholder — StackPane</li> 5054 <li>column-header-background — StackPane 5055 <ul> 5056 <li>nested-column-header 5057 <ul> 5058 <li>column-header</li> 5059 </ul> 5060 </li> 5061 <li>filler — Region</li> 5062 <li>show-hide-columns-button — StackPane 5063 <ul> 5064 <li>show-hide-column-image — StackPane</li> 5065 </ul> 5066 </li> 5067 <li>column-drag-header — StackPane 5068 <ul> 5069 <li>label — Label</li> 5070 </ul> 5071 </li> 5072 </ul> 5073 </li> 5074 <li>table-column — TableColumn</li> 5075 </ul> 5076 <h4><a name="text-area" id="text-area">TextArea</a></h4> 5077 <p class="styleclass">Style class: text-area</p> 5078 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5079 <thead> 5080 <tr> 5081 <th class="propertyname">CSS Property</th> 5082 <th class="value">Values</th> 5083 <th>Default</th> 5084 <th>Comments</th> 5085 </tr> 5086 </thead> 5087 <tbody> 5088 <tr> 5089 <td class="propertyname">-fx-pref-column-count</td> 5090 <td class="value">number</td> 5091 <td class="default">40</td> 5092 <td> </td> 5093 </tr> 5094 <tr> 5095 <td class="propertyname">-fx-pref-row-count</td> 5096 <td class="value">number</td> 5097 <td class="default">10</td> 5098 <td> </td> 5099 </tr> 5100 <tr> 5101 <td class="propertyname">-fx-wrap-text</td> 5102 <td class="value">boolean</td> 5103 <td class="default">false</td> 5104 <td> </td> 5105 </tr> 5106 <tr> 5107 <td colspan="4" class="parents">Also has all properties of <a href="#textinputcontrol">TextInputControl</a></td> 5108 </tr> 5109 </tbody> 5110 </table> 5111 <h4>Substructure</h4> 5112 <ul> 5113 <li>scroll-pane — ScrollPane 5114 <ul> 5115 <li>content — Region</li> 5116 </ul> 5117 </li> 5118 </ul> 5119 <h4><a name="textinputcontrol" id="textinputcontrol">TextInputControl</a></h4> 5120 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5121 <thead> 5122 <tr> 5123 <th class="propertyname">CSS Property</th> 5124 <th class="value">Values</th> 5125 <th>Default</th> 5126 <th>Comments</th> 5127 </tr> 5128 </thead> 5129 <tbody> 5130 <tr> 5131 <td class="propertyname">-fx-font</td> 5132 <td class="value"><a href="#typefont" class="typelink"><font></a></td> 5133 <td>null</td> 5134 <td>inherits</td> 5135 </tr> 5136 <tr> 5137 <td class="propertyname">-fx-text-fill</td> 5138 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 5139 <td>black</td> 5140 <td> </td> 5141 </tr> 5142 <tr> 5143 <td class="propertyname">-fx-prompt-text-fill</td> 5144 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 5145 <td>gray</td> 5146 <td> </td> 5147 </tr> 5148 <tr> 5149 <td class="propertyname">-fx-highlight-fill</td> 5150 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 5151 <td>dodgerblue</td> 5152 <td> </td> 5153 </tr> 5154 <tr> 5155 <td class="propertyname">-fx-highlight-text-fill</td> 5156 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 5157 <td>white</td> 5158 <td> </td> 5159 </tr> 5160 <tr> 5161 <td class="propertyname">-fx-display-caret</td> 5162 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td> 5163 <td>true</td> 5164 <td> </td> 5165 </tr> 5166 <tr> 5167 <td colspan="4" class="parents">Also has <a href="#fontprops">Font 5168 Properties</a> and all properties of <a href="#control">Control</a></td> 5169 </tr> 5170 </tbody> 5171 </table> 5172 <h4>Pseudo-classes</h4> 5173 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5174 <thead> 5175 <tr> 5176 <th class="propertyname">CSS Pseudo-class</th> 5177 <th>Comments</th> 5178 </tr> 5179 </thead> 5180 <tbody> 5181 <tr> 5182 <td class="propertyname">readonly</td> 5183 <td>applies if this TextInputControl is not editable</td> 5184 </tr> 5185 <tr> 5186 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td> 5187 </tr> 5188 </tbody> 5189 </table> 5190 <h4><a name="textfield" id="textfield">TextField</a></h4> 5191 <p class="styleclass">Style class: text-field</p> 5192 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5193 <thead> 5194 <tr> 5195 <th class="propertyname">CSS Property</th> 5196 <th class="value">Values</th> 5197 <th>Default</th> 5198 <th>Comments</th> 5199 </tr> 5200 </thead> 5201 <tbody> 5202 <tr> 5203 <td class="propertyname">-fx-alignment</td> 5204 <td class="value">[ top-left | top-center | top-right | center-left | 5205 center | center-right bottom-left | bottom-center | bottom-right | 5206 baseline-left | baseline-center | baseline-right ]</td> 5207 <td class="default">center-left</td> 5208 <td> </td> 5209 </tr> 5210 <tr> 5211 <td class="propertyname">-fx-pref-column-count</td> 5212 <td class="value">number</td> 5213 <td class="default">12</td> 5214 <td> </td> 5215 </tr> 5216 <tr> 5217 <td colspan="4" class="parents">Also has all properties of <a href="#textinputcontrol">TextInputControl</a></td> 5218 </tr> 5219 </tbody> 5220 </table> 5221 <p>TextField has all the pseudo‑class states of <a href="#textinputcontrol">TextInputControl</a></p> 5222 <h4><a name="titledpane" id="titledpane">TitledPane</a></h4> 5223 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5224 <thead> 5225 <tr> 5226 <th class="propertyname">CSS Property</th> 5227 <th class="value">Values</th> 5228 <th>Default</th> 5229 <th>Comments</th> 5230 </tr> 5231 </thead> 5232 <tbody> 5233 <tr> 5234 <td class="propertyname">-fx-animated</td> 5235 <td class="value"><a href="#typenumber" class="typelink"><boolean></a></td> 5236 <td>true</td> 5237 <td> </td> 5238 </tr> 5239 <tr> 5240 <td class="propertyname">-fx-collapsible</td> 5241 <td class="value"><a href="#typenumber" class="typelink"><boolean></a></td> 5242 <td>true</td> 5243 <td> </td> 5244 </tr> 5245 <tr> 5246 <td colspan="4" class="parents">Also has <a href="#fontprops">Font 5247 Properties</a> and all properties of <a href="#labeled">Labeled</a></td> 5248 </tr> 5249 </tbody> 5250 </table> 5251 <h4>Pseudo-classes</h4> 5252 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5253 <thead> 5254 <tr> 5255 <th class="propertyname">CSS Pseudo-class</th> 5256 <th>Comments</th> 5257 </tr> 5258 </thead> 5259 <tbody> 5260 <tr> 5261 <td class="propertyname">expanded</td> 5262 <td>applies if this TitledPane is expanded</td> 5263 </tr> 5264 <tr> 5265 <td class="propertyname">collapsed</td> 5266 <td>applies if this TitledPane is collapsed</td> 5267 </tr> 5268 <tr> 5269 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#labeled">Labeled</a></td> 5270 </tr> 5271 </tbody> 5272 </table> 5273 <h4>Substructure</h4> 5274 <ul> 5275 <li>title — HBox 5276 <ul> 5277 <li>text — Label/li> </li> 5278 <li>arrow-button — StackPane/li> 5279 <ul> 5280 <li>arrow — StackPane</li> 5281 </ul> 5282 </li> 5283 </ul> 5284 </li> 5285 <li>content — StackPane/li> </li> 5286 </ul> 5287 <h4><a name="togglebutton" id="togglebutton">ToggleButton</a></h4> 5288 <p class="styleclass">Style class: toggle-button</p> 5289 <p>The ToggleButton control has all the properties of <a href="#buttonbase">ButtonBase</a>.</p> 5290 <h4>Pseudo-classes</h4> 5291 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5292 <thead> 5293 <tr> 5294 <th class="propertyname">CSS Pseudo-class</th> 5295 <th>Comments</th> 5296 </tr> 5297 </thead> 5298 <tbody> 5299 <tr> 5300 <td class="propertyname">selected</td> 5301 <td>applies if this ToggleButton is selected</td> 5302 </tr> 5303 <tr> 5304 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#buttonbase">ButtonBase</a></td> 5305 </tr> 5306 </tbody> 5307 </table> 5308 <h4><a name="toolbar" id="toolbar">ToolBar</a></h4> 5309 <p class="styleclass">Style class: tool-bar</p> 5310 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5311 <thead> 5312 <tr> 5313 <th class="propertyname">CSS Property</th> 5314 <th class="value">Values</th> 5315 <th>Default</th> 5316 <th>Comments</th> 5317 </tr> 5318 </thead> 5319 <tbody> 5320 <tr> 5321 <td class="propertyname">-fx-orientation</td> 5322 <td class="value">[ horizontal | vertical ]</td> 5323 <td class="default">horizontal</td> 5324 <td> </td> 5325 </tr> 5326 <tr> 5327 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td> 5328 </tr> 5329 </tbody> 5330 </table> 5331 <h4>Pseudo-classes</h4> 5332 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5333 <thead> 5334 <tr> 5335 <th class="propertyname">CSS Pseudo-class</th> 5336 <th>Comments</th> 5337 </tr> 5338 </thead> 5339 <tbody> 5340 <tr> 5341 <td class="propertyname">horizontal</td> 5342 <td>applies if this ToolBar is horizontal</td> 5343 </tr> 5344 <tr> 5345 <td class="propertyname">vertical</td> 5346 <td>applies if this ToolBar is vertical</td> 5347 </tr> 5348 <tr> 5349 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td> 5350 </tr> 5351 </tbody> 5352 </table> 5353 <h4>Substructure</h4> 5354 <ul> 5355 <li>tool-bar-overflow-button — StackPane 5356 <ul> 5357 <li>arrow — StackPane</li> 5358 </ul> 5359 </li> 5360 </ul> 5361 <h4><a name="tooltip" id="tooltip">Tooltip</a></h4> 5362 <p class="styleclass">Style class: tooltip</p> 5363 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5364 <thead> 5365 <tr> 5366 <th class="propertyname">CSS Property</th> 5367 <th class="value">Values</th> 5368 <th>Default</th> 5369 <th>Comments</th> 5370 </tr> 5371 </thead> 5372 <tbody> 5373 <tr> 5374 <td class="propertyname">-fx-text-alignment</td> 5375 <td class="value">[ left | center | right | justify ]</td> 5376 <td>left</td> 5377 <td> </td> 5378 </tr> 5379 <tr> 5380 <td class="propertyname">-fx-text-overrun</td> 5381 <td class="value">[ center-ellipsis | center-word-ellipsis | clip | 5382 ellipsis | leading-ellipsis | leading-word-ellipsis | word-ellipsis 5383 ]</td> 5384 <td>ellipsis</td> 5385 <td> </td> 5386 </tr> 5387 <tr> 5388 <td class="propertyname">-fx-wrap-text</td> 5389 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 5390 <td>false</td> 5391 <td> </td> 5392 </tr> 5393 <tr> 5394 <td class="propertyname">-fx-graphic</td> 5395 <td class="value"><a href="#typeurl" class="typelink"><uri></a></td> 5396 <td>null</td> 5397 <td> </td> 5398 </tr> 5399 <tr> 5400 <td class="propertyname">-fx-content-display</td> 5401 <td class="value">[ top | right | bottom | left | center | right | 5402 graphic-only | text-only ]</td> 5403 <td>left</td> 5404 <td> </td> 5405 </tr> 5406 <tr> 5407 <td class="propertyname">-fx-graphic-text-gap</td> 5408 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 5409 <td>4</td> 5410 <td> </td> 5411 </tr> 5412 <tr> 5413 <td class="propertyname">-fx-font</td> 5414 <td class="value"><a href="#typefont" class="typelink"><font></a></td> 5415 <td>Font.DEFAULT</td> 5416 <td>inherits</td> 5417 </tr> 5418 <tr> 5419 <td class="propertyname">-fx-show-delay</td> 5420 <td class="value"><a href="#typefont" class="typelink"><duration></a></td> 5421 <td>1000ms</td> 5422 <td> </td> 5423 </tr> 5424 <tr> 5425 <td class="propertyname">-fx-show-duration</td> 5426 <td class="value"><a href="#typefont" class="typelink"><duration></a></td> 5427 <td>5000ms</td> 5428 <td> </td> 5429 </tr> 5430 <tr> 5431 <td class="propertyname">-fx-hide-delay</td> 5432 <td class="value"><a href="#typefont" class="typelink"><duration></a></td> 5433 <td>200ms</td> 5434 <td> </td> 5435 </tr> 5436 5437 </tbody> 5438 </table> 5439 <h4>Substructure</h4> 5440 <ul> 5441 <li>label — Label</li> 5442 <li>page-corner — StackPane</li> 5443 </ul> 5444 <h4><a name="treecell" id="treecell">TreeCell</a></h4> 5445 <p class="styleclass">Style class: tree-cell</p> 5446 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5447 <thead> 5448 <tr> 5449 <th class="propertyname">CSS Property</th> 5450 <th class="value">Values</th> 5451 <th>Default</th> 5452 <th>Comments</th> 5453 </tr> 5454 </thead> 5455 <tbody> 5456 <tr> 5457 <td class="propertyname">-fx-indent</td> 5458 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 5459 <td>10</td> 5460 <td>The amout of space to multiply by the treeItem.level to get the 5461 left margin</td> 5462 </tr> 5463 <tr> 5464 <td colspan="4" class="parents">Also has all properties of <a href="#indexedcell">IndexedCell</a></td> 5465 </tr> 5466 </tbody> 5467 </table> 5468 <h4>Pseudo-classes</h4> 5469 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5470 <thead> 5471 <tr> 5472 <th class="propertyname">CSS Pseudo-class</th> 5473 <th>Comments</th> 5474 </tr> 5475 </thead> 5476 <tbody> 5477 <tr> 5478 <td class="propertyname">expanded</td> 5479 <td>applies if this cell is expanded</td> 5480 </tr> 5481 <tr> 5482 <td class="propertyname">collapsed</td> 5483 <td>applies if this cell is not expanded</td> 5484 </tr> 5485 <tr> 5486 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#indexedcell">IndexedCell</a></td> 5487 </tr> 5488 </tbody> 5489 </table> 5490 <h4><a name="treetablecell" id="treetablecell">TreeTableCell</a></h4> 5491 <p class="styleclass">Style class: tree-table-cell</p> 5492 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5493 <thead> 5494 <tr> 5495 <th class="propertyname">CSS Property</th> 5496 <th class="value">Values</th> 5497 <th>Default</th> 5498 <th>Comments</th> 5499 </tr> 5500 </thead> 5501 <tbody> 5502 <tr> 5503 <td colspan="4" class="parents">Also has all properties of <a href="#indexedcell">IndexedCell</a></td> 5504 </tr> 5505 </tbody> 5506 </table> 5507 <h4>Pseudo-classes</h4> 5508 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5509 <thead> 5510 <tr> 5511 <th class="propertyname">CSS Pseudo-class</th> 5512 <th>Comments</th> 5513 </tr> 5514 </thead> 5515 <tbody> 5516 <tr> 5517 <td class="propertyname">last-visible</td> 5518 <td>true if this is the last visible cell, typically the right-most cell in the TreeTableView</td> 5519 </tr> 5520 <tr> 5521 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#indexedcell">IndexedCell</a></td> 5522 </tr> 5523 </tbody> 5524 </table> 5525 5526 <h4><a name="treetableview" id="treetableview">TreeView</a></h4> 5527 <p class="styleclass">Style class: tree-table-view</p> 5528 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5529 <thead> 5530 <tr> 5531 <th class="propertyname">CSS Property</th> 5532 <th class="value">Values</th> 5533 <th>Default</th> 5534 <th>Comments</th> 5535 </tr> 5536 </thead> 5537 <tbody> 5538 <tr> 5539 <td class="propertyname">-fx-fixed-cell-size</td> 5540 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 5541 <td>Region.USE_COMPUTED_SIZE</td> 5542 <td>If both -fx-cell-size and -fx-fixed-cell-size properties are 5543 specified in CSS, -fx-fixed-cell-size takes precedence.</td> 5544 </tr> 5545 <tr> 5546 <td colspan="4" class="parents">Also has all properties and pseudo‑class state of <a href="#control">Control</a></td> 5547 </tr> 5548 </tbody> 5549 </table> 5550 5551 <h4><a name="treeview" id="treeview">TreeView</a></h4> 5552 <p class="styleclass">Style class: tree-view</p> 5553 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5554 <thead> 5555 <tr> 5556 <th class="propertyname">CSS Property</th> 5557 <th class="value">Values</th> 5558 <th>Default</th> 5559 <th>Comments</th> 5560 </tr> 5561 </thead> 5562 <tbody> 5563 <tr> 5564 <td class="propertyname">-fx-fixed-cell-size</td> 5565 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 5566 <td>Region.USE_COMPUTED_SIZE</td> 5567 <td>If both -fx-cell-size and -fx-fixed-cell-size properties are 5568 specified in CSS, -fx-fixed-cell-size takes precedence.</td> 5569 </tr> 5570 <tr> 5571 <td colspan="4" class="parents">Also has all properties and pseudo‑class state of <a href="#control">Control</a></td> 5572 </tr> 5573 </tbody> 5574 </table> 5575 <!-- Charts --> 5576 <h2><a name="charts" id="charts">Charts</a></h2> 5577 <table summary="property table" class="package" width="100%"> 5578 <tbody> 5579 <tr> 5580 <td><a name="charts">javafx.scene.chart</a></td> 5581 </tr> 5582 </tbody> 5583 </table> 5584 <h4><a name="areachart" id="areachart">AreaChart</a></h4> 5585 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5586 <thead> 5587 <tr> 5588 <th class="propertyname">Style class</th> 5589 <th>Comments</th> 5590 <th>Properties</th> 5591 </tr> 5592 </thead> 5593 <tbody> 5594 <tr> 5595 <td class="propertyname">"chart-series-area-line series<i> 5596 default-color<j>"</td> 5597 <td>Where <i> is the index of the series and <j> is the 5598 series’ color index. 5599 <td><a href="#node" class="typelink">Node</a> </td> 5600 </tr> 5601 <tr> 5602 <td class="propertyname">"chart-series-area-fill series<i> 5603 default-color<j>"</td> 5604 <td>Where <i> is the index of the series and <j> is the 5605 series’ color index. 5606 <td><a href="#path" class="typelink">Path</a> </td> 5607 </tr> 5608 <tr> 5609 <td class="propertyname">"chart-area-symbol series<i> 5610 data<j> default-color<k>"</td> 5611 <td>Where <i> is the index of the series, <j> is the index 5612 of the data within the series, and <k> is the series’ 5613 color index</td> 5614 <td><a href="#path" class="typelink">Path</a> </td> 5615 </tr> 5616 <tr> 5617 <td class="propertyname">"chart-area-symbol series<i> 5618 area-legend-symbol default-color<j>"</td> 5619 <td>Where <i> is the index of the series and <j> is the 5620 series’ color index</td> 5621 <td><a href="#LegendItem" class="typelink">LegendItem</a> </td> 5622 </tr> 5623 </tbody> 5624 </table> 5625 <p> 5626 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5627 <thead> 5628 <tr> 5629 <th class="propertyname">CSS Property</th> 5630 <th class="value">Values</th> 5631 <th>Default</th> 5632 <th>Comments</th> 5633 </tr> 5634 </thead> 5635 <tbody> 5636 <tr> 5637 <td colspan="4" class="parents">Has all properties of <a href="#xychart">XYChart</a></td> 5638 </tr> 5639 </tbody> 5640 </table> 5641 <h4><a name="axis" id="axis">Axis</a></h4> 5642 <p class="styleclass">Style class: axis</p> 5643 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5644 <thead> 5645 <tr> 5646 <th class="propertyname">CSS Property</th> 5647 <th class="value">Values</th> 5648 <th>Default</th> 5649 <th>Comments</th> 5650 </tr> 5651 </thead> 5652 <tbody> 5653 <tr> 5654 <td class="propertyname">-fx-side</td> 5655 <td class="value">Side</td> 5656 <td>null</td> 5657 <td> </td> 5658 </tr> 5659 <tr> 5660 <td class="propertyname">-fx-tick-length</td> 5661 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 5662 <td>8</td> 5663 <td> </td> 5664 </tr> 5665 <tr> 5666 <td class="propertyname">-fx-tick-label-font</td> 5667 <td class="value"><a href="#typefont" class="typelink"><font></a></td> 5668 <td>8 system</td> 5669 <td> </td> 5670 </tr> 5671 <tr> 5672 <td class="propertyname">-fx-tick-label-fill</td> 5673 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td> 5674 <td>black</td> 5675 <td> </td> 5676 </tr> 5677 <tr> 5678 <td class="propertyname">-fx-tick-label-gap</td> 5679 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 5680 <td>3</td> 5681 <td> </td> 5682 </tr> 5683 <tr> 5684 <td class="propertyname">-fx-tick-mark-visible</td> 5685 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 5686 <td>true</td> 5687 <td> </td> 5688 </tr> 5689 <tr> 5690 <td class="propertyname">-fx-tick-labels-visible</td> 5691 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 5692 <td>true</td> 5693 <td> </td> 5694 </tr> 5695 <tr> 5696 <td colspan="4" class="parents">Has all properties of <a href="#region">Region</a></td> 5697 </tr> 5698 </tbody> 5699 </table> 5700 <h4>Substructure</h4> 5701 <ul> 5702 <li>axis-label — Text</li> 5703 <li>axis-tick-mark — Path</li> 5704 </ul> 5705 <h4><a name="barchart" id="barchart">BarChart</a></h4> 5706 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5707 <thead> 5708 <tr> 5709 <th class="propertyname">Style class</th> 5710 <th>Comments</th> 5711 <th>Properties</th> 5712 </tr> 5713 </thead> 5714 <tbody> 5715 <tr> 5716 <td class="propertyname">"bar-chart"</td> 5717 <td> </td> 5718 <td> </td> 5719 </tr> 5720 <tr> 5721 <td class="propertyname">"chart-bar series<i> data<j> 5722 default-color<k>"</td> 5723 <td>Where <i> is the index of the series, <j> is the index 5724 of the data within the series, and <k> is the series’ 5725 color index. 5726 If the data value is negative, the "negative" style 5727 class is added; e.g., <code>.negative.chart-bar</code>.</td> 5728 <td><a href="#node" class="typelink">Node</a> </td> 5729 </tr> 5730 <tr> 5731 <td class="propertyname">"chart-bar series<i> bar-legend-symbol 5732 default-color<j>"</td> 5733 <td>Where <i> is the index of the series and <j> is the 5734 series’ color index</td> 5735 <td><a href="#LegendItem" class="typelink">LegendItem</a> </td> 5736 </tr> 5737 </tbody> 5738 </table> 5739 <p> 5740 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5741 <thead> 5742 <tr> 5743 <th class="propertyname">CSS Property</th> 5744 <th class="value">Values</th> 5745 <th>Default</th> 5746 <th>Comments</th> 5747 </tr> 5748 </thead> 5749 <tbody> 5750 <tr> 5751 <td class="propertyname">-fx-bar-gap</td> 5752 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 5753 <td>4</td> 5754 <td> </td> 5755 </tr> 5756 <tr> 5757 <td class="propertyname">-fx-category-gap</td> 5758 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 5759 <td>10</td> 5760 <td> </td> 5761 </tr> 5762 <tr> 5763 <td colspan="4" class="parents">Has all properties of <a href="#xychart">XYChart</a></td> 5764 </tr> 5765 </tbody> 5766 </table> 5767 <h4><a name="bubblechart" id="bubblechart">BubbleChart</a></h4> 5768 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5769 <thead> 5770 <tr> 5771 <th class="propertyname">Style class</th> 5772 <th>Comments</th> 5773 <th>Properties</th> 5774 </tr> 5775 </thead> 5776 <tbody> 5777 <tr> 5778 <td class="propertyname">"chart-bubble series<i> data<j> 5779 default-color<k>"</td> 5780 <td>Where <i> is the index of the series, <j> is the index 5781 of the data within the series, and <k> is the series’ 5782 color index</td> 5783 <td><a href="#node" class="typelink">Node</a> </td> 5784 </tr> 5785 <tr> 5786 <td class="propertyname">"chart-bubble series<i> 5787 bubble-legend-symbol default-color<j>"</td> 5788 <td>Where <i> is the index of the series and <j> is the 5789 series’ color index</td> 5790 <td><a href="#LegendItem" class="typelink">LegendItem</a> </td> 5791 </tr> 5792 </tbody> 5793 </table> 5794 <p> 5795 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5796 <thead> 5797 <tr> 5798 <th class="propertyname">CSS Property</th> 5799 <th class="value">Values</th> 5800 <th>Default</th> 5801 <th>Comments</th> 5802 </tr> 5803 </thead> 5804 <tbody> 5805 <tr> 5806 <td colspan="4" class="parents">Has all properties of <a href="#xychart">XYChart</a></td> 5807 </tr> 5808 </tbody> 5809 </table> 5810 <h4><a name="categoyaxis" id="categoryaxis">CategoryAxis</a></h4> 5811 <p class="styleclass">Style class: axis</p> 5812 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5813 <thead> 5814 <tr> 5815 <th class="propertyname">CSS Property</th> 5816 <th class="value">Values</th> 5817 <th>Default</th> 5818 <th>Comments</th> 5819 </tr> 5820 </thead> 5821 <tbody> 5822 <tr> 5823 <td class="propertyname">-fx-start-margin</td> 5824 <td class="value"><a href="#typesize" class="typelink"><number></a></td> 5825 <td>5</td> 5826 <td>The margin between the axis start and the first tick-mark</td> 5827 </tr> 5828 <tr> 5829 <td class="propertyname">-fx-end-margin</td> 5830 <td class="value"><a href="#typesize" class="typelink"><number></a></td> 5831 <td>5</td> 5832 <td>The margin between the axis start and the first tick-mark</td> 5833 </tr> 5834 <tr> 5835 <td class="propertyname">-fx-gap-start-and-end</td> 5836 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 5837 <td>true</td> 5838 <td>If this is true then half the space between ticks is left at the 5839 start and end</td> 5840 </tr> 5841 <tr> 5842 <td colspan="4" class="parents">Has all properties of <a href="#axis">Axis</a></td> 5843 </tr> 5844 </tbody> 5845 </table> 5846 <h4><a name="chart" id="chart">Chart</a></h4> 5847 <p class="styleclass">Style class: chart</p> 5848 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5849 <thead> 5850 <tr> 5851 <th class="propertyname">CSS Property</th> 5852 <th class="value">Values</th> 5853 <th>Default</th> 5854 <th>Comments</th> 5855 </tr> 5856 </thead> 5857 <tbody> 5858 <tr> 5859 <td class="propertyname">-fx-legend-side</td> 5860 <td class="value">Side</td> 5861 <td>bottom</td> 5862 <td> </td> 5863 </tr> 5864 <tr> 5865 <td class="propertyname">-fx-legend-visible</td> 5866 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 5867 <td>true</td> 5868 <td> </td> 5869 </tr> 5870 <tr> 5871 <td class="propertyname">-fx-title-side</td> 5872 <td class="value">Side</td> 5873 <td>top</td> 5874 <td> </td> 5875 </tr> 5876 <tr> 5877 <td colspan="4" class="parents">Has all properties of <a href="#region">Region</a></td> 5878 </tr> 5879 </tbody> 5880 </table> 5881 <h4>Substructure</h4> 5882 <ul> 5883 <li>chart-title — Label</li> 5884 <li>chart-content — Pane</li> 5885 </ul> 5886 <h4><a name="legend" id="legend">Legend</a></h4> 5887 <p class="styleclass">Style class: chart-legend</p> 5888 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5889 <thead> 5890 <tr> 5891 <th class="propertyname">CSS Property</th> 5892 <th class="value">Values</th> 5893 <th>Default</th> 5894 <th>Comments</th> 5895 </tr> 5896 </thead> 5897 <tbody> 5898 <tr> 5899 <td colspan="4" class="parents">Has all properties of <a href="#region">Region</a></td> 5900 </tr> 5901 </tbody> 5902 </table> 5903 <h4>Substructure</h4> 5904 <ul> 5905 <li>chart-legend-item — Label</li> 5906 <li>chart-legend-item-symbol — Node (the Label's graphic)</li> 5907 </ul> 5908 <h4><a name="linechart" id="linechart">LineChart</a></h4> 5909 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5910 <thead> 5911 <tr> 5912 <th class="propertyname">Style class</th> 5913 <th>Comments</th> 5914 <th>Properties</th> 5915 </tr> 5916 </thead> 5917 <tbody> 5918 <tr> 5919 <td class="propertyname">"chart-series-line series<i> 5920 default-color<j>"</td> 5921 <td>Where <i> is the index of the series and <j> is the 5922 series’ color index</td> 5923 <td><a href="#node" class="typelink">Node</a> </td> 5924 </tr> 5925 <tr> 5926 <td class="propertyname">"chart-line-symbol series<i> 5927 data<j> default-color<k>"</td> 5928 <td>Where <i> is the index of the series, <j> is the index 5929 of the data within the series, and <k> is the series’ 5930 color index</td> 5931 <td><a href="#node" class="typelink">Node</a> </td> 5932 </tr> 5933 <tr> 5934 <td class="propertyname">"chart-line-symbol series<i> 5935 default-color<j>"</td> 5936 <td>Where <i> is the index of the series and <j> is the 5937 series’ color index</td> 5938 <td><a href="#LegendItem" class="typelink">LegendItem</a> </td> 5939 </tr> 5940 </tbody> 5941 </table> 5942 <p> 5943 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5944 <thead> 5945 <tr> 5946 <th class="propertyname">CSS Property</th> 5947 <th class="value">Values</th> 5948 <th>Default</th> 5949 <th>Comments</th> 5950 </tr> 5951 </thead> 5952 <tbody> 5953 <tr> 5954 <td class="propertyname">-fx-create-symbols</td> 5955 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 5956 <td>true</td> 5957 <td> </td> 5958 </tr> 5959 <tr> 5960 <td colspan="4" class="parents">Has all properties of <a href="#xychart">XYChart</a></td> 5961 </tr> 5962 </tbody> 5963 </table> 5964 <h4><a name="numberaxis" id="numberaxis">NumberAxis</a></h4> 5965 <p class="styleclass">Style class: axis</p> 5966 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5967 <thead> 5968 <tr> 5969 <th class="propertyname">CSS Property</th> 5970 <th class="value">Values</th> 5971 <th>Default</th> 5972 <th>Comments</th> 5973 </tr> 5974 </thead> 5975 <tbody> 5976 <tr> 5977 <td class="propertyname">-fx-tick-unit</td> 5978 <td class="value"><a href="#typesize" class="typelink"><number></a></td> 5979 <td>5</td> 5980 <td>The value between each major tick mark in data units.</td> 5981 </tr> 5982 <tr> 5983 <td colspan="4" class="parents">Has all properties of <a href="#valueaxis">ValueAxis</a></td> 5984 </tr> 5985 </tbody> 5986 </table> 5987 <h4><a name="piechart" id="piechart">PieChart</a></h4> 5988 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 5989 <thead> 5990 <tr> 5991 <th class="propertyname">Style class</th> 5992 <th>Comments</th> 5993 <th>Properties</th> 5994 </tr> 5995 </thead> 5996 <tbody> 5997 <tr> 5998 <td class="propertyname">"chart-pie data<i> 5999 default-color<j>"</td> 6000 <td>Where <i> is the index of the data and <j> is the 6001 series’ color index. If the data value is negative, the 6002 "negative" style‑class is added; e.g., <code>.negative.chart-pie</code>.</td> 6003 <td><a href="#node" class="typelink">Node</a> </td> 6004 </tr> 6005 <tr> 6006 <td class="propertyname">"chart-pie-label-line;"</td> 6007 <td> </td> 6008 <td><a href="#path" class="typelink">Path</a> </td> 6009 </tr> 6010 <tr> 6011 <td class="propertyname">"chart-pie-label;"</td> 6012 <td> </td> 6013 <td><a href="#path" class="typelink">Text</a> </td> 6014 </tr> 6015 <tr> 6016 <td class="propertyname">"pie-legend-symbol <<em>i–th</em> 6017 data item’s style‑class>"</td> 6018 <td>Each item in the legend has the style‑class "pie-legend-symbol" 6019 plus the style‑class of the corresponding data item</td> 6020 <td><a href="#LegendItem" class="typelink">LegendItem</a> </td> 6021 </tr> 6022 </tbody> 6023 </table> 6024 <p> 6025 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 6026 <thead> 6027 <tr> 6028 <th class="propertyname">CSS Property</th> 6029 <th class="value">Values</th> 6030 <th>Default</th> 6031 <th>Comments</th> 6032 </tr> 6033 </thead> 6034 <tbody> 6035 <tr> 6036 <td class="propertyname">-fx-clockwise</td> 6037 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 6038 <td>true</td> 6039 <td> </td> 6040 </tr> 6041 <tr> 6042 <td class="propertyname">-fx-pie-label-visible</td> 6043 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 6044 <td>true</td> 6045 <td> </td> 6046 </tr> 6047 <tr> 6048 <td class="propertyname">-fx-label-line-length</td> 6049 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 6050 <td>20</td> 6051 <td> </td> 6052 </tr> 6053 <tr> 6054 <td class="propertyname">-fx-start-angle</td> 6055 <td class="value"><a href="#typenumber" class="typelink"><number></a></td> 6056 <td>0</td> 6057 <td> </td> 6058 </tr> 6059 <tr> 6060 <td colspan="4" class="parents">Has all properties of <a href="#chart">Chart</a></td> 6061 </tr> 6062 </tbody> 6063 </table> 6064 <h4><a name="scatterchart" id="scatterchart">ScatterChart</a></h4> 6065 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 6066 <thead> 6067 <tr> 6068 <th class="propertyname">Style class</th> 6069 <th>Comments</th> 6070 <th>Properties</th> 6071 </tr> 6072 </thead> 6073 <tbody> 6074 <tr> 6075 <td class="propertyname">"chart-symbol series<i> data<j> 6076 default-color<k>"</td> 6077 <td>Where <i> is the index of the series, <j> is the index 6078 of the data within the series, and <k> is the series’ 6079 color index</td> 6080 <td><a href="#node" class="typelink">Node</a> </td> 6081 </tr> 6082 <tr> 6083 <td class="propertyname"> </td> 6084 <td>The LegendItem symbols are assigned the style‑class of the first 6085 symbol of the series.</td> 6086 <td><a href="#LegendItem" class="typelink">LegendItem</a> </td> 6087 </tr> 6088 </tbody> 6089 </table> 6090 <p> 6091 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 6092 <thead> 6093 <tr> 6094 <th class="propertyname">CSS Property</th> 6095 <th class="value">Values</th> 6096 <th>Default</th> 6097 <th>Comments</th> 6098 </tr> 6099 </thead> 6100 <tbody> 6101 <tr> 6102 <td colspan="4" class="parents">Has all properties of <a href="#xychart">XYChart</a></td> 6103 </tr> 6104 </tbody> 6105 </table> 6106 <h4><a name="valueaxis" id="valueaxis">ValueAxis</a></h4> 6107 <p class="styleclass">Style class: axis</p> 6108 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 6109 <thead> 6110 <tr> 6111 <th class="propertyname">CSS Property</th> 6112 <th class="value">Values</th> 6113 <th>Default</th> 6114 <th>Comments</th> 6115 </tr> 6116 </thead> 6117 <tbody> 6118 <tr> 6119 <td class="propertyname">-fx-minor-tick-length</td> 6120 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 6121 <td>5</td> 6122 <td> </td> 6123 </tr> 6124 <tr> 6125 <td class="propertyname">-fx-minor-tick-count</td> 6126 <td class="value"><a href="#typesize" class="typelink"><size></a></td> 6127 <td>5</td> 6128 <td> </td> 6129 </tr> 6130 <tr> 6131 <td class="propertyname">-fx-minor-tick-visible</td> 6132 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 6133 <td>true</td> 6134 <td> </td> 6135 </tr> 6136 <tr> 6137 <td colspan="4" class="parents">Has all properties of <a href="#axis">Axis</a></td> 6138 </tr> 6139 </tbody> 6140 </table> 6141 <h4>Substructure</h4> 6142 <ul> 6143 <li>axis-minor-tick-mark — Path</li> 6144 </ul> 6145 <h4><a name="xychart" id="xychart">XYChart</a></h4> 6146 <p class="styleclass">Style class: set by sub-type</p> 6147 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1"> 6148 <thead> 6149 <tr> 6150 <th class="propertyname">CSS Property</th> 6151 <th class="value">Values</th> 6152 <th>Default</th> 6153 <th>Comments</th> 6154 </tr> 6155 </thead> 6156 <tbody> 6157 <tr> 6158 <td class="propertyname">-fx-alternative-column-fill-visible</td> 6159 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 6160 <td>true</td> 6161 <td> </td> 6162 </tr> 6163 <tr> 6164 <td class="propertyname">-fx-alternative-row-fill-visible</td> 6165 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 6166 <td>true</td> 6167 <td> </td> 6168 </tr> 6169 <tr> 6170 <td class="propertyname">-fx-horizontal-grid-lines-visible</td> 6171 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 6172 <td>true</td> 6173 <td> </td> 6174 </tr> 6175 <tr> 6176 <td class="propertyname">-fx-horizontal-zero-line-visible</td> 6177 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 6178 <td>true</td> 6179 <td> </td> 6180 </tr> 6181 <tr> 6182 <td class="propertyname">-fx-vertical-grid-lines-visible</td> 6183 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 6184 <td>true</td> 6185 <td> </td> 6186 </tr> 6187 <tr> 6188 <td class="propertyname">-fx-vertical-zero-line-visible</td> 6189 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td> 6190 <td>true</td> 6191 <td> </td> 6192 </tr> 6193 <tr> 6194 <td colspan="4" class="parents">Has all properties of <a href="#chart">chart</a></td> 6195 </tr> 6196 </tbody> 6197 </table> 6198 <h4>Substructure</h4> 6199 <ul> 6200 <li>plot-content — Group</li> 6201 <li>chart-plot-background — Region</li> 6202 <li>chart-alternative-column-fill — Path</li> 6203 <li>chart-alternative-row-fill — Path</li> 6204 <li>chart-vertical-grid-lines — Path</li> 6205 <li>chart-horizontal-grid-lines — Path</li> 6206 <li>chart-vertical-zero-line — Line</li> 6207 <li>chart-horizontal-zero-line — Line</li> 6208 </ul> 6209 <h2><a name="references" id="references">References</a></h2> 6210 <p>[1] CSS 2.1: <a href="http://www.w3.org/TR/CSS21/" target="_blank">http://www.w3.org/TR/CSS21/</a> 6211 </p> 6212 <p>[2] CSS 3 work in progress <a href="http://www.w3.org/Style/CSS/current-work" 6213 target="_blank">http://www.w3.org/Style/CSS/current-work</a> 6214 (May 2010). </p> 6215 <p>[3] SVG Paths: <a href="http://www.w3.org/TR/SVG/paths.html" target="_blank">http://www.w3.org/TR/SVG/paths.html</a> 6216 </p> 6217 <p>[4] CSS Backgrounds and Borders Module Level 3: <a href="http://www.w3.org/TR/css3-background/" 6218 target="_blank">http://www.w3.org/TR/css3-background/</a> 6219 </p> 6220 <p>[5] Uniform Resource Identifier (URI): Generic Syntax <a href="http://www.ietf.org/rfc/rfc3986">RFC-3986</a></p> 6221 <hr> 6222 <p> 6223 <font size="-1"><a href="http://bugreport.java.com/bugreport/" target="_blank">Submit a bug or feature</a><br>For further API reference and developer documentation, see <a href="http://download.java.net/java/jdk9/docs/index.html" target="_blank">Java SE Documentation</a>. That documentation contains more detailed, developer-targeted descriptions, with conceptual overviews, definitions of terms, workarounds, and working code examples.<br> <a href="http://download.java.net/java/jdk9/docs/legal/cpyr.html" target="_blank">Copyright</a> © 2008, 2016, Oracle and/or its affiliates. All rights reserved.<br><b>DRAFT 9-ea</b></font> 6224 </p> 6225 <br> 6226 </body> 6227 </html>