diff --git a/src/SUMMARY.md b/src/SUMMARY.md index 2b8f1566..87b7eaec 100644 --- a/src/SUMMARY.md +++ b/src/SUMMARY.md @@ -71,7 +71,7 @@ - [Fonts](./fyrox/ui/font.md) - [Style](./fyrox/ui/style.md) - [Widgets](./fyrox/ui/widgets.md) - - [Custom Widget](./fyrox/ui/custom.md) + - [Custom widget](./fyrox/ui/custom.md) - [Button](./fyrox/ui/button.md) - [Border](./fyrox/ui/border.md) - [Canvas](./fyrox/ui/canvas.md) @@ -95,10 +95,10 @@ - [Rect (WIP)](./fyrox/ui/rect.md) - [Scroll bar](./fyrox/ui/scroll_bar.md) - [Scroll panel (WIP)](./fyrox/ui/scroll_panel.md) - - [Scroll viewer (WIP)](./fyrox/ui/scroll_viewer.md) + - [Scroll viewer](./fyrox/ui/scroll_viewer.md) - [Screen](./fyrox/ui/screen.md) - [Stack panel](./fyrox/ui/stack_panel.md) - - [Tab Control](./fyrox/ui/tab_control.md) + - [Tab control](./fyrox/ui/tab_control.md) - [Text](./fyrox/ui/text.md) - [Text box](./fyrox/ui/text_box.md) - [Tree (WIP)](./fyrox/ui/tree.md) diff --git a/src/fyrox/ui/screen.md b/src/fyrox/ui/screen.md index 44698056..bb86b88d 100644 --- a/src/fyrox/ui/screen.md +++ b/src/fyrox/ui/screen.md @@ -21,6 +21,7 @@ There are two major ways to create a Screen widget - using the editor or by code Go to `Create -> UI` menu and find `Screen` widget there, make sure it is a direct child of the root node of the hierarchy. Alternatively, you can right-click on the root node in the hierarchy and click `Create Child -> Screen`. After that you can add any number of children nodes to it. +Screen widget does not have any special properties, so you do not need to tweak it at all. ### From Code diff --git a/src/fyrox/ui/scroll_viewer.md b/src/fyrox/ui/scroll_viewer.md index 17711239..c904462f 100644 --- a/src/fyrox/ui/scroll_viewer.md +++ b/src/fyrox/ui/scroll_viewer.md @@ -1,3 +1,91 @@ -# Scroll viewer (WIP) +# Scroll viewer -![scroll viewer](scroll_bar.gif) \ No newline at end of file +![scroll viewer](scroll_bar.gif) + +Scroll viewer is a scrollable region with two scroll bars for each axis. It is used to wrap a content of unknown +size to ensure that all of it will be accessible in its parent widget bounds. For example, it could be used in a +[Window](window.md) widget to allow a content of the window to be accessible, even if the window is smaller than +the content. + +## Example + +A scroll viewer widget could be created using `ScrollViewerBuilder`: + +```rust +# extern crate fyrox; +# use fyrox::gui::{ +# button::ButtonBuilder, core::pool::Handle, scroll_viewer::ScrollViewerBuilder, +# stack_panel::StackPanelBuilder, text::TextBuilder, widget::WidgetBuilder, BuildContext, +# UiNode, +# }; +# +fn create_scroll_viewer(ctx: &mut BuildContext) -> Handle { + ScrollViewerBuilder::new(WidgetBuilder::new()) + .with_content( + StackPanelBuilder::new( + WidgetBuilder::new() + .with_child( + ButtonBuilder::new(WidgetBuilder::new()) + .with_text("Click Me!") + .build(ctx), + ) + .with_child( + TextBuilder::new(WidgetBuilder::new()) + .with_text("Some\nlong\ntext") + .build(ctx), + ), + ) + .build(ctx), + ) + .build(ctx) +} +``` + +Keep in mind, that you can change the content of a scroll viewer at runtime using `ScrollViewerMessage::Content` message. + +## Scrolling Speed and Controls + +Scroll viewer can have an arbitrary scrolling speed for each axis. Scrolling is performed via mouse wheel and by default it +scrolls vertical axis, which can be changed by holding `Shift` key. Scrolling speed can be set during the build phase: + +```rust +# extern crate fyrox; +# use fyrox::gui::{ +# core::pool::Handle, scroll_viewer::ScrollViewerBuilder, widget::WidgetBuilder, +# BuildContext, UiNode, +# }; +# +fn create_scroll_viewer(ctx: &mut BuildContext) -> Handle { + ScrollViewerBuilder::new(WidgetBuilder::new()) + // Set vertical scrolling speed twice as fast as default scrolling speed. + .with_v_scroll_speed(60.0) + // Set horizontal scrolling speed slightly lower than the default value (30.0). + .with_h_scroll_speed(20.0) + .build(ctx) +} +``` + +Also, it could be set using `ScrollViewerMessage::HScrollSpeed` or `ScrollViewerMessage::VScrollSpeed` messages. + +## Bringing a child into view + +Calculates the scroll values to bring a desired child into view, it can be used for automatic navigation: + +```rust +# extern crate fyrox; +# use fyrox::gui::{ +# core::pool::Handle, message::MessageDirection, scroll_viewer::ScrollViewerMessage, UiNode, +# UserInterface, +# }; +fn bring_child_into_view( + scroll_viewer: Handle, + child: Handle, + ui: &UserInterface, +) { + ui.send_message(ScrollViewerMessage::bring_into_view( + scroll_viewer, + MessageDirection::ToWidget, + child, + )) +} +``` \ No newline at end of file