diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/PaginationPage.java b/sampler/src/main/java/atlantafx/sampler/page/components/PaginationPage.java index a3ef534..d7df92c 100644 --- a/sampler/src/main/java/atlantafx/sampler/page/components/PaginationPage.java +++ b/sampler/src/main/java/atlantafx/sampler/page/components/PaginationPage.java @@ -11,8 +11,10 @@ import atlantafx.sampler.page.Snippet; import javafx.geometry.Pos; import javafx.scene.control.Label; import javafx.scene.control.Pagination; +import javafx.scene.control.RadioButton; import javafx.scene.control.Separator; import javafx.scene.control.Spinner; +import javafx.scene.control.ToggleGroup; import javafx.scene.layout.BorderPane; import javafx.scene.layout.GridPane; import javafx.scene.layout.HBox; @@ -37,6 +39,7 @@ public class PaginationPage extends OutlinePage { addSection("Usage", usageExample()); addSection("Bullet Style", bulletStyleExample()); addSection("No Arrows", noArrowsExample()); + addSection("Page Info Alignment", pageInfoAlignmentExample()); addSection("Playground", playground()); } @@ -104,6 +107,60 @@ public class PaginationPage extends OutlinePage { return new ExampleBox(box, new Snippet(getClass(), 3), description); } + private ExampleBox pageInfoAlignmentExample() { + //snippet_4:start + var pg = new Pagination(25, 0); + pg.setMaxPageIndicatorCount(5); + + // Note this. It's another ancient #javafx-bug: + // https://bugs.openjdk.org/browse/JDK-8088711 + // Pagination doesn't calculate its size correctly. + // To work around this issue, you should adjust the pagination + // width to include page info label manually. + pg.setPrefWidth(300); + + pg.setPageFactory(index -> { + var label = new Label("Page #" + (index + 1)); + label.setStyle("-fx-font-size: 2em;"); + return new BorderPane(label); + }); + + var topRadio = new RadioButton("Top"); + topRadio.setUserData("-fx-page-information-alignment:top;"); + + var rightRadio = new RadioButton("Right"); + rightRadio.setUserData("-fx-page-information-alignment:right;"); + + var bottomRadio = new RadioButton("Bottom"); + bottomRadio.setUserData("-fx-page-information-alignment:bottom;"); + bottomRadio.setSelected(true); + + var leftRadio = new RadioButton("Left"); + leftRadio.setUserData("-fx-page-information-alignment:left;"); + + var sideGroup = new ToggleGroup(); + sideGroup.getToggles().setAll( + topRadio, rightRadio, bottomRadio, leftRadio + ); + sideGroup.selectedToggleProperty().addListener( + (obs, old, val) -> pg.setStyle(String.valueOf(val.getUserData())) + ); + //snippet_4:end + + var toggleBox = new VBox( + VGAP_10, topRadio, rightRadio, bottomRadio, leftRadio + ); + + var box = new HBox(50, pg, toggleBox); + box.setAlignment(Pos.TOP_LEFT); + var description = BBCodeParser.createFormattedText(""" + Page information alignment can be changed via [code]-fx-page-information-alignment[/code] \ + CSS variables. Unfortunately, it's not implemented as an observable property.""" + ); + + return new ExampleBox(box, new Snippet(getClass(), 4), description); + } + /////////////////////////////////////////////////////////////////////////// // Playground // /////////////////////////////////////////////////////////////////////////// diff --git a/styles/src/components/_pagination.scss b/styles/src/components/_pagination.scss index a48bb44..5fd3213 100755 --- a/styles/src/components/_pagination.scss +++ b/styles/src/components/_pagination.scss @@ -21,8 +21,8 @@ $button-radius: 10em !default; -fx-font-size: 1em; >.control-box { - -fx-padding: 2em 0 0 0; - -fx-spacing: 2; + -fx-padding: 0.5em 0 0 0; + -fx-spacing: 2px; -fx-alignment: CENTER; .number-button {