RXControls CSS Reference Guide

Controls

RXAudioSpectrum

Style class: rx-audio-spectrum

The RXAudioSpectrum control has all the properties of Control;

Substructure

.bar-box — HBox
  .bar — Region
  .data0;.data1;.data2 ... — Region
Css Property Values Default
-rx-bar-effect effect null
-rx-bar-shape shape null
-rx-crest-pos MIDDLE; LEFT; RIGHT; SIDE; DOUBLE MIDDLE

RXAvatar

Style class: rx-avatar

The RXAvatar control has all the properties of Control;

Substructure

group — Group
  image-view — ImageView

Css Property Values Default
-rx-shape-type CIRCLE,SQUARE,HEXAGON_H,HEXAGON_V CIRCLE

RXButtonBase

The abstract control has all the properties of Labeled;

Css Property Values Default
-rx-animation-time Duration 130ms

RXCarousel

Style class:rx-carousel

The control has all the properties of Control;

Substructure

content-pane — StackPane
effect-pane — Pane
nav-pane — Pane
  left-button — StackPane
    left-arrow — Region
  right-button — StackPane
    right-arrow — Region
  nav-bar — FlowPane
Css Property Values Default
-rx-hover-pause boolean true
-rx-nav-display SHOW,HIDE,AUTO SHOW
-rx-arrow-display SHOW,HIDE,AUTO AUTO
-rx-animation-time Duration 600ms
-rx-show-time Duration 3500ms
-rx-auto-switch boolean true

RXFillButton

Style class: rx-fill-button

The RXFillButton control has all the properties of RXButtonBase;

Substructure

fill-region — Region
label — Label

Css Property Values Default
-rx-fill Paint #616dff
-rx-hover-text-fill Paint white
-rx-fill-type BOTTOM_TO_TOP,CIRCLE_TO_SIDE,
CORNER_TO_CENTER,HOR_TO_MIDDLE,
HOR_TO_SIDE,HOR_ZIGZAG,LEFT_TO_RIGHT,
RIGHT_TO_LEFT,TOP_TO_BOTTOM,
VER_TO_MIDDLE,VER_TO_SIDE,VER_ZIGZAG
 LEFT_TO_RIGHT

RXHighlightText

Style class: rx-highlight-text

The control has all the properties of Control;

Substructure

text-flow — TextFlow
  highlight-label — Label
  plain-text — Text

Css Property Values Default
-rx-highlight-color Paint #ffff00
-rx-highlight-fill Paint #000000
-rx-plain-fill Paint #000000
-fx-text-alignment LEFT,CENTER,RIGHT,JUSTIFY LEFT
-fx-line-spacing double 0

RXLineButton

Style class: rx-line-button

The control has all the properties of RXButtonBase;

Substructure

line — Line
label — Label

Css Property Values Default
-rx-line-type EXTEND,RISE EXTEND

RXLrcView

Style class: rx-lrc-view

The control has all the properties of Control;

Substructure

.pane — Pane
  .tip-label — Label
  .lrc-pane — Pane
    .lrc-line — LrcLineLabel

Pseudo-classes

CSS Pseudo-class Comments
playing applies when playing the current lyrics line

Css Property Values Default
-rx-animation-time Duration 300ms
-rx-line-height size 25px
-rx-tip-string String 暂无歌词...
-rx-line-scaling size 1.3

RXMediaProgressBar

Style class: rx-media-progress-bar

The control has all the properties of Control;

Substructure

content-pane — Pane
  track — — StackPane
  buffer-track — StackPane
  current-track — StackPane
  thumb — — StackPane

RXPagination

Style class: rx-pagination

The control has all the properties of Pagination;

Substructure

page — StackPane
pagination-control — StackPane
  leftArrowButton — Button
    leftArrow — StackPane
  rightArrowButton — Button
    rightArrow — StackPane
  bullet-button — ToggleButton
  number-button — ToggleButton
  page-information — Label
  label-go — Label
  page-text-field — TextField
  label-page — Label
  ok-button — Button

RXPasswordField

Style class: rx-password-field

The control has all the properties of PasswordField;

Substructure

password-field — PasswordField
tf-top-pane — Pane
  tf-button — StackPane
    tf-button-shape — Region

Pseudo-classes

CSS Pseudo-class Comments
showing applies when the password is showing

Css Property Values Default
-rx-echochar String '\u25cf'
-rx-button-display SHOW,HIDE,AUTO AUTO

RXDigit

Style class: rx-digit

The control has all the properties of Control;

Substructure

digit-shape — Group
Css Property Values Default
-rx-light-fill Paint black
-rx-dark-fill Paint #dddddd

RXSVGView

Style class: rx-svg-view

The control has all the properties of Control;

Substructure

.svg-pane — Pane
  .p-id0 ; .p-id1 ; .p-d... — SVGPath
Css Property Values Default
-rx-brighten-color Paint black
-rx-darken-color Paint #dddddd

RXTextField

Style class: rx-text-field

The control has all the properties of TextField;

Substructure

TextField — text-field
tf-top-pane — Pane
  tf-button — StackPane
    tf-button-shape — Region

Css Property Values Default
-rx-button-display SHOW,HIDE,AUTO AUTO

RXToggleButton

Style class: rx-toggle-button

The RXAvatar control has all the properties of ToggleButton;

RXTranslationButton

Style class: rx-translation-button

The control has all the properties of RXButtonBase;

Substructure

translation-pane — StackPane
  non-hover-label — Label
  hover-label — Label

Css Property Values Default
-rx-translation-dir LEFT_TO_RIGHT,RIGHT_TO_LEFT,
BOTTOM_TO_TOP,TOP_TO_BOTTOM		 BOTTOM_TO_TOP