49 lines
1.1 KiB
Markdown
49 lines
1.1 KiB
Markdown
---
|
|
components:
|
|
- rx.chakra.Editable
|
|
- rx.chakra.EditablePreview
|
|
- rx.chakra.EditableInput
|
|
- rx.chakra.EditableTextarea
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# Editable
|
|
|
|
Editable is used for inline renaming of some text.
|
|
It appears as normal UI text but transforms into a text input field when the user clicks on or focuses it.
|
|
|
|
```python demo exec
|
|
class EditableState(rx.State):
|
|
example_input: str
|
|
example_textarea: str
|
|
example_state: str
|
|
|
|
def set_uppertext(self, example_state: str):
|
|
self.example_state = example_state.upper()
|
|
|
|
|
|
def editable_example():
|
|
return rx.chakra.editable(
|
|
rx.chakra.editable_preview(),
|
|
rx.chakra.editable_input(),
|
|
placeholder="An input example...",
|
|
on_submit=EditableState.set_uppertext,
|
|
width="100%",
|
|
)
|
|
```
|
|
|
|
Another variant of editable can be made with a textarea instead of an input.
|
|
|
|
```python demo
|
|
rx.chakra.editable(
|
|
rx.chakra.editable_preview(),
|
|
rx.chakra.editable_textarea(),
|
|
placeholder="A textarea example...",
|
|
on_submit=EditableState.set_example_textarea,
|
|
width="100%",
|
|
)
|
|
```
|