Skip to main content

 

 

 

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

Stacked Icon

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

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

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

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

    Stacked Iconウィジェットが表示されます。

  2. ツールボックスから、Stacked Iconウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

  3. 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_というスタイルを追加します。
  • Was this article helpful?