Basics

Guides

API Reference

Menu

Basics

Guides

API Reference

class: TabPane

[121:7] extends: Node, Control

The TabPane class wraps the JavaFX TabPane control, a container that organizes content into a set of selectable tabs displayed along one edge of the control. Each Tab holds an independent content node, and only the content of the selected tab is visible at a time. Tabs can optionally be closed by the user, and the tab header bar can be positioned on the top, right, bottom, or left side of the pane. An optional floating style removes the visible separation between the tab header area and the content area. The tables below list every CSS property available to TabPane, organized by the class level where each property is defined.

CSS Pseudo-classes -- TabPane

Pseudo-class Description
top Applies when the tab header is on the top side.
right Applies when the tab header is on the right side.
bottom Applies when the tab header is on the bottom side.
left Applies when the tab header is on the left side.

CSS Properties -- TabPane

Property Values Default Description
-fx-tab-min-width <integer> 0 Minimum tab width in pixels.
-fx-tab-max-width <integer> Double.MAX_VALUE Maximum tab width in pixels.
-fx-tab-min-height <integer> 0 Minimum tab height in pixels.
-fx-tab-max-height <integer> Double.MAX_VALUE Maximum tab height in pixels.
-fx-open-tab-animation grow | none grow Animation used when a tab is opened.
-fx-close-tab-animation grow | none grow Animation used when a tab is closed.

CSS Properties -- Control

Property Values Default Description
-fx-skin <string> null Fully qualified class name of the Skin to use for rendering this control.
-fx-focus-traversable true | false true When true, the control participates in focus traversal via the keyboard Tab key. (Default is false for Accordion, ScrollPane.)

CSS Properties -- Region

Background fills

Property Values Default Description
-fx-background-color <paint> [, <paint>]* transparent One or more paint values for background fill layers, rendered back to front.
-fx-background-insets <size> or <t> <r> <b> <l> [, ...]* 0 0 0 0 Insets from the region edges for each background fill layer.
-fx-background-radius <size> [/ <size>]* [, ...]* 0 0 0 0 Corner radii for each background fill layer.

Background images

Property Values Default Description
-fx-background-image <uri> [, <uri>]* null One or more image URIs for background image layers.
-fx-background-position <bg-position> [, ...]* 0% 0% Position of each background image within the region. Accepts keywords or size values.
-fx-background-repeat <repeat-style> [, ...]* repeat repeat Tiling behavior for each background image. Values: repeat, no-repeat, round, space applied per axis.
-fx-background-size <bg-size> [, ...]* auto auto Dimensions for each background image. Supports cover, contain, stretch, or explicit sizes.

Stroked borders

Property Values Default Description
-fx-border-color <paint> or <t> <r> <b> <l> [, ...]* null Paint colors for the border stroke layers.
-fx-border-insets <size> or <t> <r> <b> <l> [, ...]* null Insets from region edges for each border layer.
-fx-border-radius <size> [, ...]* null Corner radii for border stroke layers.
-fx-border-style <border-style> [, ...]* null Border line style (solid, dotted, dashed) plus phase and line cap/join options per layer.
-fx-border-width <size> or <t> <r> <b> <l> [, ...]* null Thickness of each border stroke layer, per side.

Border images

Property Values Default Description
-fx-border-image-source <uri> [, <uri>]* null Image URIs used to paint the border.
-fx-border-image-insets <size> or <t> <r> <b> <l> [, ...]* 0 0 0 0 Insets for each border image layer.
-fx-border-image-repeat <repeat-style> [, ...]* repeat repeat Tiling behavior for each border image.
-fx-border-image-slice <size> or <t> <r> <b> <l> [fill] [, ...]* 100% Divides each border image into nine regions. Adding fill preserves the center region.
-fx-border-image-width <size> or <t> <r> <b> <l> [, ...]* 1 1 1 1 Width of each border image slice per side.

Other Region properties

Property Values Default Description
-fx-padding <size> or <t> <r> <b> <l> 0 0 0 0 Interior padding between the region border and its content.
-fx-shape <string> null SVG path string that defines a custom clip shape for the region.
-fx-scale-shape true | false true When true, the shape is scaled to fit the region.
-fx-position-shape true | false true When true, the shape is centered within the region.
-fx-snap-to-pixel true | false true When true, positions and sizes are rounded to whole pixel boundaries.
-fx-min-width <size> -1 Minimum width. -1 uses the computed minimum.
-fx-pref-width <size> -1 Preferred width. -1 uses the computed preferred.
-fx-max-width <size> -1 Maximum width. -1 uses the computed maximum.
-fx-min-height <size> -1 Minimum height. -1 uses the computed minimum.
-fx-pref-height <size> -1 Preferred height. -1 uses the computed preferred.
-fx-max-height <size> -1 Maximum height. -1 uses the computed maximum.

CSS Properties -- Node

Property Values Default Description
-fx-blend-mode add | blue | color-burn | color-dodge | darken | difference | exclusion | green | hard-light | lighten | multiply | overlay | red | screen | soft-light | src-atop | src-in | src-out | src-over null Blend mode used when compositing this node with nodes beneath it.
-fx-cursor null | crosshair | default | hand | move | e-resize | h-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | v-resize | text | wait | <url> null (inherits) Mouse cursor shape shown when the pointer is over this node. Inherits from parent by default.
-fx-effect <effect> null A visual effect (e.g. DropShadow, InnerShadow) applied to the rendered node.
-fx-focus-traversable true | false false Whether this node participates in focus traversal. Overridden to true by Control.
-fx-view-order <number> 0 Adjusts rendering and hit-test order within the parent without changing the scene graph order.
-fx-opacity <number> [0.0 - 1.0] 1 Opacity of the node. 0 is fully transparent, 1 is fully opaque.
-fx-rotate <number> 0 Rotation angle in degrees applied around the node's center point. Positive values are clockwise.
-fx-scale-x <number> 1 Scale factor along the X axis about the node's center.
-fx-scale-y <number> 1 Scale factor along the Y axis about the node's center.
-fx-scale-z <number> 1 Scale factor along the Z axis about the node's center.
-fx-translate-x <number> 0 Translation offset along the X axis in pixels.
-fx-translate-y <number> 0 Translation offset along the Y axis in pixels.
-fx-translate-z <number> 0 Translation offset along the Z axis in pixels.
visibility visible | hidden | collapse | inherit visible Controls whether the node is rendered and participates in layout. collapse removes it from layout; hidden keeps the space.
-fx-managed true | false true When false, the parent layout does not manage this node's position or size.

Methods

  • TabPane ()

    Creates a new TabPane.

  • add (Items)

    Adds one or more Tab objects.

    • @p Items is a Tab or a list of Tabs to add.
    • @r this object for chaining
  • getSelected ()

    Gets the currently selected tab.

    • @r The selected Tab item.
  • setTabClosingPolicy (string Policy)

    Sets the tab closing policy.

    • @p Policy is a string: ALL_TABS, SELECTED_TAB, or UNAVAILABLE.
    • @r this object for chaining
  • getTabs ()

    Returns the list of Tab objects currently in the TabPane.

    • @r A list with the current Tab objects.
  • setRotateGraphic (bool Rotate)

    Sets whether the graphic on each tab header is rotated with the tab side.

    • @p Rotate is a bool with true to rotate graphics.
    • @r this object for chaining
  • setTabMinWidth (double Width)

    Sets the minimum width for each tab header.

    • @p Width is a double with the minimum tab width in pixels.
    • @r this object for chaining
  • setTabMaxWidth (double Width)

    Sets the maximum width for each tab header.

    • @p Width is a double with the maximum tab width in pixels.
    • @r this object for chaining
  • setTabMinHeight (double Height)

    Sets the minimum height for each tab header.

    • @p Height is a double with the minimum tab height in pixels.
    • @r this object for chaining
  • setTabMaxHeight (double Height)

    Sets the maximum height for each tab header.

    • @p Height is a double with the maximum tab height in pixels.
    • @r this object for chaining
  • setId (string Id)

    Sets the CSS id of this TabPane node.

    • @p Id is a string with the CSS id.
    • @r this object for chaining
  • setSide (string Side)

    Sets which side of the TabPane the tab header bar appears on.

    • @p Side is a string: TOP, BOTTOM, LEFT, or RIGHT.
    • @r this object for chaining
  • onChange (callback OnChange)

    Sets a callback for when the selected tab changes.

    • @p OnChange is a callback to call on selection change.
    • @r this object for chaining