JavaFX 分页按钮大小和样式

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;
}

这是结果:

背景颜色似乎有问题。当选择按钮时，其底部会溢出一点，而对于箭头按钮，背景不会应用于整个按钮(如果您仔细观察最右边的箭头按钮，背景颜色结束时会留下一个小白色 strip )。另外，如何增加按钮的大小(它们比现实中的图像小得多)？我尝试像这样设置 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;
}

得到以下结果: