> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Tipe Properti Komponen Umum

> Referensi tipe properti umum yang digunakan komponen YiDA di platform low-code. Panduan lengkap struktur data dan spesifikasi nilai untuk membaca atau mengatur properti komponen melalui panel aksi.

Dokumen ini mencantumkan tipe properti umum yang digunakan komponen YiDA. Baca atau atur properti tertentu dari sebuah komponen melalui panel aksi dengan API berikut (lihat [API Komponen Umum](/id/open/yida/api/yidaAPI#api-komponen-umum) untuk detailnya):

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
// Ambil nilai properti komponen
export function getAttribute(){
  // Ambil properti content dari komponen Text dan cetak ke console
  const content = this.$('text_kyz78exo').get('content')
  console.log( `text content: ${content}` );
}

// Atur nilai properti komponen
export function setAttribute(){
  // Atur properti maxLine dari komponen Text
  this.$('text_kyz78exo').set('maxLine', 5);
}
```

## Tipe Dasar

### I18n

Konfigurasi terkait string yang diinternasionalkan.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
inerface I18n {
  zh_CN: string;
  en_US: string;
  type: 'i18n';
}
```

## Properti Dasar Formulir

### Behavior

Status tampilan kontrol formulir:

* NORMAL - Tampilan normal.
* DISABLED - Dinonaktifkan.
* READONLY - Hanya Baca.
* HIDDEN - Tersembunyi.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
type Behavior = 'NORMAL' | 'DISABLED' | 'READONLY' | 'HIDDEN';
```

### Size

Ukuran kontrol formulir.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
type Size = 'small' | 'medium' | 'large';
```

### LabelTipsTypes

Tipe informasi tip yang ditampilkan di samping judul kontrol formulir.

* none - Tidak ada.
* text - Teks.
* render - Rendering kustom.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
type LabelTipsTypes = 'none' | 'text' | 'render';
```

### Validation

Aturan validasi untuk kontrol formulir.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface Validation {
  type: 'required' | 'minValue' | 'maxValue' | 'minLength' | 'maxLength' | 'customValidate'; // Tipe validasi
  message: string | I18n; // Pesan error
  param: number | (value: any) => boolean; // Parameter validasi. Jika type bernilai customValidate, parameter ini berupa fungsi kustom.
}
```

## Tipe Sumber Data Terkait Komponen

### DataSource

Format opsi untuk komponen pemilihan seperti dropdown, single-select, dan multi-select.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface DataSource {
  text: string | I18n; // Konten yang ditampilkan
  value: string; // Data yang dikirimkan
}
```

### CascadeDataSource

Format opsi untuk komponen dengan struktur bersarang multi-level, seperti cascading select.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface CascadeDataSource {
  label: string | I18n; // Konten yang ditampilkan
  value: string; // Data yang dikirimkan
  chidren?: CascadeDataSource[]
}
```

### SliderDataSource

Konfigurasi data untuk komponen carousel gambar.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface SliderDataSource {
  src: string; // URL gambar carousel
  title?: string | I18n; // Judul carousel
  link?: string; // Tautan pengalihan saat gambar diklik
}
```

### StepsDataSource

Konfigurasi data untuk komponen langkah.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface StepsDataSource {
  title: string;
  content: string;
  status?: '' | 'wait' | 'process' | 'finish'; // Status langkah saat ini
  customSwitcher?: boolean; // Apakah rendering kustom diaktifkan
  customRender?: (item: StepsDataSource) => ReactNode; // Fungsi rendering kustom
  icon?: string; // Ikon langkah
  percent?: number; // Persentase progres langkah saat ini. Berupa angka antara 1 dan 100.
  disabled?: boolean; // Apakah langkah dinonaktifkan
}
```

### TimelineDataSource

Konfigurasi data untuk komponen Lini Masa.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface TimelineDataSource {
  title: string | I18n; // Judul
  time: string; // Waktu
  icon?: string; // Ikon yang ditampilkan
  state?: '' | 'process' | 'success' | 'error'; // Status node saat ini
  timeLeft?: () => ReactNode; // Tampilan waktu di sebelah kiri
  doc?: () => ReactNode; // Node lini masa kustom. Diprioritaskan di atas properti icon.
  content?: () => ReactNode; // Konten kustom di sebelah kanan
}
```

### TreeDataSource

Konfigurasi data untuk komponen tree.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface TreeDataSource {
  key: string;
  label: string;
  children?: TreeDataSource[]; // Node anak
}
```

### MenuDataSource

Konfigurasi data untuk komponen menu.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface MenuDataSource {
  label: string;
  key: string;
  chidlren?: MenuDataSource[]; // Node anak
}
```

### SearchDataSource

Konfigurasi data untuk kotak Cari.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface SearchDataSource {
  label: string;
  value: string;
}
```

## Lainnya

### TabItem

Properti konfigurasi item tab.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface TabItem {
  title: string; // Nama tab
  primaryKey: string; // Identifikator unik tab
  disabled?: boolean; // Apakah tab dinonaktifkan
  customKey？: string; // Key kustom
}
```

### TableColumn

Konfigurasi kolom untuk komponen Spreadsheet.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface TableColumn {
  dataKey: string; // Bidang data
  title: string | I18n; // Judul header kolom
  width?: string; // Lebar kolom. Dinyatakan dalam px atau %.
  dataType: 'text' | 'link' | 'file' | 'image' | 'timestamp' | 'cascadeTimestamp' | 'employee' | 'money' | 'moneyRange' | 'enum' | 'custom'; // Tipe data
  float?: '' | 'left' | 'right'; // Pengambangan gambar (hanya berlaku pada mode kartu mobile)
  imageProps?: React.CSSProperties; // Gaya gambar
  imageWrapProps?: React.CSSProperties; // Gaya kontainer gambar
  imageOnClick?: (e: Event, column: number) => void; // Callback klik gambar
  enumBadgeType?: '' | 'color' | 'background'; // Gaya enum
  enumData?: any; // Data enum
  editType?: 'text' | 'link' | 'file' | 'image' | 'timestamp' | 'cascadeTimestamp' | 'employee' | 'money' | 'moneyRange' | 'enum' | 'custom'; // Format edit
  timeFormatter?: 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD' | 'YYYY-MM' | 'YYYY'; // Format waktu
  align?: 'left' | 'center' | 'right'; // Perataan
  lock?: 'none' | 'left' | 'right'; // Kunci kolom
  groupName?: string; // Judul grup
  message?: string; // Tips untuk pengguna
  sortable?: boolean; // Apakah kolom dapat diurutkan
  highlight?: boolean; // Apakah kolom disorot. Hanya berlaku pada mode kartu mobile.
  hidden?: boolean; // Apakah kolom disembunyikan.
  resizable?: boolean; // Apakah Lebar kolom dapat disesuaikan. Harus digunakan bersama peristiwa yang dipicu saat lebar kolom diatur ulang.
  titleRender?: (title: string) => ReactNode; // Rendering judul kustom
  render?: (value: any, index: number, rowData) => ReactNode; // Rendering konten kustom
  canEdit?: boolean; // Apakah kolom dapat diedit
  renderField?: (props: any, value: any, rowData: any) => ReactNode; // Rendering kustom dalam status edit
  editProps?: any; // Konfigurasi edit
  filters?: {
    label: string;
    value: string;
  }[];
  filterMode?: 'multiple' | 'single'; // Mode filter
}

```

### FilterConfig

Konfigurasi untuk item filter.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface FilterConfig {
  title: string; // Judul
  id: string;
  fieldId: string;
  componentName: string;
  prevComponentName: string;
  colspan?: number;
  isAdvanced?: boolean;
}
```

### ScanCodeConfig

Konfigurasi mode pemindaian pada klien DingTalk. Klien DingTalk mendukung mode pemindaian berikut:

* barCode - Kode batang.
* qrCode - Kode QR.
* all - Semua mode di atas.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface ScanCodeConfig {
  enable: boolean;
  type: 'all' | 'barCode' | 'qrCode';
  editable: boolean; // Apakah hasil pemindaian dapat dimodifikasi
}
```

### UploadConfig

Konfigurasi unggah gambar untuk komponen Teks Kaya.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface UploadConfig {
  inputName?: string; // Atribut name dari input file untuk unggah. Default-nya file.
  actionUrl: string; // Endpoint unggah
  formatResult?: (response: any) => any; // Pemrosesan data respons
  errorCallback?: () => void; // Callback error
  progressCallback?: () => void; // Callback progres unggah
  headers?: Record<string, string>; // Header permintaan untuk unggah gambar
}
```