カスタムアイコンの追加

[AEM Forms as a Cloud Service]{class="badge informative"}

タブにカスタムアイコンを追加すると、いくつかの点でユーザーエクスペリエンスと視覚的な魅力が向上します。

前提条件

この記事に従うには、Git、Cloud Manager を使用した AEM プロジェクトの作成とデプロイ、AEM Cloud Manager でのフロントエンドパイプラインの設定、および少しの CSS に精通している必要があります。上記のトピックに精通していない場合は、テーマを使用したコアコンポーネントのスタイル設定の記事を参照してください。

テーマへのアイコンの追加

Visual Studio Code または任意の他のエディターでテーマプロジェクトを開きます。
任意のアイコンを画像フォルダーに追加します。
赤色でマークされたアイコンは、新しく追加されたアイコンです。

アイコンを保存する icon-map の作成

icon-map を _variable.scss ファイルに作成します。SCSS マップ $icon-map はキーと値のペアのコレクションで、各キーはアイコン名（ホーム、ファミリーなど）を表し、各値はそのアイコンに関連付けられた画像ファイルへのパスです。

$icon-map: (
    home: "./resources/images/home.png",
    family: "./resources/images/icons8-family-80.png",
    pdf: "./resources/images/pdf.png",
    income: "./resources/images/income.png",
    assets: "./resources/images/assets.png",
    cars: "./resources/images/cars.png"
);

mixin の追加

_mixin.scss に次のコードを追加します

@mixin add-icon-to-vertical-tab($image-url) {
  display: inline-flex;
  align-self: center;
  &::before {
    content: "";
    display:inline-block;
    background: url($image-url) left center / cover no-repeat;
    margin-right: 8px; /* Space between icon and text */
    height:40px;
    width:40px;
    vertical-align:middle;

  }

}

add-icon-to-vertical-tab mixin は、垂直タブ上のテキストの横にカスタムアイコンを追加するように設計されています。画像をアイコンとしてタブに簡単に含め、テキストの横に配置してスタイルを設定し、一貫性と整列を確保できます。

Mixin の分類、Mixin の各パートの機能は次のとおりです。

パラメーター:

_verticaltabs.scss の更新

この記事の目的で、タブアイコンを表示する新しい css クラス（cmp-verticaltabs–marketing）を作成しました。この新しいクラスでは、アイコンを追加してタブ要素を拡張します。css クラスの完全なリストは次のとおりです

.cmp-verticaltabs--marketing
{
  .cmp-verticaltabs
    {
      &__tab
        {
          cursor:pointer;
            @each $name, $url in $icon-map {
            &[data-icon-name="#{$name}"]
              {
                  @include add-icon-to-vertical-tab($url);
              }
            }
        }
    }
}

verticaltabs コンポーネントの変更

/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/verticaltabs.html から verticaltabs.html ファイルをコピーし、プロジェクトの verticaltabs コンポーネントの下にペーストします。次の画像に示すように、li 役割の下にあるコピーしたファイルに行 data-icon-name="${tab.name}" を追加します

タブ名の値使用して data-icon-name というカスタムデータ属性を設定します。タブ名がアイコンマップの画像名と一致する場合、対応する画像がタブに関連付けられます。

コードのテスト

更新された verticaltabs コンポーネントをクラウドインスタンスにデプロイします。
フロントエンドパイプラインを使用して、更新されたテーマをデプロイします。
次に示すように、垂直タブコンポーネントのスタイルバリエーションを作成します

css クラス cmp-verticaltabs–marketing に関連付けられた、マーケティングというスタイルバリエーションを作成しました。
垂直タブコンポーネントを使用してアダプティブフォームを作成します。垂直タブコンポーネントをマーケティングスタイルバリエーションに関連付けます。
垂直タブにいくつかのタブを追加し、アイコンマップで定義されている画像（ホーム、ファミリーなど）に一致するように名前を付けます。

フォームをプレビューすると、タブに関連付けられた適切なアイコンが表示されます