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

checkbox: Support sizable (#781)

Browse source 
| Before | After |
| - | - |
| <img width="672" alt="SCR-20250409-pgbg"
src="https://github.com/user-attachments/assets/73a46b13-a3bb-4f58-afb0-aa388bbaefb5"
/> | <img width="669" alt="SCR-20250409-phiy"
src="https://github.com/user-attachments/assets/1230a02d-cdc7-4c2e-9949-bcad09eb2edc"
/> |
This commit is contained in:
Floyd Wang 2025-04-09 17:31:56 +08:00 committed by GitHub
parent aaa88db52c
commit d04866eb77
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 30 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
crates/story/src/switch_story.rs
View file

@ -195,8 +195,9 @@ impl Render for SwitchStory {
))
.child(
Checkbox::new("check2")
.small()
.checked(self.check2)
.label("Subscribe to newsletter")
.label("订阅新闻通讯")
.on_click(cx.listener(|v, _, _, _| {
v.check2 = !v.check2;
})),
@ -211,6 +212,7 @@ impl Render for SwitchStory {
)
.child(
Checkbox::new("longlong-checkbox")
.large()
.w(px(300.))
.checked(self.check4)
.label("The long long label text.")

30
crates/ui/src/checkbox.rs
View file

@ -1,6 +1,8 @@
use crate::{h_flex, text::Text, v_flex, ActiveTheme, Disableable, IconName, Selectable};
use crate::{
h_flex, text::Text, v_flex, ActiveTheme, Disableable, IconName, Selectable, Sizable, Size,
};
use gpui::{
div, prelude::FluentBuilder as _, px, relative, svg, AnyElement, App, Div, ElementId,
div, prelude::FluentBuilder as _, px, relative, rems, svg, AnyElement, App, Div, ElementId,
InteractiveElement, IntoElement, ParentElement, RenderOnce, StatefulInteractiveElement as _,
Styled, Window,
};
@ -14,6 +16,7 @@ pub struct Checkbox {
children: Vec<AnyElement>,
checked: bool,
disabled: bool,
size: Size,
on_click: Option<Box<dyn Fn(&bool, &mut Window, &mut App) + 'static>>,
}
@ -26,6 +29,7 @@ impl Checkbox {
children: Vec::new(),
checked: false,
disabled: false,
size: Size::default(),
on_click: None,
}
}
@ -75,6 +79,13 @@ impl ParentElement for Checkbox {
}
}
impl Sizable for Checkbox {
fn with_size(mut self, size: impl Into<Size>) -> Self {
self.size = size.into();
self
}
}
impl RenderOnce for Checkbox {
fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
let (color, icon_color) = if self.disabled {
@ -94,10 +105,23 @@ impl RenderOnce for Checkbox {
.items_start()
.line_height(relative(1.))
.text_color(cx.theme().foreground)
.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,
})
.child(
v_flex()
.relative()
.size_4()
.map(|this| match self.size {
Size::XSmall => this.size_3(),
Size::Small => this.size_3p5(),
Size::Medium => this.size_4(),
Size::Large => this.size(rems(1.125)),
_ => this.size_4(),
})
.flex_shrink_0()
.border_1()
.border_color(color)