diff --git a/demo/src/pages/input/mod.rs b/demo/src/pages/input/mod.rs index bd6e3ae..c0e38d3 100644 --- a/demo/src/pages/input/mod.rs +++ b/demo/src/pages/input/mod.rs @@ -13,6 +13,11 @@ pub fn InputPage() -> impl IntoView { + + + "$" + + impl IntoView { view! { + + + "$" + + } "#, "rust" diff --git a/src/input/input.css b/src/input/input.css index 5a80a06..24a0214 100644 --- a/src/input/input.css +++ b/src/input/input.css @@ -25,3 +25,10 @@ border: none; outline: none; } + +.melt-input__suffix { + display: inline-flex; + align-items: center; + justify-content: center; + margin-left: 4px; +} diff --git a/src/input/mod.rs b/src/input/mod.rs index ba254a4..bad71b9 100644 --- a/src/input/mod.rs +++ b/src/input/mod.rs @@ -23,6 +23,11 @@ impl InputVariant { } } +#[slot] +pub struct InputSuffix { + children: Children, +} + #[component] pub fn Input( #[prop(optional, into)] value: MaybeRwSignal, @@ -31,6 +36,7 @@ pub fn Input( #[prop(optional, into)] placeholder: MaybeSignal, #[prop(optional, into)] on_focus: Option>, #[prop(optional, into)] on_blur: Option>, + #[prop(optional)] input_suffix: Option, ) -> impl IntoView { let theme = use_theme(Theme::light); mount_style("input", include_str!("./input.css")); @@ -65,7 +71,7 @@ pub fn Input( css_vars }); view! { -
+
+ { + if let Some(suffix) = input_suffix { + view! { +
+ {(suffix.children)()} +
+ }.into() + } else { + None + } + }
} } diff --git a/src/input_number/mod.rs b/src/input_number/mod.rs new file mode 100644 index 0000000..58363bb --- /dev/null +++ b/src/input_number/mod.rs @@ -0,0 +1,9 @@ +use crate::Input; +use leptos::*; + +#[component] +pub fn InputNumber() -> impl IntoView { + view! { + + } +} diff --git a/src/lib.rs b/src/lib.rs index 0e69c83..88e53b1 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -13,6 +13,7 @@ mod grid; mod icon; mod image; mod input; +mod input_number; mod layout; mod menu; pub mod mobile; @@ -42,6 +43,7 @@ pub use grid::*; pub use icon::*; pub use image::*; pub use input::*; +pub use input_number::*; pub use layout::*; pub use menu::*; pub use modal::*;