javacssjavafxcontrolsfx

CSS styling of ControlsFX segmented bar text

How can I change the size and color of the text for the ControlsFX segmented bar? The usual way:

-fx-font-size: 15px

Doesn’t seem to work.

It doesn’t matter to me whether I change this using a CSS stylesheet or through the code. I have tried both. -fx-background-color: does work, so my styling is having an effect.

I just can’t seem to find anywhere, or intuitively figure out the correct CSS for how to style the text of the segmented bar control.

Thanks!

Solution

  • ControlsFX uses a default SegmentViewFactory that uses a class called SegmentView with a style class segment-view, so this is the way to style a text in a SegmentedBar:

    .segment-view {
    -fx-font-size: 15px;
}

    Another way to style the text in a SegmentedBar is to use a custom SegmentViewFactory. Here is an example:

    SegmentedBar<Segment> bar = new SegmentedBar<>();
bar.getSegments().addAll(
        new Segment(2.46, "Apple"),
        new Segment(2.43, "Microsoft"),
        new Segment(1.94, "Alphabet"),
        new Segment(1.72, "Amazon"));
bar.setOrientation(Orientation.HORIZONTAL);
bar.setSegmentViewFactory(segment -> {
    Label viewNode = new Label(String.format("%s (%.2fT)", segment.getText(), segment.getValue()));
    viewNode.setStyle("-fx-font-size: 15px; -fx-font-style: italic;");
    return viewNode;
});