10.5. エンティティー詳細タブのレイアウトの設定

前提条件

• タブコンテンツを提供するプラグインでは、config セクションでデフォルト設定を定義する Developer Hub プラグイン などの設定が許可されます。

手順

• app-config.yaml ファイルのプラグインのデフォルト設定をコピーし、layout のプロパティーを変更します。

  global:
    dynamic:
      plugins:
        - package: <package_location>
          disabled: false
          pluginConfig:
            dynamicPlugins:
              frontend:
                <plugin_name>:
                  mountPoints:
                    - mountPoint: <mount_point>
                      importName: <import_name>
                      config:
                        layout:
                          gridColumn:
                            lg: span 6
                            xs: span 12

  package

  パッケージの場所を入力します (例: ./dynamic-plugins/dist/backstage-community-plugin-tekton)。

  <plugin_name>

  プラグイン名を入力します (例: backstage-community.plugin-tekton)。

  mountPoint

  プラグインのデフォルト設定で定義されているマウントポイント (例: entity.page.ci/cards) をコピーします。

  importName

  プラグインのデフォルト設定で定義されているインポート名 (例: TektonCI) をコピーします。

  layout

  レイアウト設定を入力します。タブの内容を、12 列のグリッドを使用するレスポンシブなグリッドに表示します。このグリッドは、gridColumn などの CSS プロパティーに指定できるさまざまなブレークポイント (xs、sm、md、lg、xl) をサポートしています。この例では、12 列のうち 6 列を使用して、2 枚の Tekton CI カードを大きい画面 (lg) に並べて表示します (span 6 列を使用)。また、カードをそれぞれ表示します (xs 以上で span 12 列を使用)。