diff --git a/thaw/src/grid/docs/mod.md b/thaw/src/grid/docs/mod.md index 11d929dd..5d5eb38f 100644 --- a/thaw/src/grid/docs/mod.md +++ b/thaw/src/grid/docs/mod.md @@ -101,6 +101,8 @@ view! { | cols | `Signal` | `1` | Number of grids displayed. | | x_gap | `Signal` | `0` | Horizontal gap. | | y_gap | `Signal` | `0` | Vertical gap. | +| min | `Signal` | `0px` | Min width of columns. | +| max | `Signal` | `1fr` | Max width of columns. | | children | `Children` | | | ### GridItem Props diff --git a/thaw/src/grid/mod.rs b/thaw/src/grid/mod.rs index a3eab9e7..932d22b1 100644 --- a/thaw/src/grid/mod.rs +++ b/thaw/src/grid/mod.rs @@ -15,13 +15,23 @@ pub fn Grid( /// Vertical gap. #[prop(optional, into)] y_gap: Signal, + /// The min width of columns. + /// Defaults to "0px". + #[prop(into, default = "0px".into())] + min: Signal, + /// The max width of columns. + /// Defaults to "1fr". + #[prop(into, default = "1fr".into())] + max: Signal, children: Children, ) -> impl IntoView { let style = Memo::new(move |_| { let mut style = String::from("display: grid;"); style.push_str(&format!( - "grid-template-columns: repeat({}, minmax(0px, 1fr));", - cols.get() + "grid-template-columns: repeat({}, minmax({}, {}));", + cols.get(), + min.get(), + max.get() )); style.push_str(&format!("grid-gap: {}px {}px;", y_gap.get(), x_gap.get())); style diff --git a/thaw/src/input/docs/mod.md b/thaw/src/input/docs/mod.md index 3356b26b..be0801cc 100644 --- a/thaw/src/input/docs/mod.md +++ b/thaw/src/input/docs/mod.md @@ -143,7 +143,7 @@ view! { | autofocus | `Signal` | `false` | Whether the input receives focus automatically. | | disabled | `Signal` | `false` | Whether the input is disabled. | | readonly | `Signal` | `false` | Whether the input is readonly. | -| input_size | `Signal>` | `None` | The input size width. | +| input_size | `Signal>` | `None` | The input size width. | | on_focus | `Option>` | `None` | Callback triggered when the input is focussed on. | | on_blur | `Option>` | `None` | Callback triggered when the input is blurred. | | parser | `OptionalProp>>` | `None` | Modifies the user input before assigning it to the value. | diff --git a/thaw/src/input/mod.rs b/thaw/src/input/mod.rs index e7ec429f..9b36181a 100644 --- a/thaw/src/input/mod.rs +++ b/thaw/src/input/mod.rs @@ -49,7 +49,7 @@ pub fn Input( readonly: Signal, /// Input size width. #[prop(optional, into)] - input_size: Signal>, + input_size: Signal>, #[prop(optional)] input_prefix: Option, #[prop(optional)] input_suffix: Option, #[prop(optional, into)] input_style: MaybeProp, diff --git a/thaw/src/spin_button/docs/mod.md b/thaw/src/spin_button/docs/mod.md index e2671534..37562642 100644 --- a/thaw/src/spin_button/docs/mod.md +++ b/thaw/src/spin_button/docs/mod.md @@ -113,6 +113,7 @@ view! { | max | `Signal` | `T::max_value()` | The maximum number that the input value can take. | | disabled | `Signal` | `false` | Whether the input is disabled. | | size | `Signal` | `SpinButtonSize::Medium` | Size of the input. | +| input_size | `Signal>` | `None` | The input size width. | | parser | `OptionalProp>>` | `None` | Modifies the user input before assigning it to the value. | | format | `OptionalProp>` | `None` | Formats the value to be shown to the user. | diff --git a/thaw/src/spin_button/mod.rs b/thaw/src/spin_button/mod.rs index af7fe106..43a75747 100644 --- a/thaw/src/spin_button/mod.rs +++ b/thaw/src/spin_button/mod.rs @@ -49,6 +49,9 @@ pub fn SpinButton( /// Size of the input. #[prop(optional, into)] size: Signal, + /// Input size width. + #[prop(optional, into)] + input_size: Signal>, /// Modifies the user input before assigning it to the value. #[prop(optional, into)] parser: OptionalProp>>, @@ -116,6 +119,7 @@ where disabled=move || disabled.get() placeholder=move || placeholder.get() value=initialization_value + size=input_size prop:value=move || { let value = value.get(); if let Some(format) = format.as_ref() {