Components / DocumentTabs
DocumentTabs
Tabs for open documents that close, move, rename and say what was not saved.
Example
The component itself, running in WebAssembly, beside its code in a playground. Try it.
Code
use ravenrs::prelude::*;
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)
})
}