Skip to main content

 

 

 

 
Language:

 

 
モバイルアプリとリアクティブWebアプリにのみ適用されます
Service Studioバージョン :
 
 
OutSystems

Tag

Tag UIパターンを使用すると、小さなテキストに色付きタグ形式のスタイルを適用できます。Tag UIパターンは、ステータス、ラベル、カテゴリを表示してユーザーエクスペリエンスを向上させるために使用します。

Tag UIパターンの使用方法

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

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

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

  3. プレースホルダにコンテンツを追加します。この例では、テキストを追加しています。

  4. [Properties]タブで(オプションの)プロパティを設定し、サイズや色などのTagのルックアンドフィールを変更できます。

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

プロパティ

プロパティ 説明
Color(Color Identifier型): オプション Tagの背景色を設定します。事前定義された利用可能な色は、赤、オレンジ、黄、ライム、緑、青、紫、ピンクなどです。

  • 空白 - アプリを作成したときに選択した色のバッジを表示します(デフォルト値)。
  • Entities.Color.Red - Tagの背景色が赤色になります。
Shape(Shape Identifier型): オプション Tagの形を設定します。事前定義された利用可能な形は、円形、角が丸い四角形、四角形です。

  • 空白 - 円形のTagを表示します(デフォルト値)。
  • Entities.Shape.Sharp - 四角形のTagを表示します。
Size(Size Identifier型): オプション Tagのサイズを設定します。事前定義された利用可能なサイズは、小および中です。

  • Entities.Size.Medium - 中サイズのバッジを表示します。
  • Entities.Size.Small - 小サイズのTagを表示します。
IsLight(Boolean型): オプション Tagの背景色を指定します。

  • 空白 - Tagに暗い色合いを適用し、テキストに淡い色合いを適用します(デフォルト値)。
  • True - Tagに明るい色合いを適用し、テキストに暗い色合いを適用します。
  • False - Tagに暗い色合いを適用し、テキストに淡い色合いを適用します。
ExtendedClass(Text型): オプション Tag UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるTag UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるTag UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?