RavenRS · Rust GUI

DocumentTabs

Edit and run the DocumentTabs RavenRS example in your browser. Explore its Rust code and download a Cargo project for desktop and WebAssembly.

One declarative Rust interface, GPU rendering, reactive state and semantic design tokens. Free and open source under MIT OR Apache-2.0.

Rust source

fn document_tabs() -> impl View {
    let tabs = State::new(vec![
        DocumentTab::new(1, "Wedding").icon(IconName::Camera),
        // ravenrs-lint: allow(raw_color) the tab keeps the color its owner picked for that document
        DocumentTab::new(2, "Portraits").unsaved(true).color(Color::rgb(0.25, 0.55, 0.95)),
        DocumentTab::new(3, "Studio with a long name that does not fit"),
        DocumentTab::new(4, "Home").closable(false),
    ]);
    let active = State::new(1_u64);
    view_fn(move || {
        let (closed, moved, renamed) = (tabs.clone(), tabs.clone(), tabs.clone());
        DocumentTabs::new(tabs.get(), active.binding())
            .on_close(move |id| closed.update(|list| list.retain(|tab| tab.id != id)))
            .on_reorder(move |from, to| {
                moved.update(|list| {
                    let tab = list.remove(from);
                    list.insert(to, tab);
                });
            })
            .on_rename(move |id, name| {
                renamed.update(|list| {
                    if let Some(tab) = list.iter_mut().find(|tab| tab.id == id) {
                        tab.title = name;
                    }
                });
            })
            .on_new(|| {})
            .fade(Semantic::SurfaceElevated)
    })
}

The interactive preview loads when JavaScript and WebGPU or WebGL2 are available. You can read the guide and examples here at any time.

More examples