form: Add col_start and col_end for the fields (#1251)

* Continue https://github.com/longbridge/gpui-component/pull/1250
This commit is contained in:
Floyd Wang 2025-09-16 20:30:45 +08:00 committed by GitHub
parent 731ab958f8
commit 5ddaa9f5aa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 20 additions and 2 deletions

View file

@ -242,7 +242,6 @@ impl Render for FormStory {
form_field()
.label("Please select your birthday")
.description("Select your birthday, we will send you a gift.")
.when(is_multi_column, |this| this.col_span(2))
.child(DatePicker::new(&self.date)),
)
.child(
@ -250,6 +249,7 @@ impl Render for FormStory {
.when(is_horizontal && is_multi_column, |this| {
this.no_label_indent()
})
.when(is_multi_column, |this| this.col_start(1))
.child(
Switch::new("subscribe-newsletter")
.label("Subscribe our newsletter")

View file

@ -197,6 +197,8 @@ pub struct FormField {
align_items: Option<AlignItems>,
props: FieldProps,
col_span: u16,
col_start: Option<i16>,
col_end: Option<i16>,
}
impl FormField {
@ -214,6 +216,8 @@ impl FormField {
align_items: None,
props: FieldProps::default(),
col_span: 1,
col_start: None,
col_end: None,
}
}
@ -315,13 +319,25 @@ impl FormField {
self
}
/// Set the column span for the form field.
/// Sets the column span for the form field.
///
/// Default is 1.
pub fn col_span(mut self, col_span: u16) -> Self {
self.col_span = col_span;
self
}
/// Sets the column start of this form field.
pub fn col_start(mut self, col_start: i16) -> Self {
self.col_start = Some(col_start);
self
}
/// Sets the column end of this form field.
pub fn col_end(mut self, col_end: i16) -> Self {
self.col_end = Some(col_end);
self
}
}
impl ParentElement for FormField {
fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
@ -372,6 +388,8 @@ impl RenderOnce for FormField {
.flex_1()
.gap(gap / 2.)
.col_span(self.col_span)
.when_some(self.col_start, |this, start| this.col_start(start))
.when_some(self.col_end, |this, end| this.col_end(end))
.child(
// This warp for aligning the Label + Input
wrap_div(layout)