Skip to main content

 

パターン

 

 

OutSystems

StackedIcon

このパターンを使用して、2つのRichWidgetアイコンを上下に重ねることができます。

StackedIconは、アイコンのセットを拡張して概念の新しいグラフィック表示を作成するために使用します。

使用方法

表示するStackedIconを選択し、色、相対位置、サイズの入れ替えを選択します。

  1. StackedIconパターンをプレビューにドラッグします。

  2. 入力パラメータをデフォルト値に設定します。

  3. パブリッシュしてテストします。

入力パラメータ

入力名 説明 必須 デフォルト値
IconFront 前に表示するアイコン。 IconName Identifier False Entities.IconName.camera
IconBack 後に表示するアイコン。 IconName Identifier False Entities.IconName.ban
IconFrontColor 前のアイコンの色。 Color Identifier False Entities.Color.Neutral10
IconBackColor 後のアイコンの色。 Color Identifier False Entities.Color.Neutral10
IconSize サイズを設定します。 IconSize Identifier False none
InvertSize Trueに設定するとアイコンのサイズを入れ替えます。 Boolean False なし
ExtendedClass このブロックにカスタムスタイルクラスを追加します。 Text False なし

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
.stacked-icon .fa-2x アイコンのサイズを2emに変更します
.stacked-icon .fa-3x アイコンのサイズを3emに変更します
.stacked-icon .fa-4x アイコンのサイズを4emに変更します
.stacked-icon .fa-5x アイコンのサイズを5emに変更します
.stacked-icon .fa-lg アイコンのサイズを1.33333333emに変更します

高度なユースケース

ツールチップ付きのStackedIconを使用する

  1. Tooltipパターンをページにドラッグします。

  2. Tooltipの動作のパラメータを設定します。

  3. [Widget]プレースホルダに、StackedIconパターンをドラッグします。

  4. SatckedIconパターンのパラメータを設定します。

  5. [Content]プレースホルダで、Tooltipパターンから希望するアイコンのラベルを設定します。

  6. パブリッシュしてテストします。

注記

InvertSizeパラメータは、前後のアイコンのサイズを相互に変更します。つまり、.fa-stack-1x CSSクラスと.fa-stack-2x CSSクラスを切り替えます。

  • Was this article helpful?