gpt4 book ai didi

JavaFX 分页按钮大小和样式

转载 作者:行者123 更新时间:2023-12-03 00:57:14 30 4
gpt4 key购买 nike

我试图使 JavaFX 分页控件看起来像这样: enter image description here

这是我的造型:

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

这是结果:

enter image description here

背景颜色似乎有问题。当选择按钮时,其底部会溢出一点,而对于箭头按钮,背景不会应用于整个按钮(如果您仔细观察最右边的箭头按钮,背景颜色结束时会留下一个小白色 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;
}

最佳答案

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

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

得到如下结果:

enter image description here

所有按钮都有固定大小,间距被删除,并且选定/悬停的切换按钮具有无边框颜色。

<小时/>

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

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

得到以下结果:

enter image description here

关于JavaFX 分页按钮大小和样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46563798/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com