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

来源

2017-10-04 user3552551

这些选择应该做的基本工作：

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

有一个结果：

来源

2017-10-04 12:40:20 DVarga

的问题是-fx-PREF宽度或高度不被应用的原因，他们是由他们的父母布局（至少我处理这样认为），以强制您需要设置最小宽度和高度而不是首选的更改。

这里是我的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以获取更多信息。

来源

2017-10-04 12:28:50 JKostikiadis

JavaFX的分页按钮的尺寸和风格

回答

相关问题