Editable experimental
Ark UI Editable 기반 wrapper입니다. 인라인 텍스트 편집을 위한 root, label, area, preview, input, control, trigger anatomy를 제공합니다.
Preview
상반기 리브랜딩 제안서 준비
<script lang="ts">
import * as Editable from '@odbd/svelte/editable'
</script>
<Editable.Root
activationMode="dblclick"
defaultValue="상반기 리브랜딩 제안서 준비"
placeholder="업무 제목을 입력하세요"
submitMode="both"
style="max-width: 30rem;"
>
<Editable.Label>업무 제목</Editable.Label>
<Editable.Area>
<Editable.Preview />
<Editable.Input />
</Editable.Area>
<Editable.Control>
<Editable.EditTrigger>수정</Editable.EditTrigger>
<Editable.SubmitTrigger>저장</Editable.SubmitTrigger>
<Editable.CancelTrigger>취소</Editable.CancelTrigger>
</Editable.Control>
</Editable.Root>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import * as Editable from '@odbd/svelte/editable' import { Editable } from '@odbd/react/editable'