Panduan cepat

​

Skenario kasus

​

Pratinjau hasil

​

Langkah-langkah

​

Langkah 1: Buat komponen kustom

1. Buka Aplikasi YiDA >> Pengaturan Aplikasi >> Manajemen Komponen >> Component Center (seperti pada gambar di bawah).
2. Tambah Komponen >> isi nama komponen, tipe komponen, identifier komponen, dan properti lainnya >> Konfirmasi (seperti pada gambar di bawah).

​

Langkah 2: Kembangkan dan debug komponen kustom

1. Component Center >> Komponen Saya >> cari komponen yang ingin di-debug >> Kembangkan (seperti pada gambar di bawah).
2. Seperti disebutkan sebelumnya, sebuah komponen dibangun dari tampilan dan properti. Saat mengembangkan komponen, Anda perlu mengabstraksi properti yang dibutuhkan terlebih dahulu. Mari bangun properti komponen. Komponen ini hanya memerlukan satu properti untuk konten teks. Buka Konfigurasi Properti >> Definisi Properti, tambahkan properti konten teks bernama content, atur tipe properti ke Teks, dan atur setter ke textSetter.
3. Setelah properti komponen selesai dibangun, susun tampilan komponen dengan menambahkan komponen standar YiDA yang dibutuhkan ke kanvas (dalam kasus ini, dibutuhkan dua komponen Teks, masing-masing bernama “Teks” dan “Salin”). Konfigurasikan properti dasarnya, lalu gunakan pengikatan variabel untuk mengikat konten komponen Teks ke properti props.content yang baru saja Anda bangun. Dengan cara ini, nilai properti yang diteruskan akan ditampilkan saat runtime. (Seperti pada gambar di bawah.)
4. Konfigurasikan sebuah tindakan pada komponen Button untuk mengimplementasikan efek salin teks. Pilih teks “Salin” >> Buat Tindakan >> onCopyText click. (Seperti pada gambar di bawah.)
5. Tulis logika salin pada panel JS. (Seperti pada gambar di bawah.)

export function onCopyText() {
  const input = document.createElement('input');
  input.setAttribute('readonly', 'readonly');
  // Dapatkan properti melalui this.props.xxx
  input.setAttribute('value', this.props.content);
  document.body.appendChild(input);
  input.select();
  input.setSelectionRange(0, 9999);
  document.execCommand('copy');
  document.body.removeChild(input);
  this.utils.toast('Berhasil disalin ke clipboard');
}

6. Simpan >> pratinjau komponen.
7. Publikasikan >> isi nomor versi dan catatan terkait >> Konfirmasi. (Seperti pada gambar di bawah.)
8. Prompt muncul saat publikasi berhasil. (Seperti pada gambar di bawah.) Dalam pengembangan komponen nyata, setelah menyimpan, Anda dapat menginstal versi pengembangan (0.1.0) dari komponen untuk debug real-time. Versi resmi hanya perlu dipublikasikan setelah pengembangan komponen selesai.

​

Langkah 3: Instal komponen kustom

1. Halaman Desain Formulir >> Library Komponen >> Komponen Kustom >> Manajemen Komponen. (Seperti pada gambar di bawah.)
2. Halaman Manajemen Komponen >> Daftar Komponen >> pilih komponen kustom yang ingin diinstal >> Instal. (Seperti pada gambar di bawah.)
3. Pilih versi instalasi dan cakupan instalasi >> Instal. (Seperti pada gambar di bawah.)

​

Langkah 4: Gunakan komponen kustom

1. Halaman Desain Formulir >> Library Komponen >> Komponen Kustom >> pilih komponen yang dibutuhkan >> seret ke kanvas. (Seperti pada gambar di bawah.)

​

Langkah 5: Lihat atau ubah informasi komponen

1. Pengaturan Aplikasi >> Manajemen Komponen >> Component Center (seperti pada gambar di bawah).
2. Pilih komponen yang detailnya ingin Anda lihat atau ubah >> Detail (seperti pada gambar di bawah).

​

Properti komponen kustom

​

Entri konfigurasi properti komponen kustom

​

Detail konfigurasi properti komponen kustom

• Desain Dual-end: Ini adalah toggle. Saat diaktifkan, sisi PC dan mobile dapat sepenuhnya dipisah dan didesain secara independen untuk memenuhi kebutuhan adaptasi dual-end.
• Definisi Properti (propTypes): Anda dapat menyesuaikan properti dasar komponen kustom seperti judul, nama, tipe (format data), dan nilai default. Anda juga dapat mengikat event seperti Sembunyikan (apakah komponen disembunyikan) dan On Change (saat nilai yang ditampilkan berubah) untuk memenuhi berbagai kebutuhan bisnis. Untuk detailnya, lihat Konfigurasi Properti Komponen.
• Lifecycle: Lifecycle komponen kustom memiliki empat tahap: Komponen Ter-render (componentDidMount), Komponen Terupdate (componentDidUpdate), Error Komponen Tertangkap (componentDidCatch), dan Sebelum Komponen Di-unmount (componentWillUnmount). Anda dapat menulis logika berbeda untuk tiap tahap lifecycle guna memenuhi kebutuhan bisnis yang kompleks.
• Identifier Unik: Seperti halnya komponen standar YiDA, komponen kustom juga memiliki properti identifier unik yang berfungsi sebagai kode identifikasi unik komponen. Identifier ini dihasilkan otomatis oleh sistem dan umumnya tidak perlu diubah. Identifier digunakan untuk penyimpanan data backend YiDA, pengikatan kode, dan lain-lain.