9.2. Red Hat Developer Hub ホームページのレイアウトの定義
前提条件
各ブレークポイントに次の最適なパラメーターを含めます。
- 幅 (w)
- 高さ (h)
- 位置 (x および y)
手順
次のいずれかのオプションを選択して、Developer Hub の
app-config.yaml設定ファイルを設定します。- 次のように、小さいウィンドウではスペース全体を、大きいウィンドウではスペースの半分を使用します。
dynamicPlugins:
frontend:
janus-idp.backstage-plugin-dynamic-home-page:
mountPoints:
- mountPoint: home.page/cards
importName: Placeholder
config:
layouts:
xl: { w: 6, h: 2 }
lg: { w: 6, h: 2 }
md: { w: 6, h: 2 }
sm: { w: 12, h: 2 }
xs: { w: 12, h: 2 }
xxs: { w: 12, h: 2 }
props:
showBorder: true
debugContent: a placeholder-
次のように
xパラメーターを定義して、カードを並べて表示します。
dynamicPlugins:
frontend:
janus-idp.backstage-plugin-dynamic-home-page:
mountPoints:
- mountPoint: home.page/cards
importName: Placeholder
config:
layouts:
xl: { w: 6, h: 2 }
lg: { w: 6, h: 2 }
md: { w: 6, h: 2 }
sm: { w: 12, h: 2 }
xs: { w: 12, h: 2 }
xxs: { w: 12, h: 2 }
props:
showBorder: true
debugContent: left
- mountPoint: home.page/cards
importName: Placeholder
config:
layouts:
xl: { w: 6, h: 2, x: 6 }
lg: { w: 6, h: 2, x: 6 }
md: { w: 6, h: 2, x: 6 }
sm: { w: 12, h: 2, x: 0 }
xs: { w: 12, h: 2, x: 0 }
xxs: { w: 12, h: 2, x: 0 }
props:
showBorder: true
debugContent: rightただし、デフォルトではこのカードの下に 2 枚目のカードが表示されます。
-
次のように
xパラメーターを定義して、カードを 3 列に表示します。
dynamicPlugins:
frontend:
janus-idp.backstage-plugin-dynamic-home-page:
mountPoints:
- mountPoint: home.page/cards
importName: Placeholder
config:
layouts:
xl: { w: 4, h: 2 }
lg: { w: 4, h: 2 }
md: { w: 4, h: 2 }
sm: { w: 6, h: 2 }
xs: { w: 12, h: 2 }
xxs: { w: 12, h: 2 }
props:
showBorder: true
debugContent: left
- mountPoint: home.page/cards
importName: Placeholder
config:
layouts:
xl: { w: 4, h: 2, x: 4 }
lg: { w: 4, h: 2, x: 4 }
md: { w: 4, h: 2, x: 4 }
sm: { w: 6, h: 2, x: 6 }
xs: { w: 12, h: 2 }
xxs: { w: 12, h: 2 }
props:
showBorder: true
debugContent: center
- mountPoint: home.page/cards
importName: Placeholder
config:
layouts:
xl: { w: 4, h: 2, x: 8 }
lg: { w: 4, h: 2, x: 8 }
md: { w: 4, h: 2, x: 8 }
sm: { w: 6, h: 2 }
xs: { w: 12, h: 2 }
xxs: { w: 12, h: 2 }
props:
showBorder: true
debugContent: right