add segmented control

examples/gallery/src/main.rs

@@ -20,6 +20,7 @@ use gpui_native_core::popover::Popover;
 use gpui_native_core::progress::Progress;
 use gpui_native_core::radio::{Radio, RadioGroup};
 use gpui_native_core::scroll_area::ScrollArea;
+use gpui_native_core::segmented::{Segmented, SegmentedOption};
 use gpui_native_core::select::{Select, SelectOption};
 use gpui_native_core::slider::Slider;
 use gpui_native_core::switch::Switch;
@@ -31,7 +32,7 @@ use gpui_native_data::sidebar::{Sidebar, SidebarEntry};
 use gpui_native_data::tabs::{Tab, Tabs};
 use gpui_native_data::tree::{Tree, TreeItem};
 use gpui_native_icons::{IconAssets, IconRole, icon};
-use gpui_native_theme::{ActiveTheme as _, Theme};
+use gpui_native_theme::{ActiveTheme as _, Size, Theme};
 use gpui_platform::application;
 
 struct Gallery {
@@ -45,6 +46,7 @@ struct Gallery {
     popover_open: bool,
     menu_open: bool,
     strategy: Option<Strategy>,
+    explore_filter: ExploreFilter,
     dialog_open: bool,
     alert_open: bool,
     update_alert_dismissed: bool,
@@ -65,6 +67,15 @@ enum Strategy {
     Uncensored,
 }
 
+/// The segmented section's demo value.
+#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
+enum ExploreFilter {
+    #[default]
+    All,
+    Popular,
+    Recent,
+}
+
 /// A demo model for the tree section: the app owns the real tree and its
 /// expansion set, and flattens the visible nodes for the component.
 #[derive(Clone)]
@@ -462,6 +473,58 @@ impl Render for Gallery {
                         )
                     }),
             )
+            .child(
+                div()
+                    .flex()
+                    .flex_col()
+                    .gap_2()
+                    .child(section_label(
+                        "segmented · native refs — NSSegmentedControl, WinUI Segmented, Adwaita AdwToggleGroup",
+                        colors,
+                    ))
+                    .child({
+                        let gallery = gallery.clone();
+                        div()
+                            .flex()
+                            .flex_col()
+                            .gap_2()
+                            .child(
+                                Segmented::new("gallery-explore", self.explore_filter)
+                                    .options(vec![
+                                        (ExploreFilter::All, "All"),
+                                        (ExploreFilter::Popular, "Popular"),
+                                        (ExploreFilter::Recent, "Recent"),
+                                    ])
+                                    .on_change(move |next, _, cx| {
+                                        gallery.update(cx, |gallery, cx| {
+                                            gallery.explore_filter = next;
+                                            cx.notify();
+                                        });
+                                    }),
+                            )
+                            .child(
+                                Segmented::new("gallery-explore-medium", self.explore_filter)
+                                    .options(vec![
+                                        SegmentedOption::new(ExploreFilter::All, "All")
+                                            .icon(IconRole::Check),
+                                        SegmentedOption::new(ExploreFilter::Popular, "Popular")
+                                            .icon(IconRole::Search),
+                                        SegmentedOption::new(ExploreFilter::Recent, "Recent")
+                                            .icon(IconRole::Info),
+                                    ])
+                                    .with_size(Size::Medium),
+                            )
+                            .child(
+                                Segmented::new("gallery-explore-large", self.explore_filter)
+                                    .options(vec![
+                                        (ExploreFilter::All, "All"),
+                                        (ExploreFilter::Popular, "Popular"),
+                                        (ExploreFilter::Recent, "Recent"),
+                                    ])
+                                    .large(),
+                            )
+                    }),
+            )
             .child(
                 v_flex()
                     .gap_2()
@@ -1330,6 +1393,7 @@ fn main() {
                         popover_open: false,
                         menu_open: false,
                         strategy: Some(Strategy::Curated),
+                        explore_filter: ExploreFilter::All,
                         dialog_open: false,
                         alert_open: false,
                         update_alert_dismissed: false,