Skip to main content

 

 

 

 
Language:

 

 
モバイルアプリとリアクティブWebアプリにのみ適用されます

 

 
 
OutSystems

Card Item

Card Item UIパターンを使用すると、画像またはアイコン(左に配置)、タイトルと説明、アクション(右に配置)などの複数のコンテンツタイプを含むアイテムを一覧表示できます。

Card UIパターンの使用方法

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

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

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

    この例では、画面のメインコンテンツ領域にある既存のCardウィジェットにドラッグしています。必要な数のCard Itemウィジェットを追加できます(ここでは4つ追加しています)。

    デフォルトで、Card Itemウィジェットには[Left]、[Title]、[Content]、[Right]の各プレースホルダが含まれています。

  3. 各プレースホルダにコンテンツを追加します。

    この例では、[Left]プレースホルダにアイコンを追加し、[Title]プレースホルダと[Content]プレースホルダにテキストを追加し、[Right]プレースホルダに電話アイコンを追加しています。

  4. Properties]タブで(オプションの)プロパティを設定し、Card Itemのルックアンドフィールをカスタマイズできます。

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

プロパティ

プロパティ 説明
ExtendedClass(Text型): オプション Card Item UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

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