Editable experimental

Ark UI Editable 기반 wrapper입니다. 인라인 텍스트 편집을 위한 root, label, area, preview, input, control, trigger anatomy를 제공합니다.

@ark-ui/svelte/editable Ark UI docs ↗

업무 제목

상반기 리브랜딩 제안서 준비

<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'