Question

我正在尝试使JavaFX分页控件看起来像这样：

这是我的造型：

 .pagination .pagination-control .button, .pagination .toggle-button {
    -fx-background-color: -fx-paginator-button;
    -fx-border-color: -fx-colour-dark-grey;
}

.pagination .pagination-control .toggle-button:selected {   
    -fx-background-color: -fx-colour-purple;
}

.pagination .pagination-control .toggle-button:hover, .pagination .pagination-control .button:hover  {   
    -fx-background-color: -fx-bg-colour-grey;
}

.pagination .pagination-control .left-arrow, .right-arrow{
    -fx-background-color: -fx-font-colour-black;
}

.pagination .label {
  -fx-text-fill: -fx-font-colour-black;
}

结果如下：

背景颜色似乎有问题。当选择按钮时，它会在底部稍微溢出，而对于箭头按钮，背景不会应用于整个按钮（如果你仔细观察最右边的箭头按钮，背景颜色会结束，留下一点白色条带）。另外我如何增加按钮的大小（它们实际上比图像小）？我已经尝试过设置prefWidth和prefHeight，没有结果

.pagination .pagination-control .button, .pagination .toggle-button {
    -fx-background-color: -fx-paginator-button;
    -fx-border-color: -fx-colour-grey;
    -fx-pref-width: 15;
    -fx-pref-height: 15;
}

Answer 1

这些选择器应该完成基本工作：

/* Remove spacing */
.pagination > .pagination-control > .control-box {
    -fx-spacing: 0;
}

/* You can control the actual button sizes here */
.pagination > .pagination-control > .control-box > .number-button,
.pagination > .pagination-control > .control-box > .bullet-button,
.pagination > .pagination-control > .control-box > .left-arrow-button,
.pagination > .pagination-control > .control-box > .right-arrow-button {
    -fx-background-insets: 0, 1;
    -fx-background-color: lightgray, #FAFAFA;
    -fx-min-width: 30;
    -fx-min-height: 30;
}

/* Colors on hover */
.pagination > .pagination-control > .control-box > .number-button:hover,
.pagination > .pagination-control > .control-box > .bullet-button:hover,
.pagination > .pagination-control > .control-box > .left-arrow-button:hover,
.pagination > .pagination-control > .control-box > .right-arrow-button:hover {
    -fx-background-insets: 0;
    -fx-background-color: lightgray;
}

/* Selected toggle color */
.pagination > .pagination-control > .control-box > .number-button:selected,
.pagination > .pagination-control > .control-box > .bullet-button:selected{
    -fx-background-insets: 0;
    -fx-background-color: #58379A;
    -fx-text-fill: white;
}

得到如下结果：

所有按钮都有固定的尺寸，间距被移除，选定/悬停的切换按钮具有无边框颜色。

此外，如果您还要控制按钮内的文本大小，可以将以下选择器更新为：

/* Remove spacing and control font size */
.pagination > .pagination-control > .control-box {
    -fx-spacing: 0;
    -fx-font-size: 12;
}

此外，您还可以控制页面信息的文本大小，如：

.pagination > .pagination-control {
    -fx-font-size: 8;
}

或者你甚至可以隐藏它：

.pagination {
    -fx-page-information-visible: false;
}

得到的结果是：

Answer 2

问题是-fx-pref-width或height没有被应用，因为它们是由它们的父布局处理的（至少我认为是这样），以便强制你需要设置最小宽度和高度的更改而不是首选。

这是我的css：

.pagination > .pagination-control > .control-box > .number-button {
    -fx-min-width: 40;
    -fx-min-height: 30;
}

.pagination > .pagination-control > .control-box > .left-arrow-button {
    -fx-min-width: 40;
    -fx-min-height: 30;
}

.pagination > .pagination-control > .control-box > .right-arrow-button {
    -fx-min-width: 40;
    -fx-min-height: 30;
}

.pagination .pagination-control .toggle-button:selected {   
    -fx-background-color: purple;
}

.pagination .pagination-control .toggle-button:hover, .pagination .pagination-control .button:hover  {   
    -fx-background-color: grey;
}

请考虑查看modena.css以获取更多信息。

JavaFX分页按钮的大小和样式

2 个答案: