use icons::Search;
use leptos::prelude::*;
use crate::components::extensions::expandable_search::{ExpandableSearch, ExpandableSearchButton, ExpandableSearchInput};
#[component]
pub fn DemoExpandableSearch() -> impl IntoView {
view! {
<ExpandableSearch>
<ExpandableSearchInput placeholder="Search..." />
<ExpandableSearchButton r#type="submit">
<Search class="size-4 text-neutral-500" />
</ExpandableSearchButton>
</ExpandableSearch>
}
}
Demos
JavaScript
use leptos::prelude::*;
#[component]
pub fn DemoExpandableSearchJs() -> impl IntoView {
view! {
<script src="/components/expandable_search.js" />
<div class="flex justify-center items-center w-full bg-white h-[300px]">
<div class="relative w-32 transition-all">
<input
type="text"
placeholder="Arama.."
id="searchInput"
class="py-2 pr-4 pl-10 w-full text-gray-700 bg-white rounded-full border border-gray-300 transition-all outline-hidden"
/>
<div class="flex absolute inset-y-0 left-0 items-center pl-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 text-gray-400 transition-all"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</div>
</div>
</div>
}
}
Installation
You can run either of the following commands:
# cargo install ui-cli --forceui add demo_expandable_searchui add expandable_searchUpdate the imports to match your project setup.
Copy and paste the following code into your project:
components/ui/expandable_search.rs
use leptos::prelude::*;
use leptos_ui::{button, clx};
use crate::components::ui::input::Input;
mod components {
use super::*;
clx! {ExpandableSearch, div, "relative"}
button! {ExpandableSearchButton, "absolute top-0 right-0 mt-3 mr-4"}
}
pub use components::*;
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* ✨ FUNCTIONS ✨ */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
#[component]
pub fn ExpandableSearchInput(#[prop(optional, into)] placeholder: &'static str) -> impl IntoView {
view! {
<Input
class="px-5 pr-10 w-12 rounded-full transition-all duration-300 ease-in-out focus:w-64 focus:outline-hidden"
placeholder=placeholder
onfocus="this.classList.remove('w-12'); this.classList.add('w-64');"
onblur="if(this.value === '') { this.classList.remove('w-64'); this.classList.add('w-12'); }"
/>
}
}
Update the imports to match your project setup.
Usage
// Coming soon 🦀