従来のWebアプリにのみ適用されます

Stacked Icon

Last updated
Save as PDF

Stacked Icon UIパターンを使用すると、アイコンの上に別のアイコンを重ね合わせて、特有の意味を持つ新しいアイコンを作成することができます。

Stacked Icon UIパターンの使用方法

この例では、カメラアイコンの上に禁止アイコンを重ね合わせて、写真撮影禁止アイコンを作成します。

Service StudioのツールボックスでStacked Iconを検索します。

Stacked Iconウィジェットが表示されます。
ツールボックスから、Stacked Iconウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
［Properties］タブで関連するアイコンを選択します。この例では、前のアイコンとして禁止アイコンを選択し、後ろのアイコンとしてカメラアイコンを選択しています。また、前後のアイコンの色とサイズも設定しています。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

プロパティ

プロパティ	説明
IconFront（IconName Identifier型）: オプション	別のアイコンの前に表示されるアイコン。以下などの値が事前定義されています。 Android Bell Camera Desktop Envelope 例空白 - カメラアイコンを表示します（デフォルト値）。 Entities.IconName.instagram - Instagramアイコンを表示します。
IconBack（IconName Identifier型）: オプション	アイコンの後ろに表示されるアイコン。以下などの値が事前定義されています。 Circle Square Heart 例空白 - 禁止アイコンを表示します。 Entities.IconName.birthday_cake - バースデーケーキアイコンを表示します。
IconFrontColor（Color Identifier型）: オプション	前のアイコンの色。事前定義された利用可能なバッジの色は、赤、オレンジ、黄、ライム、緑、青、紫、ピンクなどです。例空白 - 黒色（Neutral10）のアイコンを表示します（デフォルト値）。 Entities.Color.Red - 赤色のアイコンを表示します。
IconBackColor（Color Identifier型）: オプション	後ろのアイコンの色。事前定義された利用可能なバッジの色は、赤、オレンジ、黄、ライム、緑、青、紫、ピンクなどです。例空白 - 黒色（Neutral10）のアイコンを表示します（デフォルト値）。 Entities.Color.Green - 緑色のアイコンを表示します。
IconSize（IconSize Identifier型）: オプション	アイコンのサイズを設定します。以下の値が事前定義されています。 Size_2x Size_3x Size_4x Size_5x Percent_33 例 Entities.IconSize.Size_2x - フォントをアイコンコンテナのサイズの2倍にします。 Entities.IconSize.Size_Percent_33 - フォントをアイコンコンテナのサイズの33%にします。
InvertSize（Boolean型）: オプション	Trueの場合、アイコンのサイズを入れ替えます。Falseの場合、入れ替えません。
ExtendedClass（Text型）: オプション	Separator UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。例空白 - カスタムスタイルを追加しません（デフォルト値）。 "myclass" - 適用されるStacked Icon UIのスタイルに_myclass_というスタイルを追加します。 "myclass1" "myclass2" - 適用されるStacked Icon UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。