• Bahasa Indonesia

      • Komponen bersama

      NocoBase client v2 menyediakan sekumpulan komponen bersama. Saat membuat halaman plugin, halaman pengaturan, atau formulir, kamu bisa langsung memakainya untuk menggunakan kembali UI dan interaksi yang sudah disiapkan NocoBase.

      Bagian ini mengelompokkan komponen berdasarkan skenario penggunaan. Setiap halaman membahas satu komponen: kapan dipakai, API yang umum digunakan, dan apakah bisa dipratinjau di dokumentasi.

      Indeks cepat

      Saya ingin...Lihat di
      Mengontrol pemindai layar penuh tingkat rendahCodeScanner
      Menempatkan formulir standar di dialogDialogFormLayout
      Menempatkan formulir standar di drawerDrawerFormLayout
      Hanya mengizinkan variabel lingkungan $envEnvVariableInput
      Memasukkan ukuran file dan menyimpannya sebagai byteFileSizeInput
      Mengedit konfigurasi JSON / JSON5JsonTextArea
      Memasukkan kata sandi dengan indikator kekuatanPasswordInput
      Memuat opsi Select secara asinkron dari APIRemoteSelect
      Menambahkan dukungan pemindaian ke inputScanInput
      Membuat field menerima konstanta dan variabel sekaligusTypedVariableInput
      Membuat field satu baris menerima variabel seperti {{ $env.X }} dan {{ $user.name }}VariableInput
      Menyisipkan variabel ke konfigurasi JSON / JSON5VariableJsonTextArea
      Membuat teks multi-baris menerima variabelVariableTextArea
      Memfilter Collection dengan beberapa kondisiCollectionFilter
      Menyematkan panel filter Collection ke halamanCollectionFilterPanel
      Menyesuaikan baris drag pada antd TableSortableRow
      Menyesuaikan kolom pegangan drag pada TableSortHandle
      Menampilkan daftar, memilih baris, dan mengurutkan baris dengan drag di halaman pengaturanTable
      Menggunakan ikon Ant Design atau mendaftarkan ikon kustomIcon
      Membuat registry internal untuk item ekstensi plugincreateFormRegistry

      Cara penggunaan

      Impor komponen yang diperlukan di plugin klien, lalu gunakan seperti komponen React biasa:

      import { RemoteSelect, Table } from '@nocobase/client-v2';

function SettingsPage() {
  return (
    <>
      <RemoteSelect request={loadOptions} />
      <Table rowKey="id" columns={columns} dataSource={records} />
    </>
  );
}

      Saran penggunaan

      Secara default gunakan React + Antd. Untuk skenario umum plugin NocoBase, periksa komponen ini terlebih dahulu:

      • Membuka formulir drawer atau dialog di halaman pengaturan
      • Menyisipkan variabel, mengedit JSON, memasukkan ukuran file, atau memindai kode di field formulir
      • Menggunakan filter Collection atau pengurutan drag di halaman daftar
      • Menggunakan pintu masuk ikon terpadu NocoBase

      Untuk input, tombol, dan pesan biasa, komponen Antd biasanya lebih jelas.

      Tautan terkait