form: Renamed column to columns. (#1522)
## Break Change - Renamed `column` to `columns` and receive `usize` type.
This commit is contained in:
Jason Lee
GitHub
parent
aea8223637
commit
469b53178b
4 changed files with 20 additions and 54 deletions
|
|
@ -28,7 +28,7 @@ pub struct FormStory {
|
|||
date: Entity<DatePickerState>,
|
||||
layout: Axis,
|
||||
size: Size,
|
||||
column: u16,
|
||||
columns: usize,
|
||||
}
|
||||
|
||||
impl super::Story for FormStory {
|
||||
|
|
@ -93,7 +93,7 @@ impl FormStory {
|
|||
subscribe_email: false,
|
||||
layout: Axis::Vertical,
|
||||
size: Size::default(),
|
||||
column: 1,
|
||||
columns: 1,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -106,7 +106,7 @@ impl Focusable for FormStory {
|
|||
|
||||
impl Render for FormStory {
|
||||
fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
|
||||
let is_multi_column = self.column > 1;
|
||||
let is_multi_column = self.columns > 1;
|
||||
let is_horizontal = self.layout.is_horizontal();
|
||||
|
||||
v_flex()
|
||||
|
|
@ -138,13 +138,13 @@ impl Render for FormStory {
|
|||
)
|
||||
.child(
|
||||
Switch::new("column")
|
||||
.checked(self.column > 1)
|
||||
.label("Multi Column")
|
||||
.checked(self.columns > 1)
|
||||
.label("Multi Columns")
|
||||
.on_click(cx.listener(|this, checked: &bool, _, cx| {
|
||||
if *checked {
|
||||
this.column = 2;
|
||||
this.columns = 2;
|
||||
} else {
|
||||
this.column = 1;
|
||||
this.columns = 1;
|
||||
}
|
||||
cx.notify();
|
||||
})),
|
||||
|
|
@ -186,7 +186,7 @@ impl Render for FormStory {
|
|||
v_form()
|
||||
.layout(self.layout)
|
||||
.with_size(self.size)
|
||||
.column(self.column)
|
||||
.columns(self.columns)
|
||||
.label_width(px(if is_multi_column { 100. } else { 140. }))
|
||||
.child(
|
||||
form_field().label_fn(|_, _| "Name").child(
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ pub(crate) fn init(cx: &mut App) {
|
|||
cx.bind_keys([KeyBinding::new("escape", Cancel, Some(CONTEXT))])
|
||||
}
|
||||
|
||||
/// A drawer component that slides in from the side of the window.
|
||||
#[derive(IntoElement)]
|
||||
pub struct Drawer {
|
||||
pub(crate) focus_handle: FocusHandle,
|
||||
|
|
@ -38,6 +39,7 @@ pub struct Drawer {
|
|||
}
|
||||
|
||||
impl Drawer {
|
||||
/// Creates a new drawer.
|
||||
pub fn new(_: &mut Window, cx: &mut App) -> Self {
|
||||
Self {
|
||||
focus_handle: cx.focus_handle(),
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ pub fn form_field() -> FormField {
|
|||
FormField::new()
|
||||
}
|
||||
|
||||
/// A form element that contains multiple form fields.
|
||||
#[derive(IntoElement)]
|
||||
pub struct Form {
|
||||
fields: Vec<FormField>,
|
||||
|
|
@ -37,7 +38,7 @@ struct FieldProps {
|
|||
layout: Axis,
|
||||
/// Field gap
|
||||
gap: Option<Pixels>,
|
||||
column: u16,
|
||||
columns: usize,
|
||||
}
|
||||
|
||||
impl Default for FieldProps {
|
||||
|
|
@ -48,7 +49,7 @@ impl Default for FieldProps {
|
|||
layout: Axis::Vertical,
|
||||
size: Size::default(),
|
||||
gap: None,
|
||||
column: 1,
|
||||
columns: 1,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -110,8 +111,8 @@ impl Form {
|
|||
/// Set the column count for the form.
|
||||
///
|
||||
/// Default is 1.
|
||||
pub fn column(mut self, column: u16) -> Self {
|
||||
self.props.column = column;
|
||||
pub fn columns(mut self, columns: usize) -> Self {
|
||||
self.props.columns = columns;
|
||||
self
|
||||
}
|
||||
}
|
||||
|
|
@ -467,7 +468,7 @@ impl RenderOnce for Form {
|
|||
.gap_x(gap * 3.)
|
||||
.gap_y(gap)
|
||||
.grid()
|
||||
.grid_cols(props.column)
|
||||
.grid_cols(props.columns as u16)
|
||||
.children(
|
||||
self.fields
|
||||
.into_iter()
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ h_form()
|
|||
|
||||
```rust
|
||||
v_form()
|
||||
.column(2) // Two-column layout
|
||||
.columns(2) // Two-column layout
|
||||
.child(
|
||||
form_field()
|
||||
.label("First Name")
|
||||
|
|
@ -293,7 +293,7 @@ v_form()
|
|||
|
||||
```rust
|
||||
v_form()
|
||||
.column(3) // Three-column grid
|
||||
.columns(3) // Three-column grid
|
||||
.child(form_field().label("First").child(input1))
|
||||
.child(form_field().label("Second").child(input2))
|
||||
.child(form_field().label("Third").child(input3))
|
||||
|
|
@ -309,7 +309,7 @@ v_form()
|
|||
|
||||
```rust
|
||||
v_form()
|
||||
.column(4)
|
||||
.columns(4)
|
||||
.child(form_field().label("A").child(input_a))
|
||||
.child(form_field().label("B").child(input_b))
|
||||
.child(
|
||||
|
|
@ -325,7 +325,7 @@ v_form()
|
|||
|
||||
```rust
|
||||
v_form()
|
||||
.column(if is_mobile { 1 } else { 2 })
|
||||
.columns(if is_mobile { 1 } else { 2 })
|
||||
.child(form_field().label("Name").child(name_input))
|
||||
.child(form_field().label("Email").child(email_input))
|
||||
.child(
|
||||
|
|
@ -336,43 +336,6 @@ v_form()
|
|||
)
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
### Form
|
||||
|
||||
| Method | Description |
|
||||
| ----------------------- | ------------------------------------- |
|
||||
| `vertical()` | Create vertical layout form |
|
||||
| `horizontal()` | Create horizontal layout form |
|
||||
| `layout(Axis)` | Set form layout direction |
|
||||
| `label_width(Pixels)` | Set label width (horizontal layout) |
|
||||
| `label_text_size(Rems)` | Set label text size |
|
||||
| `gap(Pixels)` | Set gap between fields |
|
||||
| `column(u16)` | Set number of columns for grid layout |
|
||||
| `child(FormField)` | Add form field |
|
||||
| `children(iter)` | Add multiple form fields |
|
||||
| `large()` | Set large size |
|
||||
| `small()` | Set small size |
|
||||
|
||||
### FormField
|
||||
|
||||
| Method | Description |
|
||||
| --------------------- | -------------------------------- |
|
||||
| `label(str)` | Set field label |
|
||||
| `label_fn(fn)` | Set dynamic label using function |
|
||||
| `description(str)` | Set field description |
|
||||
| `description_fn(fn)` | Set dynamic description |
|
||||
| `required(bool)` | Mark field as required |
|
||||
| `visible(bool)` | Set field visibility |
|
||||
| `no_label_indent()` | Disable label indentation |
|
||||
| `items_start()` | Align items to start |
|
||||
| `items_center()` | Align items to center |
|
||||
| `items_end()` | Align items to end |
|
||||
| `col_span(u16)` | Set column span |
|
||||
| `col_start(i16)` | Set starting column |
|
||||
| `col_end(i16)` | Set ending column |
|
||||
| `track_focus(handle)` | Track focus for field |
|
||||
|
||||
## Examples
|
||||
|
||||
### User Registration Form
|
||||
|
|
|
|||
Loading…
Reference in a new issue