> ## 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 のカスタムページコンポーネントの使い方を解説。設定エントリ、ページヘッダーの有効化などの属性設定、ライフサイクルイベントまで、ページ全体の構成と挙動を制御する方法を紹介します。

| **機能**  | **無料版** | **ベーシック版** | **プロフェッショナル版** | **専用版** |
| ------- | ------- | ---------- | -------------- | ------- |
| カスタムページ | 非対応     | 非対応        | 対応             | 対応      |

## 1. 概要

ページコンポーネントは、デザイナーにデフォルトで配置されています。YiDA ページのルートコンポーネントであり、ページ上の他のすべてのコンポーネントはこの内側にネストされます。

ページコンポーネントは 1 ページにつき 1 つのみ存在します。そのため、左側のコンポーネントライブラリには表示されず、コピーや削除もできません。

## 2. 設定エントリ

### 2.1 上部の「ページ設定」をクリック

デザイナーの上部ツールバーで、**ページ設定**をクリックします。デザイナー内でページコンポーネントが選択され、右側にその設定が表示されます。

フォーム編集ページ

## 3. 属性

属性設定

### 3.1 ページヘッダーを有効化

ページヘッダーを有効にすると、ページ上部に固定ヘッダーエリアが表示されます。このエリア内のプリセットスロットに、他のコンポーネントを追加できます。

デザイナー内でヘッダーをクリックすると、ヘッダーコンポーネントが選択され、設定が可能になります。左側のアウトラインツリーや右側のパンくずリストからヘッダーコンポーネントを選択することもできます。

#### 3.1.1 ヘッダー属性

ヘッダーはスロットの集合体です。組み込みのスロットがいくつか用意されており、必要に応じて有効・無効を切り替えられます。

スロットを有効にすると、コンポーネントやテンプレートをドラッグして配置でき、カスタム効果を実現できます。

有効にしたスロットには、デフォルトでシステム推奨のコンポーネントが配置されます。必要に応じてコンポーネントを削除または追加できます。

#### 3.1.2 ヘッダースタイル

コンポーネントの一般的なスタイル設定については、[**スタイル概要**](/ja/yida/form/gdnsgw)を参照してください。

### 3.2 ライフサイクル

**パス**: カスタムページフォーム >> ページ設定 >> 属性 >> ライフサイクル

#### 3.2.1 ページ読み込み完了時

ページの読み込みが完了したときに実行するアクションを設定します。通常、カスタムの初期化ロジックを実行するために使用します。

**「アクションをバインド」をクリックします。**

**アクション名を入力し、「確認」をクリックしてアクションの作成を完了します。**

**アクションパネルで、対応するビジネスロジックを記述します。**

ビジネスロジックの記述方法については、[JS アクションパネル - フロントエンドコードの開放性](/ja/yida/developer-features/ocmxyv)を参照してください。

バインド後、右側のアイコンをクリックすることで、**コード内で位置を特定**、コードの**編集**、またはアクションバインドの**削除**が行えます。

#### 3.2.2 ページを閉じるとき

ページが閉じられたときにトリガーするアクションを設定します。手順は上記の**ページ読み込み完了時**と同様です。

### 3.3 ページコンテンツ設定

#### 3.3.1 PC 版とモバイル版の設定

PC 版のマージン、パディング、および背景色を設定します。

モバイル版のマージン、パディング、および背景色を設定します。

## 4. スタイル

コンポーネントの一般的なスタイル設定については、[**スタイル概要**](/ja/yida/form/gdnsgw)を参照してください。