CSS を使用して javafx スクロールバー_html/css_WEB-ITnose を美しくする

ScrollBar パーツ CSS 情報

上の図では、ScrollBar の主要な部分が 4 つあります。

サムトラックの増分

さて、この記事では、これら 4 つのスタイル クラスだけを使ってみましょう。上の画像の右側には、 hover(focus)、pressed(mouse pressed) 、horizo​​ntal などのイベントがいくつかあります。 （水平固有の ScrollBar CSS クラス）と垂直（垂直固有の ScrollBar CSS クラス）。

まず、 ListView と 1 つの Stylesheet を含む 1 つのデモ アプリケーションを作成します。

01

02

03

04

05

06

07

08

09

10

11 <子供>

12

13

14

15

<スタイルシート>

16

17

18

上記の FXML では、mylistview という名前のスタイル クラスを持つ 2 つのリストビューを作成しました。ここで、スタイルシート全体で同じスタイル クラスを使用します (style.css) 以下のようなスクロールバーを作成しましょう:

Css ファイル (style.css)

01	/**CSS **/

02	.mylistview{

03	-fx-border-color:derive(グレー,80% );

04

}

05

06	/* ListView のメイン スクロールバー CSS クラス */

07	.mylistview .scroll-bar:horizo​​ntal ,

08	.mylistview .scroll-bar:vertical{

09	-fx-background-color:transparent;

10

11

}

12

13	/* スクロールバーのインクリメントボタンとデクリメントボタンの CSS クラス */

14	.mylistview .increment-button 、 .mylistview .decrement-button {

15	-fx-background-color:transparent;

16	-fx-border-color:derive(gray,80%);

17

}

18

19	/* メイン **track** CSS クラス */

20	.mylistview .scroll-bar :水平 .track ,

21 .mylistview .scroll-bar:vertical .track{

22 -fx-background-color: 透明;

23 -fx-border-color:derive(gray,80%);

24	-fx-background-radius: 0em;

25

}

26

27 /* 毎回ドラッグするメインスクロールバー **サム** CSS クラス時間 (移動可能) */

28 .mylistview .scroll-bar:horizo​​ntal .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	/**イベントCSS **/

38	/* ---------- -------------------------------------------------- -------------- */

39

40 /* メインスクロールバー **トラック**クラス「ホバー」と「押下」のイベントについて */

41

42	.mylistview .scroll-bar:horizo​​ntal:hover .track 、

43

.mylistviewロールバー:水平:押された .track 、

44

.mylistview .scroll-bar:vertical:hover .track、

45

.mylistview .scroll-bar:vertical:pressed{

46

-fx-background-color: 派生(#434343,20%);

47

48	-fx-opacity: 0.2;

49	-fx-background-radius: 0em;

50

51

}

52

53	/* メインスクロールバー**thumb** 「ホバー」と「押された」イベントの CSS クラス */

54	.mylistview .scroll-bar .thumb:hover、

55 .mylistview .scroll-bar .thumb:pressed{

56 -fx-background-color: 派生(黒,50%);

57}

58

59 .mylistview .increment-button:hover 、.mylistview .decrement-button:ホバー {

60	-fx-background-color:derive(gray,100%);

61	-fx-border-color:derive(gray,80%);

62	-fx-padding:10px;

63

}

ここでは、パディングを与えるために次のプロパティを使用しました。クラスブロック間のスペース

-fx-border-color : これはクラスの境界線の色を指定します -fx-background-radius: 背景の塗りつぶし半径を作成します -fx-background-color: 背景を赤、緑、青などの色で塗りつぶします -fx-opacity: [0.0-1.0] の間のクラスの不透明度 -fx-background-inset: 特定のクラスのインセットスペースです。

さて、スクロールバーをデフォルトのサイズよりも少し広く、大きくしたい場合はどうしますか（下の画像のように）。幅を広くするには、以下の CSS コードのように
-fx-padding

プロパティを追加するだけです。

この数行のコードで既存の CSS (
style.css
) コードをオーバーライドするだけです

1

/* スクロールバーのインクリメントボタンとデクリメントボタンの CSS クラス */

2	.mylistview .increment-button ,.mylistview .decrement-button {

3	- fx 背景色:透明;

4	-fx-border-color:derive(gray,80%);

5