Editable
Editable (편집 가능)
일부 텍스트를 인라인으로 이름을 바꾸거나 수정할 때 사용하는 컴포넌트예요. 화면의 텍스트를 클릭해서 바로 편집할 수 있게 해 줘요.
출처: 문서
본문
사용법 (Usage)
import { Editable } from "@chakra-ui/react"
<Editable.Root>
<Editable.Preview />
<Editable.Input />
</Editable.Root>
예제 (Examples)
더블 클릭 (Double Click)
activationMode prop을 사용해서 사용자가 더블 클릭했을 때 콘텐츠를 편집할 수 있게 만들 수 있어요.
| 예제 (editable-with-double-click) |
비활성화 (Disabled)
disabled prop을 사용해서 editable 컴포넌트를 비활성화할 수 있어요.
| 예제 (editable-disabled) |
텍스트 영역 (Textarea)
텍스트 영역도 편집 가능하게 만들 수 있어요.
| 예제 (editable-with-textarea) |
컨트롤과 함께 (With Controls)
더 나은 사용자 경험을 위해 "편집", "취소", "제출" 같은 컨트롤을 Editable에 추가할 수 있어요.
| 예제 (editable-with-controls) |
제어 (Controlled)
value와 onValueChange prop을 사용해서 editable 컴포넌트를 제어할 수 있어요.
| 예제 (editable-controlled) |
스토어 (Store)
editable 컴포넌트를 제어하는 또 다른 방법은 RootProvider 컴포넌트와 useEditable 스토어 훅을 사용하는 거예요.
이렇게 하면 editable 바깥에서도 editable의 상태와 메서드에 접근할 수 있어요.
| 예제 (editable-with-store) |
Props
Root
| PropTable (Editable / Root) |
탐색 (Explorer)
Editable 컴포넌트의 각 부분을 인터랙티브하게 살펴볼 수 있어요. 사이드바에서 부분을 클릭하면 미리보기에서 강조 표시돼요.
| 예제 (editable-explorer-demo) |