dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

radio: Render the label based on its own size (#1114)

Browse source
This commit is contained in:
Floyd Wang 2025-08-06 15:29:07 +08:00 committed by GitHub
parent 9a040eaaac
commit 0ab497ea1d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 43 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
crates/story/src/radio_story.rs
View file

@ -4,8 +4,9 @@ use gpui::{
};
use gpui_component::{
h_flex,
radio::{Radio, RadioGroup},
v_flex, ActiveTheme,
v_flex, ActiveTheme, Sizable,
};
use crate::section;
@ -99,15 +100,42 @@ impl Render for RadioStory {
.disabled(true),
),
)
.child(
section("Sizeable").child(
h_flex()
.h_full()
.gap_x_4()
.child(
Radio::new("xsmall")
.label("Small")
.xsmall()
.checked(self.radio_check2)
.on_click(cx.listener(|this, v, _, _| {
this.radio_check2 = *v;
})),
)
.child(
Radio::new("large")
.label("Large")
.large()
.checked(self.radio_check2)
.on_click(cx.listener(|this, v, _, _| {
this.radio_check2 = *v;
})),
),
),
)
.child(
section("Radio Group").max_w_md().child(
RadioGroup::horizontal("radio_group_1")
.children(["One", "Two", "Three"])
.selected_index(self.radio_group_checked)
.on_change(cx.listener(|this, selected_ix: &usize, _, cx| {
this.radio_group_checked = Some(*selected_ix);
cx.notify();
})),
v_flex().child(
RadioGroup::horizontal("radio_group_1")
.children(["One", "Two", "Three"])
.selected_index(self.radio_group_checked)
.on_change(cx.listener(|this, selected_ix: &usize, _, cx| {
this.radio_group_checked = Some(*selected_ix);
cx.notify();
})),
),
),
)
.child(

7
crates/ui/src/radio.rs
View file

@ -112,6 +112,13 @@ impl RenderOnce for Radio {
.text_color(cx.theme().foreground)
.items_start()
.line_height(relative(1.))
.map(|this| match self.size {
Size::XSmall => this.text_xs(),
Size::Small => this.text_sm(),
Size::Medium => this.text_base(),
Size::Large => this.text_lg(),
_ => this,
})
.refine_style(&self.style)
.child(
div()