Stacked Icon
このパターンを使用して、2つのRichWidgetアイコンを上下に重ねることができます。
StackedIconは、アイコンのセットを拡張して概念の新しいグラフィック表示を作成するために使用します。
使用方法
表示するStackedIconを選択し、色、相対位置、サイズの入れ替えを選択します。
-
StackedIconパターンをプレビューにドラッグします。
-
入力パラメータをデフォルト値に設定します。
-
パブリッシュしてテストします。
入力パラメータ
入力名 | 説明 | 型 | 必須 | デフォルト値 |
---|---|---|---|---|
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を使用する
-
Tooltipパターンをページにドラッグします。
-
Tooltipの動作のパラメータを設定します。
-
[Widget]プレースホルダに、StackedIconパターンをドラッグします。
-
SatckedIconパターンのパラメータを設定します。
-
[Content]プレースホルダで、Tooltipパターンから希望するアイコンのラベルを設定します。
-
パブリッシュしてテストします。
注記
InvertSizeパラメータは、前後のアイコンのサイズを相互に変更します。つまり、.fa-stack-1x
CSSクラスと.fa-stack-2x
CSSクラスを切り替えます。