Theme · Editing: segments sized by their labels, a thumb that covers its segment
A segmented control's segments now take their labels' widths first and share the spare room, so a label ends in an ellipsis only when the whole strip lacks room. The thumb's insets meet the strip's padding again, and each segment is measured from its borderless wrapper, so the thumb covers the chosen segment exactly. Tests hold Comfortable whole at 280px and the thumb to the chosen segment's bounds. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
1860764d95
commit
d49e02ceee
3 files changed
+48
-8
No files matched your search
@@ -110,8 +110,9 @@ impl RenderOnce for SegmentedControl {
|
||||
}| {
|
||||
div()
|
||||
.absolute()
|
||||
.top_0p5()
|
||||
.bottom_0p5()
|
||||
.top_0()
|
||||
.bottom_0()
|
||||
.debug_selector(|| "segment-thumb".into())
|
||||
.rounded(theme.radius(Radius::Md))
|
||||
.bg(colors.surface)
|
||||
.border_1()
|
||||
@@ -135,13 +136,13 @@ impl RenderOnce for SegmentedControl {
|
||||
let on = ix == chosen;
|
||||
let fg = if on { colors.fg } else { colors.fg_muted };
|
||||
let (focus, reveal) = stops.remove(0);
|
||||
let named = value.clone();
|
||||
let (named, labeled) = (value.clone(), value.clone());
|
||||
let (change, measure) = (self.on_change.clone(), state.clone());
|
||||
let segment = div()
|
||||
.id(("segment", ix))
|
||||
.relative()
|
||||
.flex()
|
||||
.flex_1()
|
||||
.flex_auto()
|
||||
.min_w_0()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
@@ -176,15 +177,20 @@ impl RenderOnce for SegmentedControl {
|
||||
segment.child(Icon::new(icon).size(icon_size).color(fg))
|
||||
})
|
||||
.when(!label.is_empty(), |segment| {
|
||||
segment.child(div().min_w_0().child(Ellipsis::new(label)))
|
||||
})
|
||||
.child(measure_item(measure, ix, Axis::Horizontal));
|
||||
segment.child(
|
||||
div()
|
||||
.min_w_0()
|
||||
.debug_selector(move || format!("segment-label {labeled}"))
|
||||
.child(Ellipsis::new(label)),
|
||||
)
|
||||
});
|
||||
div()
|
||||
.relative()
|
||||
.flex()
|
||||
.flex_1()
|
||||
.flex_auto()
|
||||
.min_w_0()
|
||||
.child(segment)
|
||||
.child(measure_item(measure, ix, Axis::Horizontal))
|
||||
.child(reveal)
|
||||
});
|
||||
let control = div()
|
||||
|
||||
Reference in new issue
Block a user