レイアウトコンテナ

​

1. レイアウトコンテナコンポーネントについて

​

1.1 レイアウトコンテナとは

• レイアウト：既存のビジュアルコンポーネントの配置を制御します。1つのアクションを表します。
• レイアウトコンテナ：レイアウト機能を持つコンテナです。レイアウトコンテナ内に複数のコンポーネントを配置して表示できます。
• 複雑なレイアウトが必要な場面では、YiDAのflexレイアウト（flex-layout）の使用を推奨します。現在、フロントエンド業界で主流のCSSレイアウト手法でもあります。
• flexレイアウトの詳細については、チュートリアルリンクをご参照ください。

レイアウトコンテナコンポーネントを追加します。 レイアウトコンテナ内に個別のコンポーネントを追加します。

​

1.2 利用シーン

• ページを分割する必要がある場合。たとえば、ページを2カラムで表示する場合など。
• ページを異なる画面サイズに対応させる必要がある場合。
• ページレイアウトにネスト、相対配置、位置依存の設計が含まれる場合。
• 高度なCSSレイアウト技術を必要とするページスタイルを実装する場合。

​

2. 属性

​

2.1 レイアウト

システムテンプレートを直接選択するか、カスタムレイアウトを設定します。以下の例をご覧ください。 レイアウトモードを選択します。

​

2.2 モバイル設定

モバイル端末でのコンポーネントの配置方法を定義します。以下の例をご覧ください。 モバイル設定。

​

3. スタイル

レイアウトコンテナのスタイル設定です。 コンポーネントのスタイルを設定します。

​

3.1 ソースコード編集

CSSソースコードで直接スタイルを編集します。現在のdivはデフォルトでflexレイアウトを使用しています。

​

3.2 状態

従来のPC側コンポーネントの状態によるグループ設定は、次のとおりです。

• default：通常状態。
• hover：ポインタがコンポーネントのホットゾーン上にあり、クリックしていない状態。
• focus：ページ要素がカーソルのフォーカス位置にある状態。
• active：ページ要素が選択され、アクティブになっている状態。

備考：

• default状態は他の3つの状態を上書きします。
• hover、focus、active状態の設定は互いに独立しており、干渉しません。
• CSSでは、それぞれ独立したセレクタとして表現されます。

​

3.3 表示

CSSのdisplayモードに対応します：

• block：ボックスモデル。
• inline-block：インラインボックスモデル。
• inline：インラインモデル。
• flex：フレキシブルレイアウトモデル。

これら4つはいずれもフロントエンドで標準的なCSSレイアウトモデルであり、ここでは詳しい説明を省略します。詳細についてはW3Cドキュメントをご参照ください。 たとえば、flexは一般的に以下のように使用します：

• flexレイアウトを使用して、必要に応じてコンポーネントを水平または垂直に配置します。
• その後、水平方向と垂直方向の両方を中央揃えに設定します。以下の例をご覧ください。

​

3.4 マージンとパディング

マージンとは、ボックスモデルにおいて、ボックスと他の要素ノードとの距離を指します。 パディングとは、ボックスモデルにおいて、ボックスとその内部要素との間の余白を指します。以下の例をご覧ください。

​

3.5 テキスト

テキスト設定は、グループ内のコンポーネントタイトルに影響します。テキストをカスタマイズするか、プリセットのテキストタイトルを選択します。以下の例をご覧ください。

​

3.6 背景

システム内蔵のカラーから選択するか、ローカルの画像を背景としてアップロードできます。以下の例をご覧ください。

​

3.7 ボーダー

レイアウトコンテナコンポーネントのボーダー効果を設定します。 角丸の設定もサポートしており、コンポーネントの4つの角の丸みを制御できます。以下の例をご覧ください。

​

3.8 シャドウ

コンポーネントのシャドウ投影を設定します。xとyで方向を指定し、blurとspreadでシャドウを調整します。以下の例をご覧ください。

​

3.9 不透明度

• ブロック全体の透明度を設定します。範囲は0〜100です。
• デフォルトは100です。0は完全に透明であることを意味します。

​

3.10 Cursor

• pointerを選択すると、ポインタがブロック上にホバーしたときに手のアイコンが表示されます。
• defaultを選択すると、ポインタがブロック上にホバーしたときに矢印アイコンが表示されます。