use leptos::prelude::*;
use crate::components::ui::textarea::Textarea;
#[component]
pub fn DemoTextarea() -> impl IntoView {
view! {
<div>
<Textarea class="min-h-[400px]" value=Some(signal("fake content".to_string()).0) />
</div>
}
}
Installation
You can run either of the following commands:
# cargo install ui-cli --forceui add demo_textareaui add textareaUpdate the imports to match your project setup.
Copy and paste the following code into your project:
components/ui/textarea.rs
use leptos::prelude::*;
use tw_merge::*;
use crate::components::ui::_styles::STYLES;
#[allow(unused_variables)]
#[component]
pub fn Textarea(
#[prop(optional, into)] class: String,
#[prop(optional_no_strip)] value: Option<ReadSignal<String>>,
#[prop(optional)] placeholder: Option<&'static str>,
#[prop(optional)] name: Option<&'static str>,
#[prop(optional)] id: Option<&'static str>,
#[prop(optional)] autofocus: bool,
#[prop(optional)] node_ref: NodeRef<leptos::html::Textarea>,
) -> impl IntoView {
let class = tw_merge!(
STYLES::WIDTH_FULL,
STYLES::BORDER_INPUT,
STYLES::FOCUS_VISIBLE_RING,
STYLES::DISABLED_NOT_ALLOWED,
STYLES::RING_OFFSET_BG,
STYLES::PLACEHOLDER_MUTED_FOREGROUND,
STYLES::FIELD_SIZING_CONTENT,
"flex min-h-[80px] rounded-md bg-background px-3 py-2 text-sm",
class
);
view! {
<textarea
class=class
name=name
id=id
placeholder=placeholder
node_ref=node_ref
autofocus=autofocus
prop:value=move || value.map(|s| s.get()).unwrap_or_default()
/>
}
}
Update the imports to match your project setup.
Usage
use crate::components::ui::textarea::Textarea;
<Textarea placeholder="Enter your message..." />