bevy_scrollbar 0.6.0

Bevy plugin providing a scrollbar.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

//! Example showing how to spawn a scrollbar directly.

use bevy::{
    ecs::spawn::{SpawnIter, SpawnWith},
    prelude::*,
};
use bevy_scrollbar::{Scrollbar, ScrollbarPlugin};

fn main() {
    App::new()
        .add_plugins((DefaultPlugins, ScrollbarPlugin))
        .add_systems(Startup, setup)
        .run();
}

fn setup(mut commands: Commands) {
    commands.spawn(Camera2d);

    commands.spawn((
        // Container node for the overflowed node and its scrollbar that are usually siblings.
        Node {
            width: Val::Percent(100.0),
            height: Val::Percent(100.0),
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Center,
            ..default()
        },
        Children::spawn(SpawnWith(|container: &mut ChildSpawner| {
            // Overflowed node
            let scrollable = container
                .spawn((
                    Node {
                        height: Val::Percent(80.0),
                        border: UiRect::all(Val::Px(5.0)).with_right(Val::Px(2.5)),
                        // You can omit the overflow field for a vertical scrollbar
                        overflow: Overflow::scroll_y(),
                        flex_direction: FlexDirection::Column,
                        ..default()
                    },
                    BorderColor::all(Color::BLACK),
                    Children::spawn(SpawnIter(
                        (0..100).map(|i| Text::new(format!("  Scrolling {i}!  "))),
                    )),
                ))
                .id();

            // Scrollbar
            container.spawn((
                Scrollbar { scrollable },
                Node {
                    width: Val::Percent(1.5),
                    // Same height as the scrollable node
                    height: Val::Percent(80.0),
                    border: UiRect::all(Val::Px(5.0)).with_left(Val::Px(2.5)),
                    ..default()
                },
                BorderColor::all(Color::BLACK),
            ));
        })),
    ));
}