ネストレイアウトを追加する.

Learn DXPR BuilderBuild pagesAdd contentLay-out

カラムの中にローを入れて、そのカラムをさらに分割できます。見出しの上に 2つのアイコンを横に並べる場合などです。周りのローより細かいグリッドが 1つのカラムに必要な場合に使います。例では3カラムローの中央カラムにアイコン2つのローを追加します。最初のローはローとカラムからはじめます。

Designテキストの上に鉛筆アイコンと星アイコンを入れたネストローを持つ3カラムローの中央カラム

ネストレイアウトを追加する

ローとカラム付きのセクションを追加します。
カラムにホバーしてColumnバーの+をクリックします。
エレメントピッカーでLayoutタブからRowを選びます。
ネストローが独自カラム付きでカラムの中に現れます。
入れ子のカラムに通常通りエレメントを追加します (例: それぞれに Icon)。
ツールバーのSaveをクリックしてページを保存します。

新しいエレメントはカラムの上に付くので、ネストローはカラムのテキストより上に座ります。

表示結果

鉛筆と星が中央カラムの上部に横に並び、Design見出しの上に来ます。外側のカラムは変わりません。エディターでは、ネストローが外側ローの中に独自の RowバーとColumnバーを持ちます。

Section
  Row (1/3 + 1/3 + 1/3)
    Column
      Text: Discovery
    Column
      Row (nested, 1/2 + 1/2)
        Column
          Icon: pencil
        Column
          Icon: star
      Text: Design
    Column
      Text: Delivery

ネストレイアウトの設定

ネストローは通常のローと同じグリッドアイコンと設定です。ローとカラムをご覧ください。幅はページではなく親カラムに対する割合です。半幅カラムに半分ずつのネストローを入れると、4分の1幅の領域が2つできます。

768ピクセル未満の画面では、入れ子のカラムも外側と同じく積み重なります。アイコンを横並びのままにする場合は、Add screen sizeでネストローに携帯電話用レイアウトを与えます。

ネストの最大深度

ローは3階層まで入れ子にできます。ロー、そのカラムの1つにあるロー、その中のさらにもう1つのローです。4階層目は拒否されます。同じ上限は各コンテナータイプに個別に適用されます (Tabsの中のTabsなど)。あるタイプが他のタイプの上限に数えられることはありません。

ほとんどのレイアウトは2階層で足ります。階層が1つ増えるごとに狙いを外すコントロールバーが増え、コンテンツの幅が狭まります。

よくあるネストパターン

パターン	作り方
Feature grid	3カラムのロー。各カラムにネストローがあり、テキスト横にアイコン
Sidebar blocks	2/3 + 1/3のロー。狭いカラムにネストローを置き、ブロックごとに1本
Team members	2カラムのロー。各カラムに1/3 + 2/3のネストローがあり、略歴の横に肖像写真

表示されない場合

ローは3階層までしかネストできないという警告が出ます。 カラムがすでに2つのネストローの中にあるため「Element cannot be added」と出ます。1つ上の階層のカラムにローを追加するか、外側ローにカラムの多いプリセットを使います。
ネストローがテキストの下ではなく上にあります。 新しいエレメントはカラムの上に付きます。ネストローのバーの Moreを開いてMove Downを選びます。
携帯電話でアイコンが縦に積まれます。 入れ子のカラムは全カラムと同じく768ピクセル未満で積み重なります。ネストローのグリッドアイコンをクリックしてAdd screen sizeを選び、Extra small (< 576px)に 1/2 + 1/2を選びます。

次はこちら

ポジションドレイヤー: グリッドではできない重ね方をします。
ローとカラム: カラムプリセットと画面サイズごとのレイアウト。
タブ: コンテンツパネルを横並びの代わりに1か所に積みます。