Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

Badge

数値情報を通知として表示します。

Badgeは、新しいメッセージやタスクなどの数値情報をユーザーに通知するために使用します。

使用方法

パラメータを使用して、色、形、サイズ、明るさのテーマなどのオプションを選択します。

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

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

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

![](<images/badge-image-1.png>)

入力パラメータ

入力名 説明 必須 デフォルト値
Number バッジ内に表示される数字。 Integer False 8
Color 色を設定します。 Color Identifier False Entities.Color.Primary
Shape 形を設定します。 Shape Identifier False Entities.Shape.Rounded
Size サイズを設定します。 Size Identifier False なし
IsLight 背景に最も明るい色のバージョンを使用し、テキストに暗い色のバージョンを使用します。 Boolean False False
ExtendedClass このブロックにカスタムスタイルクラスを追加します。Text False なし

レイアウトおよびクラス

高度なユースケース

枠線付きの透明なBadgeパターンを使用する

1.Colorの値にTransparentを使用します。

1.ExtendedClass入力パラメータで、希望するテキストの色を選択します。

![](<images/badge-image-3.png>)

1.Badgeの枠線のサイズを選択します。

![](<images/badge-image-4.png>)

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

![](<images/badge-image-5.png>)

注記

Badgeパターンの数字が99より大きい場合、99+と表示されます。

  • Was this article helpful?