> ## 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.

# 共通コンポーネントプロパティタイプ

> YiDA コンポーネントで使用される共通プロパティタイプのリファレンスです。各プロパティタイプのデータ構造と値の仕様を定義し、共通コンポーネント API と組み合わせてアクションパネルからコンポーネントプロパティを読み書きする方法を解説します。

このドキュメントでは、YiDA コンポーネントで使用される共通プロパティタイプを一覧で示します。以下の API を使用すると、アクションパネルからコンポーネントの指定プロパティを読み書きできます（詳細は [共通コンポーネント API](/ja/open/yida/api/yidaAPI#共通コンポーネント-api) を参照）。

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
// コンポーネントプロパティの値を取得
export function getAttribute(){
  // Text コンポーネントの content プロパティを取得しコンソールに出力
  const content = this.$('text_kyz78exo').get('content')
  console.log( `text content: ${content}` );
}

// コンポーネントプロパティの値を設定
export function setAttribute(){
  // Text コンポーネントの maxLine プロパティを設定
  this.$('text_kyz78exo').set('maxLine', 5);
}
```

## ベーシックタイプ

### I18n

国際化文字列に関する設定です。

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

## フォームベーシックプロパティ

### Behavior

フォームコントロールの表示状態です。

* NORMAL - 通常表示。
* DISABLED - 無効。
* READONLY - 閲覧のみ。
* HIDDEN - 非表示。

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

### Size

フォームコントロールのサイズです。

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

### LabelTipsTypes

フォームコントロールのタイトル横に表示するヒント情報のタイプです。

* none - なし。
* text - テキスト。
* render - カスタムレンダリング。

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

### Validation

フォームコントロールのバリデーションルールです。

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface Validation {
  type: 'required' | 'minValue' | 'maxValue' | 'minLength' | 'maxLength' | 'customValidate'; // バリデーションタイプ
  message: string | I18n; // エラーメッセージ
  param: number | (value: any) => boolean; // バリデーションパラメータ。type が customValidate の場合はカスタム関数です。
}
```

## コンポーネント関連データソースタイプ

### DataSource

ドロップダウン、単一選択、複数選択などの選択コンポーネントの選択肢フォーマットです。

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface DataSource {
  text: string | I18n; // 表示コンテンツ
  value: string; // 送信データ
}
```

### CascadeDataSource

カスケード選択など、多階層のネスト構造を持つコンポーネントの選択肢フォーマットです。

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface CascadeDataSource {
  label: string | I18n; // 表示コンテンツ
  value: string; // 送信データ
  chidren?: CascadeDataSource[]
}
```

### SliderDataSource

画像カルーセルコンポーネントのデータ設定です。

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface SliderDataSource {
  src: string; // カルーセル画像の URL
  title?: string | I18n; // カルーセルのタイトル
  link?: string; // 画像クリック時のリダイレクト先リンク
}
```

### StepsDataSource

ステップコンポーネントのデータ設定です。

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface StepsDataSource {
  title: string;
  content: string;
  status?: '' | 'wait' | 'process' | 'finish'; // 現在のステップのステータス
  customSwitcher?: boolean; // カスタムレンダリングを有効にするかどうか
  customRender?: (item: StepsDataSource) => ReactNode; // カスタムレンダリング関数
  icon?: string; // ステップアイコン
  percent?: number; // 現在のステップの進捗率。1〜100 の数値。
  disabled?: boolean; // ステップを無効にするかどうか
}
```

### TimelineDataSource

タイムラインコンポーネントのデータ設定です。

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface TimelineDataSource {
  title: string | I18n; // タイトル
  time: string; // 時刻
  icon?: string; // 表示するアイコン
  state?: '' | 'process' | 'success' | 'error'; // 現在のノードのステータス
  timeLeft?: () => ReactNode; // 左側の時刻表示
  doc?: () => ReactNode; // カスタムタイムラインノード。icon プロパティより優先されます。
  content?: () => ReactNode; // 右側のカスタムコンテンツ
}
```

### TreeDataSource

ツリーコンポーネントのデータ設定です。

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

### MenuDataSource

メニューコンポーネントのデータ設定です。

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

### SearchDataSource

検索ボックスのデータ設定です。

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

## その他

### TabItem

タブアイテムの設定プロパティです。

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface TabItem {
  title: string; // タブ名
  primaryKey: string; // タブの一意な識別子
  disabled?: boolean; // タブを無効にするかどうか
  customKey？: string; // カスタムキー
}
```

### TableColumn

スプレッドシートコンポーネントの列設定です。

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface TableColumn {
  dataKey: string; // データフィールド
  title: string | I18n; // 列ヘッダーのタイトル
  width?: string; // 列幅。px または % で指定可能。
  dataType: 'text' | 'link' | 'file' | 'image' | 'timestamp' | 'cascadeTimestamp' | 'employee' | 'money' | 'moneyRange' | 'enum' | 'custom'; // データ型
  float?: '' | 'left' | 'right'; // 画像のフロート（モバイルカードモードでのみ有効）
  imageProps?: React.CSSProperties; // 画像のスタイル
  imageWrapProps?: React.CSSProperties; // 画像コンテナのスタイル
  imageOnClick?: (e: Event, column: number) => void; // 画像クリック時のコールバック
  enumBadgeType?: '' | 'color' | 'background'; // enum のスタイル
  enumData?: any; // enum データ
  editType?: 'text' | 'link' | 'file' | 'image' | 'timestamp' | 'cascadeTimestamp' | 'employee' | 'money' | 'moneyRange' | 'enum' | 'custom'; // 編集フォーマット
  timeFormatter?: 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD' | 'YYYY-MM' | 'YYYY'; // 時刻フォーマット
  align?: 'left' | 'center' | 'right'; // 揃え
  lock?: 'none' | 'left' | 'right'; // 列のロック
  groupName?: string; // グループタイトル
  message?: string; // ユーザー向けヒント
  sortable?: boolean; // 列をソート可能にするかどうか
  highlight?: boolean; // ハイライトするかどうか。モバイルカードモードでのみ有効。
  hidden?: boolean; // 列を非表示にするかどうか。
  resizable?: boolean; // 列幅を調整可能にするかどうか。列幅リセット時にトリガーされるイベントと併用する必要があります。
  titleRender?: (title: string) => ReactNode; // タイトルのカスタムレンダリング
  render?: (value: any, index: number, rowData) => ReactNode; // コンテンツのカスタムレンダリング
  canEdit?: boolean; // 列を編集可能にするかどうか
  renderField?: (props: any, value: any, rowData: any) => ReactNode; // 編集状態でのカスタムレンダリング
  editProps?: any; // 編集設定
  filters?: {
    label: string;
    value: string;
  }[];
  filterMode?: 'multiple' | 'single'; // フィルターモード
}

```

### FilterConfig

フィルター項目の設定です。

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

### ScanCodeConfig

DingTalk クライアントでのスキャンモード設定です。DingTalk クライアントは以下のスキャンモードに対応しています。

* barCode - バーコード。
* qrCode - QRコード。
* all - 上記すべて。

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface ScanCodeConfig {
  enable: boolean;
  type: 'all' | 'barCode' | 'qrCode';
  editable: boolean; // スキャン結果を編集可能にするかどうか
}
```

### UploadConfig

リッチテキストコンポーネントの画像アップロード設定です。

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
interface UploadConfig {
  inputName?: string; // アップロード用の file input の name 属性。デフォルトは file。
  actionUrl: string; // アップロードエンドポイント
  formatResult?: (response: any) => any; // レスポンスデータの処理
  errorCallback?: () => void; // エラーコールバック
  progressCallback?: () => void; // アップロード進捗のコールバック
  headers?: Record<string, string>; // 画像アップロードのリクエストヘッダー設定
}
```