A political conference and discussion platform, in Rust and Dioxus
Something went wrong. Try again.
1.8 kB · 43 lines
Rust
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344//! An M3 Expressive connected button group (single-select).//!//! The name is historical: this was a segmented button, which the expressive//! update deprecated in favour of the connected button group that replaces it.//! The widget keeps its name so no call site churns; what changed is the//! behaviour — each button is its own shape and morphs when pressed and when//! selected, rather than being a slice of one clipped bar.
use dioxus::prelude::*;
/// A single-select connected button group: a row of icon buttons, the chosen one/// filled with secondary-container and shape-morphed. Emits the chosen value/// through `on_select`. `segments` is a list of `(value, material-icon)` pairs.#[component]pub fn SegmentedButton( segments: Vec<(String, String)>, selected: String, on_select: EventHandler<String>,) -> Element { rsx! { div { class: "m3-segmented", role: "group", for (value , icon) in segments { { let is_sel = value == selected; let chosen = value.clone(); rsx! { button { key: "{value}", r#type: "button", class: if is_sel { "m3-segment selected state-layer" } else { "m3-segment state-layer" }, "aria-pressed": if is_sel { "true" } else { "false" }, onclick: move |_| on_select.call(chosen.clone()), if is_sel { span { class: "material-icons m3-segment-check", "check" } } span { class: "material-icons", "{icon}" } } } } } } }}