Unterschiede
Hier werden die Unterschiede zwischen der gewählten und der aktuellen Version gezeigt.
javafx:css 2015/04/13 13:14 | javafx:css 2020/01/22 20:59 aktuell | ||
---|---|---|---|
Zeile 29: | Zeile 29: | ||
Pane pane1 = new Pane(); | Pane pane1 = new Pane(); | ||
- | pane1.setId("myID"); | + | pane1.setId("myId"); |
Pane pane2 = new Pane(); | Pane pane2 = new Pane(); | ||
Zeile 37: | Zeile 37: | ||
Die dazugehörige my.css -Datei:\\ | Die dazugehörige my.css -Datei:\\ | ||
<code css> | <code css> | ||
- | #myID { | + | #myId { |
-fx-... | -fx-... | ||
} | } | ||
Zeile 48: | Zeile 48: | ||
<code> | <code> | ||
.button { | .button { | ||
- | -fx-background-color: white; // Weißer Hintergrund | + | -fx-background-color: white; // Weißer Hintergrund |
- | -fx-min-height: 20px; // Minimale Höhe 20px | + | -fx-min-height: 20px; // Minimale Höhe 20px |
- | -fx-pref-height: 20px; // Bevorzugte Höhe 20px | + | -fx-pref-height: 20px; // Bevorzugte Höhe 20px |
- | -fx-max-height: 20px; // Maximale Höhe 20px | + | -fx-max-height: 20px; // Maximale Höhe 20px |
- | -fx-padding: 0 10 0 10; // Abstand zwischen Text und Rand (open, rechts, unten, links) | + | -fx-padding: 0 10 0 10; // Abstand zwischen Text und Rand (open, rechts, unten, links) |
+ | } | ||
+ | |||
+ | .column-header { | ||
+ | -fx-background-color: red; // Roter Tabellen-Header-Hintergrund | ||
+ | } | ||
+ | |||
+ | .column-header .label { | ||
+ | -fx-alignment: CENTER_LEFT; // Linksbündige Ausrichtung der Spaltenüberschrift | ||
+ | } | ||
+ | |||
+ | .combo-box-base { | ||
+ | -fx-background-color: gray; // Grauer Hintergrund für Pfeilrechteck und Rahmen | ||
+ | } | ||
+ | |||
+ | .combo-box .list-cell { | ||
+ | -fx-background-color: white; // Weißer Hintergrund für Textfeld und Liste | ||
+ | } | ||
+ | |||
+ | .label { | ||
+ | -fx-font-weight: bold; // Schrift in fett | ||
+ | } | ||
+ | |||
+ | .password-field { | ||
+ | -fx-border-color: transparent; // Rahmen transparent | ||
+ | -fx-background-color: yellow; // Hintergrund gelb | ||
+ | } | ||
+ | |||
+ | .progress-bar { | ||
+ | -fx-accent: cyan; // Balkenfarbe | ||
+ | -fx-control-inner-background: palegreen; // Hintergrundfarbe | ||
} | } | ||
.rectangle { | .rectangle { | ||
- | -fx-stroke: #ff0000; // Roter Rahmen | + | -fx-stroke: #ff0000; // Roter Rahmen |
- | -fx-fill: #0000ff; // Blau gefüllt | + | -fx-fill: #0000ff; // Blau gefüllt |
+ | -fx-stroke-type: outside; // Rahmen außerhalb des Rechtecks (Nebeneffekt: Anti-Aliasing verschwindet) | ||
} | } | ||
.tab { | .tab { | ||
- | -fx-font-size: 12px; // 12px Schrifthöhe | + | -fx-font-size: 12px; // 12px Schrifthöhe |
- | -fx-pref-height: 16px; // 16px Tabhöhe | + | -fx-pref-height: 16px; // 16px Tabhöhe |
-fx-max-height: 16px; | -fx-max-height: 16px; | ||
} | } | ||
- | .tab-header-area { | + | .tab:selected { // Selktierter Reiter |
- | -fx-pref-height: 18px; // 18px Höhe des Bereichs in dem sich die Reiter befinden | + | -fx-background-color: white; // Hintergrund weiß |
- | -fx-max-height: 18px; | + | } |
+ | |||
+ | .tab-content-area { | ||
+ | -fx-background-color: #ff0000; // Roter Hintergrund | ||
+ | } | ||
+ | |||
+ | .tab-label { | ||
+ | -fx-rotate: 45; // Tab-Text wird um 45 Grad gedreht | ||
+ | } | ||
+ | |||
+ | .tab-header-background { // Der Bereich hinter den Reitern | ||
+ | -fx-background-color: #dddddd; // hellgrau | ||
+ | -fx-border-color: transparent transparent red transparent; // roter Rand an der rechten Seite | ||
+ | } | ||
+ | |||
+ | .table-cell { | ||
+ | -fx-alignment: center-left; // vertical zentriert und horizontal linksbündig | ||
+ | } | ||
+ | |||
+ | .table-row-cell { | ||
+ | -fx-cell-size: 32px; // Zeilenhöhe 32 Pixel | ||
+ | } | ||
+ | |||
+ | .table-view .column-header .label { | ||
+ | -fx-alignment: cemter-left; // Label im Column-Header linksbündig ausrichten | ||
+ | } | ||
+ | |||
+ | .table-view > .column-header-background > .nested-column-header > .column-header.table-column { | ||
+ | -fx-background-image: url("http://was-weiss-ich/image.jpg"); // Icon für Column-Header | ||
+ | -fx-background-repeat: no-repeat; | ||
+ | -fx-position: left center; | ||
+ | -fx-background-position: 4 4; | ||
} | } | ||
.toolbar { | .toolbar { | ||
- | -fx-background-color: white; // Weißer Hintergrund | + | -fx-background-color: white; // Weißer Hintergrund |
- | -fx-spacing: 4; // 4 Pixel Abstand zwischen den Buttons | + | -fx-spacing: 4; // 4 Pixel Abstand zwischen den Buttons |
- | -fx-orientation: vertical; // Ausrichtung senkrecht; Standard ist waagerecht (horizontal) | + | -fx-orientation: vertical; // Ausrichtung senkrecht; Standard ist waagerecht (horizontal) |
- | -fx-min-height: 20px; // Minimale Höhe 20px | + | -fx-min-height: 20px; // Minimale Höhe 20px |
- | -fx-pref-height: 20px; // Bevorzugte Höhe 20px | + | -fx-pref-height: 20px; // Bevorzugte Höhe 20px |
- | -fx-max-height: 20px; // Maximale Höhe 20px | + | -fx-max-height: 20px; // Maximale Höhe 20px |
} | } | ||
.tooltip { | .tooltip { | ||
- | -fx-background-color: white; // Weißer Hintergrund | + | -fx-background-color: white; // Weißer Hintergrund |
- | -fx-padding: 2 6 2 6; // Abstand zwischen Text und Rand (open, rechts, unten, links) | + | -fx-padding: 2 6 2 6; // Abstand zwischen Text und Rand (open, rechts, unten, links) |
- | -fx-text-fill: red; // Textfarbe rot | + | -fx-text-fill: red; // Textfarbe rot |
+ | } | ||
+ | |||
+ | .tree-cell { | ||
+ | -fx-background-color: yellow; // Gelber Hintergrund | ||
+ | -fx-text-fill: red; // Textfarbe rot | ||
+ | } | ||
+ | |||
+ | .tree-table-cell { | ||
+ | -fx-background-color: yellow; // Gelber Hintergrund | ||
+ | -fx-text-fill: red; // Textfarbe rot | ||
+ | -fx-pref-height: 20px; // Bevorzugte Höhe 20px | ||
} | } | ||
</code> | </code> |