thaw/demo_markdown/docs/input/mod.md

141 lines
3.4 KiB
Markdown
Raw Normal View History

2024-01-02 21:08:21 +08:00
# Input
```rust demo
2024-05-10 15:47:01 +08:00
let value = RwSignal::new(String::from("o"));
2024-01-02 21:08:21 +08:00
view! {
<Space vertical=true>
<Input value/>
<Input value variant=InputVariant::Password placeholder="Password"/>
</Space>
}
```
2024-05-10 15:47:01 +08:00
## Prefix & Suffix
```rust demo
let value = RwSignal::new(String::from("o"));
view! {
<Space vertical=true>
<Input value>
<InputPrefix slot>
<Icon icon=icondata::AiUserOutlined/>
</InputPrefix>
</Input>
<Input value>
<InputSuffix slot>
<Icon icon=icondata::AiGithubOutlined/>
</InputSuffix>
</Input>
<Input value>
<InputPrefix slot>"$"</InputPrefix>
<InputSuffix slot>".00"</InputSuffix>
</Input>
</Space>
}
```
2024-01-02 21:08:21 +08:00
### Disabled
```rust demo
2024-05-10 15:47:01 +08:00
let value = RwSignal::new(String::from("o"));
2024-01-02 21:08:21 +08:00
view! {
2024-07-08 14:40:17 +08:00
<Input value disabled=true/>
2024-01-02 21:08:21 +08:00
}
```
2024-05-10 15:47:01 +08:00
### Placeholder
```rust demo
view! {
<Input placeholder="This is a placeholder"/>
}
```
2024-01-02 21:08:21 +08:00
### Invalid
```rust demo
2024-07-07 18:33:45 +08:00
let value = RwSignal::new(String::from("o"));
2024-01-02 21:08:21 +08:00
view! {
2024-07-08 14:40:17 +08:00
<Input value invalid=true/>
2024-01-02 21:08:21 +08:00
}
```
### Imperative handle
```rust demo
2024-07-07 18:33:45 +08:00
let value = RwSignal::new(String::from("o"));
let input_ref = ComponentRef::<InputRef>::new();
2024-01-02 21:08:21 +08:00
2024-02-25 01:15:18 +08:00
let focus = Callback::new(move |_| {
input_ref.get_untracked().unwrap().focus()
});
let blur = Callback::new(move |_| {
input_ref.get_untracked().unwrap().blur()
});
2024-01-02 21:08:21 +08:00
view! {
<Space vertical=true>
<Space>
2024-02-25 01:15:18 +08:00
<Button on_click=focus>
2024-01-02 21:08:21 +08:00
"Focus"
</Button>
2024-02-25 01:15:18 +08:00
<Button on_click=blur>
2024-01-02 21:08:21 +08:00
"Blur"
</Button>
</Space>
<Input value comp_ref=input_ref/>
</Space>
}
```
### Input attrs
```rust demo
view! {
<Space>
<label for="demo-input-attrs">"Do you like cheese?"</label>
<Input attr:id="demo-input-attrs"/>
</Space>
}
```
### Input Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
2024-02-09 22:44:22 +08:00
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the input element. |
| value | `Model<String>` | `Default::default()` | Set the input value. |
2024-01-02 21:08:21 +08:00
| variant | `MaybeSignal<InputVariant>` | `InputVariant::Text` | Input's variant. |
2024-02-09 22:44:22 +08:00
| placeholder | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Placeholder of input. |
2024-01-02 21:08:21 +08:00
| disabled | `MaybeSignal<bool>` | `false` | Whether the input is disabled. |
| invalid | `MaybeSignal<bool>` | `false` | Whether the input is invalid. |
| allow_value | `Option<Callback<String, bool>>` | `None` | Check the incoming value, if it returns false, input will not be accepted. |
| on_focus | `Option<Callback<ev::FocusEvent>>` | `None` | Callback triggered when the input is focussed on. |
| on_blur | `Option<Callback<ev::FocusEvent>>` | `None` | Callback triggered when the input is blurred. |
| attr: | `Vec<(&'static str, Attribute)>` | `Default::default()` | The dom attrs of the input element inside the component. |
### Input Slots
| Name | Default | Description |
| ----------- | ------- | -------------------- |
| InputPrefix | `None` | InputPrefix content. |
| InputSuffix | `None` | InputSuffix content. |
### Input Ref
| Name | Type | Description |
| ----- | ----------- | ------------------------ |
| focus | `Fn(&self)` | Focus the input element. |
| blur | `Fn(&self)` | Blur the input element. |
2024-01-12 11:17:04 +08:00
### TextArea Props
Removes variant and slot from Input component.