修改 JavaFX 手风琴

Question

我有一个手风琴，里面有两个 TitlePane，我有一个设计问题。我想看看是否有任何方法可以删除标题周围的边框，您可以在此处看到：

这是我的 CSS 代码：

.accordion .titled-pane .title {
    -fx-background-color: transparent;
    -fx-padding: 0.3333em 0.75em 0.3333em -0.5em;
}

}
.accordion .titled-pane>*.content {
    -fx-background-color: transparent;
    -fx-padding: 0em 0.75em 0em 2em;
}

.accordion .titled-pane>.title>.arrow-button>.arrow {
    -fx-background-color: transparent;
}

Answer 1

这里是 modena.css，至少在 JavaFX 13 中，添加了您看到的边框：

.accordion > .titled-pane > .title {
    -fx-background-color:
        linear-gradient(to bottom,
        derive(-fx-color,-15%) 95%,
        derive(-fx-color,-25%) 100%
        ),
        -fx-inner-border,
        -fx-body-color;
    -fx-background-insets: -1 0 0 0, 0 1 1 1, 1 2 2 2;
    -fx-background-radius: 0, 0, 0;
}

此 "border" 是使用三种背景颜色实现的，每一种都比前一种略深。要删除边框，您只需使用：

.accordion > .titled-pane > .title {
    -fx-background-color: null;
}

下面是一个使用上述 CSS 的示例（假定位于名为 Main.css 的文件中）：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Accordion;
import javafx.scene.control.Label;
import javafx.scene.control.TitledPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {

  @Override
  public void start(Stage primaryStage) {
    Accordion accordion = new Accordion(
        new TitledPane("TitledPane #1", new StackPane(new Label("Content #1"))),
        new TitledPane("TitledPane #2", new StackPane(new Label("Content #2")))
    );

    Scene scene = new Scene(accordion, 400, 200);
    scene.getStylesheets().add(getClass().getResource("/Main.css").toString());

    primaryStage.setScene(scene);
    primaryStage.setTitle("JavaFX " + System.getProperty("javafx.version"));
    primaryStage.show();
  }
}

下面是运行在 Java 8u232（祖鲁社区）上的结果截图：

（折叠）：

（展开）：

您会注意到在展开 TitledPane 的屏幕截图中，内容周围有一个边框。这也是由 modena.css 添加的。如果需要，也可以使用以下 CSS:

删除

.titled-pane > *.content {
  -fx-background-color: null;
  -fx-border-color: null;
}

Answer 2

折腾了一圈终于找到答案：

.titled-pane .title {
    -fx-border-color: null;
}

修改 JavaFX 手风琴

Modify JavaFX Accordion

css

java

background

javafx

accordion