9.2. 定义 Red Hat Developer Hub Home 页面的布局
先决条件
在每个断点中包括以下最佳参数：
- 宽度(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但是，默认情况下您可以在这个卡中看到第二个卡。
-
通过定义
x参数来显示三列中的卡，如下所示：
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