InlineEdit

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { InlineEdit } from '@bigbang/ui';

Kaynak

InlineEdit.tsx

Storybook

InlineEdit · Playground

InlineEdit, @bigbang/ui paketindedir.

import { InlineEdit } from '@bigbang/ui';

<InlineEdit label="İşyeri adı" value={name} onSave={rename} validate={(value) => (value.trim() ? null : 'Ad boş olamaz.')} />;

Özellikler

labelZorunlu

Açıklama

Değerin ne olduğu, örneğin "İşyeri adı". Girişi ve düzenle düğmesini adlandırır.

Tür

string

value

Açıklama

Kontrollü kayıtlı değer.

Tür

string

defaultValue

Açıklama

Kontrolsüz kullanımda başlangıçtaki kayıtlı değer.

Tür

string

Varsayılan

''

onSaveZorunlu

Açıklama

Kaydette yeni değerle çağrılır. Promise döndürürse alan iş bitene kadar yükleniyorla açık kalır; reddedilen promise düzenlemeyi açık tutar.

Tür

(value: string) => void | Promise<unknown>

validate

Açıklama

Kaydedilemeyecek bir değer için hata iletisi, yoksa null döndürür.

Tür

(value: string) => string | null

emptyText

Açıklama

Boş değerin yerine gösterilir. Verilmezse ui.inline-edit.empty ("Boş" ya da "Empty").

Tür

string

disabled

Açıklama

Düzenle düğmesini gizler; değer metin olarak gösterilir.

Tür

boolean

Varsayılan

false

className

Açıklama

Kök öğeye eklenir; yalnızca yerleşim için kullanın.

Tür

string

Veri öznitelikleri

• data-component="inline-edit" ve düzenlemede data-editing: kök öğede.
• data-part: view, value, edit, box, control, error.