adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -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",
"AiCheckOutlined",
"AiGithubOutlined",
"AiUserOutlined",
] }
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>
<Input value/>
<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>
<InputSuffix slot>
"$"
</InputSuffix>
</Input>
<Input value>
<InputSuffix slot>
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiGithubOutlined)/>
</InputSuffix>
</Input>
</Space>
<DemoCode
slot
@ -26,13 +61,23 @@ pub fn InputPage() -> impl IntoView {
let value = create_rw_signal(String::from("o"));
view! {
<Input value/>
<Input value variant=InputVariant::Password placeholder="Password"/>
<Input value>
<InputSuffix slot>
"$"
</InputSuffix>
</Input>
<Space vertical=true>
<Input value>
<InputPrefix slot>
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiUserOutlined)/>
</InputPrefix>
</Input>
<Input value>
<InputSuffix slot>
"$"
</InputSuffix>
</Input>
<Input value>
<InputSuffix slot>
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiGithubOutlined)/>
</InputSuffix>
</Input>
</Space>
}
"#,
"rust"
@ -102,10 +147,15 @@ pub fn InputPage() -> impl IntoView {
</tr>
</thead>
<tbody>
<tr>
<td>"InputPrefix"</td>
<td>"None"</td>
<td>"InputPrefix content."</td>
</tr>
<tr>
<td>"InputSuffix"</td>
<td>"None"</td>
<td>"Input content."</td>
<td>"InputSuffix content."</td>
</tr>
</tbody>
</Table>

7
src/input/input.css
View file

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

11
src/input/mod.rs
View file

@ -23,6 +23,11 @@ impl InputVariant {
}
}
#[slot]
pub struct InputPrefix {
children: Children,
}
#[slot]
pub struct InputSuffix {
children: Children,
@ -36,6 +41,7 @@ pub fn Input(
#[prop(optional, into)] placeholder: MaybeSignal<String>,
#[prop(optional, into)] on_focus: 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>,
) -> impl IntoView {
let theme = use_theme(Theme::light);
@ -92,6 +98,11 @@ pub fn Input(
});
view! {
<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
type=move || variant.get().as_str()
prop:value=move || {