From c91d8060573f396edd27112ba63ff3e96807a5b7 Mon Sep 17 00:00:00 2001
From: obito <1255116997@qq.com>
Date: Fri, 21 Nov 2025 11:49:30 +0800
Subject: [PATCH] tab: Allow tab item to fill remaining space. (#1654)

<img width="2766" height="1818" alt="image"
src="https://github.com/user-attachments/assets/f5c275f7-1165-4a0d-a24d-d35cefb64e2d"
/>
---
 crates/story/src/tabs_story.rs | 15 +++++++++++++++
 crates/ui/src/tab/tab.rs       |  1 +
 2 files changed, 16 insertions(+)

diff --git a/crates/story/src/tabs_story.rs b/crates/story/src/tabs_story.rs
index 420400b8..c6671b16 100644
--- a/crates/story/src/tabs_story.rs
+++ b/crates/story/src/tabs_story.rs
@@ -245,5 +245,20 @@ impl Render for TabsStory {
                         .children(vec!["Appearance", "Settings", "About", "License"]),
                 ),
             )
+
+            .child(
+                section("Segmented Tabs (With filling space)").max_w_md().child(
+                    TabBar::new("flex tabs")
+                        .w_full()
+                        .segmented()
+                        .with_size(self.size)
+                        .selected_index(self.active_tab_ix)
+                        .on_click(cx.listener(|this, ix: &usize, window, cx| {
+                            this.set_active_tab(*ix, window, cx);
+                        }))
+                        .child(Tab::new().flex_1().label("About"))
+                        .child(Tab::new().flex_1().label("Profile"))
+                ),
+            )
     }
 }
diff --git a/crates/ui/src/tab/tab.rs b/crates/ui/src/tab/tab.rs
index c5eeb42c..a8ff3551 100644
--- a/crates/ui/src/tab/tab.rs
+++ b/crates/ui/src/tab/tab.rs
@@ -620,6 +620,7 @@ impl RenderOnce for Tab {
             .when_some(self.prefix, |this, prefix| this.child(prefix))
             .child(
                 h_flex()
+                    .flex_1()
                     .h(inner_height)
                     .line_height(relative(1.))
                     .items_center()