adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-08 19:03:09 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: input component add prefix slot

Browse source
This commit is contained in:
luoxiao 2023-11-16 20:25:22 +08:00
parent e74923b036
commit 58e0cc1365
4 changed files with 77 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
demo/Cargo.toml
View file

@ -16,6 +16,7 @@ icondata = { version = "0.1.0", features = [
"AiCloseOutlined", "AiCloseOutlined",
"AiCheckOutlined", "AiCheckOutlined",
"AiGithubOutlined", "AiGithubOutlined",
"AiUserOutlined",
] } ] }
prisms = { git = "https://github.com/luoxiaozero/prisms", rev = "16d4d34b93fc20578ebf03137d54ecc7eafa4d4b" } prisms = { git = "https://github.com/luoxiaozero/prisms", rev = "16d4d34b93fc20578ebf03137d54ecc7eafa4d4b" }

66
demo/src/pages/input/mod.rs
View file

@ -13,11 +13,46 @@ pub fn InputPage() -> impl IntoView {
<Space vertical=true> <Space vertical=true>
<Input value/> <Input value/>
<Input value variant=InputVariant::Password placeholder="Password"/> <Input value variant=InputVariant::Password placeholder="Password"/>
</Space>
<DemoCode
slot
html=highlight_str!(
r#"
let value = create_rw_signal(String::from("o"));
view! {
<Space vertical=true>
<Input value/>
<Input value variant=InputVariant::Password placeholder="Password"/>
</Space>
}
"#,
"rust"
)
>
""
""
</DemoCode>
</Demo>
<h1>"Prefix & Suffix"</h1>
<Demo>
<Space vertical=true>
<Input value>
<InputPrefix slot>
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiUserOutlined)/>
</InputPrefix>
</Input>
<Input value> <Input value>
<InputSuffix slot> <InputSuffix slot>
"$" "$"
</InputSuffix> </InputSuffix>
</Input> </Input>
<Input value>
<InputSuffix slot>
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiGithubOutlined)/>
</InputSuffix>
</Input>
</Space> </Space>
<DemoCode <DemoCode
slot slot
@ -26,13 +61,23 @@ pub fn InputPage() -> impl IntoView {
let value = create_rw_signal(String::from("o")); let value = create_rw_signal(String::from("o"));
view! { view! {
<Input value/> <Space vertical=true>
<Input value variant=InputVariant::Password placeholder="Password"/> <Input value>
<Input value> <InputPrefix slot>
<InputSuffix slot> <Icon icon=icondata::Icon::from(icondata::AiIcon::AiUserOutlined)/>
"$" </InputPrefix>
</InputSuffix> </Input>
</Input> <Input value>
<InputSuffix slot>
"$"
</InputSuffix>
</Input>
<Input value>
<InputSuffix slot>
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiGithubOutlined)/>
</InputSuffix>
</Input>
</Space>
} }
"#, "#,
"rust" "rust"
@ -102,10 +147,15 @@ pub fn InputPage() -> impl IntoView {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<td>"InputPrefix"</td>
<td>"None"</td>
<td>"InputPrefix content."</td>
</tr>
<tr> <tr>
<td>"InputSuffix"</td> <td>"InputSuffix"</td>
<td>"None"</td> <td>"None"</td>
<td>"Input content."</td> <td>"InputSuffix content."</td>
</tr> </tr>
</tbody> </tbody>
</Table> </Table>

7
src/input/input.css
View file

@ -36,6 +36,13 @@
color: var(--thaw-placeholder-color); color: var(--thaw-placeholder-color);
} }
.thaw-input__prefix {
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 4px;
}
.thaw-input__suffix { .thaw-input__suffix {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;

11
src/input/mod.rs
View file

@ -23,6 +23,11 @@ impl InputVariant {
} }
} }
#[slot]
pub struct InputPrefix {
children: Children,
}
#[slot] #[slot]
pub struct InputSuffix { pub struct InputSuffix {
children: Children, children: Children,
@ -36,6 +41,7 @@ pub fn Input(
#[prop(optional, into)] placeholder: MaybeSignal<String>, #[prop(optional, into)] placeholder: MaybeSignal<String>,
#[prop(optional, into)] on_focus: Option<Callback<ev::FocusEvent>>, #[prop(optional, into)] on_focus: Option<Callback<ev::FocusEvent>>,
#[prop(optional, into)] on_blur: Option<Callback<ev::FocusEvent>>, #[prop(optional, into)] on_blur: Option<Callback<ev::FocusEvent>>,
#[prop(optional)] input_prefix: Option<InputPrefix>,
#[prop(optional)] input_suffix: Option<InputSuffix>, #[prop(optional)] input_suffix: Option<InputSuffix>,
) -> impl IntoView { ) -> impl IntoView {
let theme = use_theme(Theme::light); let theme = use_theme(Theme::light);
@ -92,6 +98,11 @@ pub fn Input(
}); });
view! { view! {
<div class="thaw-input" class=("thaw-input--focus", move || is_focus.get()) style=move || css_vars.get()> <div class="thaw-input" class=("thaw-input--focus", move || is_focus.get()) style=move || css_vars.get()>
{if let Some(prefix) = input_prefix {
view! { <div class="thaw-input__prefix">{(prefix.children)()}</div> }.into()
} else {
None
}}
<input <input
type=move || variant.get().as_str() type=move || variant.get().as_str()
prop:value=move || { prop:value=move || {