Components / SwatchGrid
SwatchGrid
Grid of color swatches; the handler gets the keys held with the click.
Example
The component itself, running in WebAssembly, beside its code in a playground. Try it.
Code
use ravenrs::prelude::*;
fn swatch_grid() -> impl View {
let (front, back) = (State::new(Color::hex(0xe11d48)), State::new(Color::hex(0x2563eb)));
let (for_front, for_back, shown) = (front.clone(), back.clone(), front.clone());
VStack::new((
view_fn(move || {
let (for_front, for_back) = (for_front.clone(), for_back.clone());
SwatchGrid::new([
(Color::hex(0xe11d48), "Rose"),
(Color::hex(0xf59e0b), "Amber"),
(Color::hex(0x16a34a), "Green"),
(Color::hex(0x2563eb), "Blue"),
(Color::hex(0x7c3aed), "Violet"),
(Color::hex(0x111827), "Ink"),
])
.columns(3)
.selected(Some(shown.get()))
.on_pick(move |color, held| {
// With Cmd or Ctrl, the color goes to the background.
if held.meta || held.ctrl { for_back.set(color) } else { for_front.set(color) }
})
}),
Text::new("Click: foreground. Cmd or Ctrl and click: background.").style(TextStyle::Caption),
))
.spacing(8.0)
}