Select

Klik untuk menyalin

Pilih komponen untuk memilih opsi yang telah ditentukan sebelumnya.


Pengaturan awal

Mode - pilih Beberapa untuk dapat memilih beberapa opsi dari dropdown. Jika tidak, mode Tunggal harus digunakan.


Pengaturan Tampilan dan Nuansa

Label (bukan mantory) digunakan untuk menunjukkan label komponen.

Placeholder (tidak wajib) digunakan untuk menunjukkan placeholder komponen.

Name (wajib) - nama komponen.

Size (wajib) - ukuran komponen. Diset ke Default saat komponen dibuat.

Search (wajib) - untuk dapat mencari dalam opsi dropdown yang tersedia. Dinonaktifkan secara default.

Clear icon (wajib) - menampilkan ikon opsi yang jelas jika diaktifkan. Dinonaktifkan secara default.

Disabled (wajib) - membuat komponen dinonaktifkan jika dihidupkan. Dinonaktifkan secara default.

Visible (wajib) - membuat komponen terlihat jika dihidupkan. Diaktifkan secara default.


Pilihan

Pilih Opsi dapat ditentukan sebelumnya dalam pengaturan komponen.


Pemicu alur kerja

  • onChange - aktif ketika opsi dropdown diubah.
  • onFocus - aktif ketika komponen Select sedang difokuskan.
  • onBlur - menyala saat komponen Select diburamkan.
  • onCreate - aktif saat komponen dibuat.
  • onDestroy - menyala saat komponen ditampilkan.

Tindakan Komponen

Select Get Properties

Mendapatkan properti komponen.

Parameter masukan :

  • Component Id [string] - Pilih pengenal komponen;

Parameter keluaran :

  • Label [string] - label komponen;
  • Placeholder [string] - placeholder komponen;
  • Allow Clear [boolean] - memungkinkan menghapus pilihan jika benar;
  • Disable [boolean ] - menonaktifkan komponen jika benar;
  • Tooltip [string] - string tooltip;
  • Required Mark [boolean] - menunjukkan tanda wajib jika benar;
  • Debounce (ms) [integer] - penundaan untuk memvalidasi nilai;
  • Options [Select Option array] - sebuah array dari pilihan pilihan yang telah ditentukan;
  • Selected [Select Option array] - sebuah array dari pilihan yang dipilih atau hanya sebuah array dengan elemen tunggal dalam kasus Single Mode;
  • Validate Icon [boolean] - ikon yang akan ditampilkan pada validasi nilai;
  • Validate Status [Status type] - status yang akan ditampilkan pada validasi nilai;
  • Validate Message [string] - pesan yang akan ditampilkan pada validasi nilai;

Select Get Properties

Select Set Properties

Mengatur properti komponen.

Parameter masukan :

  • Component Id [string] - Pilih pengenal komponen;
  • Label [string] - label komponen;
  • Placeholder [string] - placeholder komponen;
  • Allow Clear [boolean] - memungkinkan menghapus pilihan jika benar;
  • Disable [boolean] - menonaktifkan komponen jika benar;
  • Tooltip [string] - string tooltip;
  • Required Mark [boolean] - menunjukkan tanda wajib jika benar;
  • Debounce (ms ) [integer] - penundaan untuk memvalidasi nilai;
  • Options [Select Option array] - sebuah array dari pilihan pilihan yang telah ditentukan;
  • Validate Icon [boolean] - ikon yang akan ditampilkan pada validasi nilai;
  • Validate Status [Status type] - status yang akan ditampilkan pada validasi nilai;
  • Validate Message [string] - pesan yang akan ditampilkan pada validasi nilai;

Select Set Properties

Pilih Perbarui Properti

Memperbarui properti komponen.

Parameter masukan :

  • Component Id [string] - Pilih pengenal komponen;
  • Label [string] - label komponen;
  • Placeholder [string] - placeholder komponen;
  • Allow Clear [boolean] - memungkinkan menghapus pilihan jika benar;
  • Disable [boolean] - menonaktifkan komponen jika benar;
  • Tooltip [string] - string tooltip;
  • Required Mark [boolean] - menunjukkan tanda wajib jika benar;
  • Debounce (ms ) [integer] - penundaan untuk memvalidasi nilai;
  • Options [Select Option array] - sebuah array dari pilihan pilihan yang telah ditentukan;
  • Validate Icon [boolean] - ikon yang akan ditampilkan pada validasi nilai;
  • Validate Status [Status type] - status yang akan ditampilkan pada validasi nilai;
  • Validate Message [string] - pesan yang akan ditampilkan pada validasi nilai;

Select Update Properties

Make Select Option

Menyusun model Select Option dengan bidang yang diberikan.

Parameter masukan :

  • ID [integer] - Pilih ID Opsi;
  • Label [string] - Pilih label Opsi;
  • Value [integer] - Pilih nilai pesanan Opsi di daftar turun bawah;
  • Icon [string] - ikon yang akan digunakan dalam item Select Option;
  • Disabled [boolean] - menonaktifkan Select Option jika benar;

Parameter keluaran :

  • Select Option [Select Option] - Pilih model Opsi;

Make Select Option

Expand Select Option

Memperluas Pilih model Opsi.

Parameter masukan :

  • Select Option [Select Option] - Pilih model Opsi;

Parameter keluaran :

  • ID [integer] - Pilih ID Opsi;
  • Label [string] - Pilih label Opsi;
  • Value [integer] - Pilih nilai pesanan Opsi di daftar turun bawah;
  • Icon [string] - ikon yang akan digunakan dalam item Select Option;
  • Disabled [boolean] - menonaktifkan Select Option jika benar;

Expand Select Option


Contoh penggunaan

Dimungkinkan untuk membuat dan menambahkan item Select Option baru ke dalam daftar dropdown melalui proses bisnis frontend.

Logikanya harus sebagai berikut:

  • Buat item Select Option baru dengan bidang tertentu ( Make Select Option )

  • Dapatkan array item Select Option yang ada ( Select Get Properties ) dan gabungkan dengan item Select Option yang dibuat sebelumnya ( Append Array )

  • Perbarui larik item Pilihan Pilihan ( Select Update Properties ) untuk komponen Pilih yang ditentukan