可编辑

用于内联重命名某些文本。

Click to edit

import { Editable } from "@chakra-ui/react"

export const EditableBasic = () => (
  <Editable.Root textAlign="start" defaultValue="Click to edit">
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>
)

用法

¥Usage

import { Editable } from "@chakra-ui/react"

<Editable.Root>
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>

示例

¥Examples

双精度点击

¥Double Click

使用 activationMode 属性使用户双击时内容可编辑。

¥Use the activationMode prop to make the content editable when users double click.

Double click to edit

import { Editable } from "@chakra-ui/react"

export const EditableWithDoubleClick = () => (
  <Editable.Root defaultValue="Double click to edit" activationMode="dblclick">
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>
)

已禁用

¥Disabled

使用 disabled 属性禁用可编辑组件。

¥Use the disabled prop to disable the editable component.

Click to edit

import { Editable } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Editable.Root disabled defaultValue="Click to edit">
      <Editable.Preview opacity={0.5} cursor="not-allowed" />
      <Editable.Input />
    </Editable.Root>
  )
}

文本区域

¥Textarea

你可以使文本区域可编辑。

¥You can make a text area editable.

Click to edit

import { Editable } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Editable.Root defaultValue="Click to edit">
      <Editable.Preview minH="48px" alignItems="flex-start" width="full" />
      <Editable.Textarea />
    </Editable.Root>
  )
}

包含控件

¥With Controls

为 Editable 添加控件，例如 "edit"、"取消" 和 "submit"，以提升用户体验。

¥Add controls such as "edit", "cancel" and "submit" to Editable for better user experience.

Click to edit

import { Editable, IconButton } from "@chakra-ui/react"
import { LuCheck, LuPencilLine, LuX } from "react-icons/lu"

const Demo = () => {
  return (
    <Editable.Root defaultValue="Click to edit">
      <Editable.Preview />
      <Editable.Input />
      <Editable.Control>
        <Editable.EditTrigger asChild>
          <IconButton variant="ghost" size="xs">
            <LuPencilLine />
          </IconButton>
        </Editable.EditTrigger>
        <Editable.CancelTrigger asChild>
          <IconButton variant="outline" size="xs">
            <LuX />
          </IconButton>
        </Editable.CancelTrigger>
        <Editable.SubmitTrigger asChild>
          <IconButton variant="outline" size="xs">
            <LuCheck />
          </IconButton>
        </Editable.SubmitTrigger>
      </Editable.Control>
    </Editable.Root>
  )
}

受控

¥Controlled

使用 value 和 onValueChange 属性控制可编辑组件。

¥Use the value and onValueChange props to control the editable component.

Click to edit

"use client"

import { Editable } from "@chakra-ui/react"
import { useState } from "react"

const Demo = () => {
  const [name, setName] = useState("")
  return (
    <Editable.Root
      value={name}
      onValueChange={(e) => setName(e.value)}
      placeholder="Click to edit"
    >
      <Editable.Preview />
      <Editable.Input />
    </Editable.Root>
  )
}

商店

¥Store

控制可编辑组件的另一种方法是使用 RootProvider 组件和 useEditable 存储钩子。

¥An alternative way to control the editable component is to use the RootProvider component and the useEditable store hook.

这样，你就可以从可编辑状态外部访问可编辑状态和方法。

¥This way you can access the editable state and methods from outside the editable.

Click to edit

not editing

"use client"

import { Code, Editable, Stack, useEditable } from "@chakra-ui/react"

const Demo = () => {
  const editable = useEditable({
    defaultValue: "Click to edit",
  })

  return (
    <Stack align="flex-start">
      <Editable.RootProvider value={editable}>
        <Editable.Preview />
        <Editable.Input />
      </Editable.RootProvider>
      <Code>{editable.editing ? "editing" : "not editing"}</Code>
    </Stack>
  )
}

属性

¥Props

根元素

¥Root

Prop	Default	Type
`activationMode`	`'\'focus\''`	`ActivationMode` The activation mode for the preview element. - "focus" - Enter edit mode when the preview is focused - "dblclick" - Enter edit mode when the preview is double-clicked - "click" - Enter edit mode when the preview is clicked - "none" - Edit can be triggered programmatically only
`selectOnFocus`	`true`	`boolean` Whether to select the text in the input when it is focused.
`submitMode`	`'\'both\''`	`SubmitMode` The action that triggers submit in the edit mode: - "enter" - Trigger submit when the enter key is pressed - "blur" - Trigger submit when the editable is blurred - "none" - No action will trigger submit. You need to use the submit button - "both" - Pressing `Enter` and blurring the input will trigger submit
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`size`	`'md'`	`'sm' \| 'md' \| 'lg'` The size of the component
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`unstyled`		`boolean` Whether to remove the component's style.
`autoResize`		`boolean` Whether the editable should auto-resize to fit the content.
`defaultEdit`		`boolean` Whether the editable is in edit mode by default.
`defaultValue`		`string` The initial value of the editable when rendered. Use when you don't need to control the value of the editable.
`disabled`		`boolean` Whether the editable is disabled.
`edit`		`boolean` Whether the editable is in edit mode.
`finalFocusEl`		`() => HTMLElement \| null` The element to receive focus when the editable is closed.
`form`		`string` The associate form of the underlying input.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string area: string label: string preview: string input: string control: string submitTrigger: string cancelTrigger: string editTrigger: string }>` The ids of the elements in the editable. Useful for composition.
`invalid`		`boolean` Whether the input's value is invalid.
`maxLength`		`number` The maximum number of characters allowed in the editable
`name`		`string` The name attribute of the editable component. Used for form submission.
`onEditChange`		`(details: EditChangeDetails) => void` Function to call when the edit mode changes.
`onFocusOutside`		`(event: FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onInteractOutside`		`(event: InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onValueChange`		`(details: ValueChangeDetails) => void` Function to call when the value changes.
`onValueCommit`		`(details: ValueChangeDetails) => void` Function to call when the value is committed.
`onValueRevert`		`(details: ValueChangeDetails) => void` Function to call when the value is reverted.
`placeholder`		`string \| { edit: string; preview: string }` The placeholder text for the editable.
`readOnly`		`boolean` Whether the editable is read-only.
`required`		`boolean` Whether the editable is required.
`translations`		`IntlTranslations` The translations for the editable.
`value`		`string` The controlled value of the editable.

颜色样本

字段

可编辑

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}用法

用法