InlineEdit

Text that turns into an input on click; Enter saves, Escape cancels. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue

import { UiInlineEdit } from '@ziyarago/ui/vue'

With value

Vue

<UiInlineEdit v-model="value" />

Empty

Vue

<UiInlineEdit v-model="value" empty-text="Add a package title" />

Sizes

Vue

<UiInlineEdit size="xs" v-model="value" />

<UiInlineEdit size="sm" v-model="value" />

<UiInlineEdit size="md" v-model="value" />

<UiInlineEdit size="lg" v-model="value" />

<UiInlineEdit size="xl" v-model="value" />

API reference

Text that turns into an input on click. Use for renaming and quick edits without a form.

Props

PropType and valuesDefaultDescription

modelValuev-modelstring''Current text.

emptyTextstring'Click to edit'Shown when the value is empty.

sizexssmmdlgxl'md'Control height, font and padding scale.

Events

Vue: @name. React: onName.

changeCalled with the edited text on Enter or on the save button. Escape cancels.