Components / FloatingToolbar

FloatingToolbar

Translucent row of commands over its content, with a handle that moves it.

Example

The component itself, running in WebAssembly, beside its code in a playground. Try it.

Code

use ravenrs::prelude::*;

fn floating_toolbar() -> impl View {
    let (place, level) = (State::new(None::<Point>), State::new(100.0_f32));
    FloatingToolbar::new(
        Spacer::new().frame(None, Some(200.0)).background(Semantic::Control).corner_radius(8.0),
    )
    .label("Zoom")
    .movable(place.binding())
    .action(ToolbarAction::new("Fit"))
    .action(ToolbarAction::new("Fill"))
    .separator()
    .action(ToolbarAction::new("Zoom out").icon(IconName::Minus).icon_only())
    .view(ValueSlider::new(level.binding()).range(10.0, 400.0).step(10.0).unit("%").label("Zoom level"))
    .action(ToolbarAction::new("Zoom in").icon(IconName::Plus).icon_only())
}

Open in the playground, with every example →

Full API of FloatingToolbar →