ScrollBar parts CSS information
In the above picture there are four main part of ScrollBar .
increment thumb track decrement
Now in this post we are going to just play with only these four style class and at the right of the image above there are some of the events like hover(focus), pressed(mouse pressed) , horizontal(Horizontal specific ScrollBar CSS class) and vertical (Vertical specific ScrollBar CSS class) .
Firstly we are making one demo Application which contain ListView and one Stylesheet .
| 01 |
| 02 |
| 03 |
| 04 |
| 05 |
| 06 |
| 07 |
| 08 |
| 09 |
| 10 | |
| 11 | |
| 12 | |
| 13 | |
| 14 |
| 15 | |
| 16 | |
| 17 |
| 18 |
In above FXML we have created two listview with style class naming mylistview. Now we will be using same style class on all over our stylesheets (style.css) Let’s make the scrollbar like below:
Css file (style.css)
| 01 | /** CSS **/ |
| 02 | .mylistview{ |
| 03 | -fx-border-color:derive(gray,80%); |
| 04 | } |
| 05 |
| 06 | /* The main scrollbar CSS class of ListView */ |
| 07 | .mylistview .scroll-bar:horizontal , |
| 08 | .mylistview .scroll-bar:vertical{ |
| 09 | -fx-background-color:transparent; |
| 10 |
| 11 | } |
| 12 |
| 13 | /* The increment and decrement button CSS class of scrollbar */ |
| 14 | .mylistview .increment-button ,.mylistview .decrement-button { |
| 15 | -fx-background-color:transparent; |
| 16 | -fx-border-color:derive(gray,80%); |
| 17 | } |
| 18 |
| 19 | /* The main scrollbar **track** CSS class */ |
| 20 | .mylistview .scroll-bar:horizontal .track , |
| 21 | .mylistview .scroll-bar:vertical .track{ |
| 22 | -fx-background-color: transparent; |
| 23 | -fx-border-color:derive(gray,80%); |
| 24 | -fx-background-radius: 0em; |
| 25 | } |
| 26 |
| 27 | /* The main scrollbar **thumb** CSS class which we drag every time (movable) */ |
| 28 | .mylistview .scroll-bar:horizontal .thumb, |
| 29 | .mylistview .scroll-bar:vertical .thumb { |
| 30 | -fx-background-color:derive(black,90%); |
| 31 | -fx-background-insets: 0, 0, 0; |
| 32 | -fx-background-radius: 0em; |
| 33 |
| 34 | } |
| 35 |
| 36 | /* ------------------------------------------------------------------------------------- */ |
| 37 | /** EVENT CSS **/ |
| 38 | /* ------------------------------------------------------------------------------------- */ |
| 39 |
| 40 | /* The main scrollbar **track** CSS class on event of "hover" and "pressed" */ |
| 41 |
| 42 | .mylistview .scroll-bar:horizontal:hover .track , |
| 43 | .mylistview .scroll-bar:horizontal:pressed .track , |
| 44 | .mylistview .scroll-bar:vertical:hover .track, |
| 45 | .mylistview .scroll-bar:vertical:pressed .track{ |
| 46 | -fx-background-color: derive(#434343,20%); |
| 47 |
| 48 | -fx-opacity: 0.2; |
| 49 | -fx-background-radius: 0em; |
| 50 |
| 51 | } |
| 52 |
| 53 | /* The main scrollbar **thumb** CSS class on event of "hover" and "pressed" */ |
| 54 | .mylistview .scroll-bar .thumb:hover, |
| 55 | .mylistview .scroll-bar .thumb:pressed{ |
| 56 | -fx-background-color: derive(black,50%); |
| 57 | } |
| 58 |
| 59 | .mylistview .increment-button:hover ,.mylistview .decrement-button:hover { |
| 60 | -fx-background-color:derive(gray,100%); |
| 61 | -fx-border-color:derive(gray,80%); |
| 62 | -fx-padding:10px; |
| 63 | } |
Here we have used following property:
-fx-padding: for giving padding space in between the class block -fx-border-color: this give the color for the border of the class -fx-background-radius: makes the background fill radius -fx-background-color: fills the background with the color like red,gree, blue etc. -fx-opacity: the opacity of the class between [0.0-1.0] -fx-background-inset: it’s the insets spaces of specific class.
Now how would you like if you want your scrollbar little bit wider and bigger than it’s default size (like of below image) . To make them wider you can just add -fx-padding property like as below CSS code.
Just override your existing CSS (style.css) codes with this few lines of codes
| 1 | /* The increment and decrement button CSS class of scrollbar */ |
| 2 | .mylistview .increment-button ,.mylistview .decrement-button { |
| 3 | -fx-background-color:transparent; |
| 4 | -fx-border-color:derive(gray,80%); |
| 5 |
相关标签：
来源：php中文网
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1 | 本站CDN由 数掘科技 提供 |
0
1
229
收藏
